/* =========================================================
   MoreTech – prekės ženklo stiliaus kintamieji svetainei
   Versija 1.0 · 2026. Šaltinis: MoreTech prekės ženklo knyga.
   Šriftai talpinami svetainėje: assets/css/fonts.css (įkelti prieš šį failą).
   ========================================================= */

:root {
  /* --- Pagrindinės spalvos --- */
  --mt-turquoise: #46FDFD;        /* MORE turkis – akcentai, mygtukai tamsiame fone */
  --mt-turquoise-deep: #007A82;   /* Gilusis turkis – tekstas/nuorodos šviesiame fone (5,1:1) */
  --mt-turquoise-soft: #2BB8B8;   /* Tik dekoratyviai šviesiame fone, ne tekstui */
  --mt-black: #0A0A0A;            /* Gilioji juoda – pagrindinis fonas */
  --mt-white: #FFFFFF;

  /* --- Neutralūs tonai --- */
  --mt-graphite-900: #121417;
  --mt-graphite-800: #1C1F24;
  --mt-graphite-700: #2A2F36;
  --mt-grey-500: #5B6470;
  --mt-grey-300: #9AA3AE;
  --mt-grey-100: #E6E9ED;
  --mt-grey-50:  #F5F7F9;

  /* --- Funkcinės spalvos --- */
  --mt-success: #3DDC97;
  --mt-warning: #FFB547;
  --mt-error:   #FF5C6C;
  --mt-info:    #5B8CFF;

  /* --- Duomenų vizualizacija (naudoti šia eile) --- */
  --mt-chart-1: #46FDFD;
  --mt-chart-2: #5B8CFF;
  --mt-chart-3: #A78BFA;
  --mt-chart-4: #3DDC97;
  --mt-chart-5: #FFB547;
  --mt-chart-6: #FF7AB6;

  /* --- Semantiniai kintamieji (tamsi tema – numatytoji) --- */
  --mt-bg: var(--mt-black);
  --mt-surface: var(--mt-graphite-900);
  --mt-surface-raised: var(--mt-graphite-800);
  --mt-border: var(--mt-graphite-700);
  --mt-text: var(--mt-white);
  --mt-text-muted: var(--mt-grey-300);
  --mt-accent: var(--mt-turquoise);
  --mt-on-accent: var(--mt-black);
  --mt-link: var(--mt-turquoise);
  --mt-focus-color: var(--mt-turquoise);          /* Fokuso žiedas tamsiame fone */
  --mt-focus-ring: 0 0 0 4px rgb(70 253 253 / 0.25); /* Papildomas švytėjimas formos laukams */

  /* --- Tipografija --- */
  --mt-font-sans: "Poppins", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --mt-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --mt-fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);   /* 36 → 56 px */
  --mt-fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);   /* 28 → 40 px */
  --mt-fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);   /* 22 → 28 px */
  --mt-fs-h4: 1.25rem;     /* 20 px */
  --mt-fs-body-lg: 1.125rem; /* 18 px */
  --mt-fs-body: 1rem;      /* 16 px */
  --mt-fs-small: 0.875rem; /* 14 px */
  --mt-fs-button: 0.9375rem; /* 15 px */
  --mt-fs-label: 0.75rem;  /* 12 px */

  --mt-fw-light: 300;
  --mt-fw-regular: 400;
  --mt-fw-medium: 500;
  --mt-fw-semibold: 600;
  --mt-fw-bold: 700;

  /* --- Tarpai (8 px sistema) --- */
  --mt-space-1: 4px;  --mt-space-2: 8px;  --mt-space-3: 12px; --mt-space-4: 16px;
  --mt-space-5: 24px; --mt-space-6: 32px; --mt-space-7: 48px; --mt-space-8: 64px;
  --mt-space-9: 96px; --mt-space-10: 128px;
  --mt-container: 1200px;

  /* --- Kampai, šešėliai, gradientai --- */
  --mt-radius-sm: 8px;
  --mt-radius-md: 16px;
  --mt-radius-lg: 24px;
  --mt-radius-icon: 18.75%;
  --mt-shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 12px 32px rgb(0 0 0 / 0.45);
  --mt-glow: 0 0 24px rgb(70 253 253 / 0.35);
  --mt-gradient-glow: radial-gradient(circle at 80% 0%, rgb(70 253 253 / 0.18), transparent 55%);
  --mt-pattern-dots: radial-gradient(rgb(70 253 253 / 0.08) 1px, transparent 1px) 0 0 / 24px 24px;

  /* --- Judesys --- */
  --mt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mt-duration: 200ms;
}

/* Šviesi tema – dokumentams, tinklaraščiui, formoms */
[data-theme="light"] {
  --mt-bg: var(--mt-white);
  --mt-surface: var(--mt-grey-50);
  --mt-surface-raised: var(--mt-white);
  --mt-border: var(--mt-grey-100);
  --mt-text: var(--mt-black);
  --mt-text-muted: var(--mt-grey-500);
  --mt-accent: var(--mt-black);
  --mt-on-accent: var(--mt-turquoise);
  --mt-link: var(--mt-turquoise-deep);
  --mt-focus-color: var(--mt-turquoise-deep);       /* #007A82 – #46FDFD šviesiame fone nematomas */
  --mt-focus-ring: 0 0 0 4px rgb(0 122 130 / 0.2);
  --mt-shadow-card: 0 8px 24px rgb(10 10 10 / 0.08);
}

/* ---------------- Bazė ---------------- */
html { font-family: var(--mt-font-sans); background: var(--mt-bg); color: var(--mt-text); }
body { font-size: var(--mt-fs-body); font-weight: var(--mt-fw-light); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, .mt-h1 { font-size: var(--mt-fs-h1); font-weight: var(--mt-fw-bold); line-height: 1.1; letter-spacing: -0.02em; }
h2, .mt-h2 { font-size: var(--mt-fs-h2); font-weight: var(--mt-fw-semibold); line-height: 1.15; letter-spacing: -0.01em; }
h3, .mt-h3 { font-size: var(--mt-fs-h3); font-weight: var(--mt-fw-semibold); line-height: 1.25; }
h4, .mt-h4 { font-size: var(--mt-fs-h4); font-weight: var(--mt-fw-medium); line-height: 1.35; }
small, .mt-small { font-size: var(--mt-fs-small); font-weight: var(--mt-fw-regular); }
a { color: var(--mt-link); text-underline-offset: 3px; }
code, kbd, .mt-mono { font-family: var(--mt-font-mono); }
::selection { background: var(--mt-turquoise); color: var(--mt-black); }
:focus-visible { outline: 2px solid var(--mt-focus-color); outline-offset: 2px; }

.mt-label { font-size: var(--mt-fs-label); font-weight: var(--mt-fw-semibold); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mt-link); }
.mt-accent-text { color: var(--mt-link); }
.mt-container { max-width: var(--mt-container); margin-inline: auto; padding-inline: var(--mt-space-5); }
.mt-section { padding-block: var(--mt-space-9); }
.mt-bg-glow { background: var(--mt-gradient-glow), var(--mt-bg); }
.mt-bg-dots { background: var(--mt-pattern-dots), var(--mt-bg); }

/* ---------------- Mygtukai ---------------- */
.mt-btn {
  display: inline-flex; align-items: center; gap: var(--mt-space-2);
  font: var(--mt-fw-semibold) var(--mt-fs-button)/1 var(--mt-font-sans); letter-spacing: 0.04em;
  padding: 14px 24px; border-radius: var(--mt-radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: box-shadow var(--mt-duration) var(--mt-ease), background var(--mt-duration) var(--mt-ease), transform var(--mt-duration) var(--mt-ease);
}
.mt-btn--primary { background: var(--mt-accent); color: var(--mt-on-accent); }
.mt-btn--primary:hover { box-shadow: var(--mt-glow); transform: translateY(-1px); }
.mt-btn--secondary { background: transparent; color: var(--mt-link); border-color: currentColor; }
.mt-btn--secondary:hover { background: rgb(70 253 253 / 0.08); }
.mt-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------------- Kortelė ---------------- */
.mt-card { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-md); padding: var(--mt-space-6); box-shadow: var(--mt-shadow-card); }
.mt-stat { font-size: var(--mt-fs-h2); font-weight: var(--mt-fw-semibold); color: var(--mt-link); line-height: 1; }

/* ---------------- Formos ---------------- */
.mt-input {
  width: 100%; font: var(--mt-fw-regular) var(--mt-fs-body) var(--mt-font-sans); color: var(--mt-text);
  background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-sm); padding: 12px 16px;
  transition: border-color var(--mt-duration) var(--mt-ease), box-shadow var(--mt-duration) var(--mt-ease);
}
.mt-input::placeholder { color: var(--mt-grey-500); }
.mt-input:focus { outline: none; border-color: var(--mt-focus-color); box-shadow: var(--mt-focus-ring); }
.mt-input:focus-visible { outline: 2px solid var(--mt-focus-color); outline-offset: 2px; }
.mt-input[aria-invalid="true"] { border-color: var(--mt-error); }

/* ---------------- Žymos / būsenos ---------------- */
.mt-badge { display: inline-block; font-size: var(--mt-fs-label); font-weight: var(--mt-fw-medium); padding: 4px 10px; border-radius: 999px; background: rgb(70 253 253 / 0.12); color: var(--mt-link); }
.mt-badge--success { background: rgb(61 220 151 / 0.14); color: var(--mt-success); }
.mt-badge--warning { background: rgb(255 181 71 / 0.14); color: var(--mt-warning); }
.mt-badge--error   { background: rgb(255 92 108 / 0.14); color: var(--mt-error); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }