/* =============================================================
   AERYUM · Design Tokens (v0.1)  – light + dark
   Hand-authored preview of the ADR-0002 token output.
   Source of truth for the browser preview; will be generated
   from DTCG JSON via Style Dictionary in the real system.
   Layers: PRIMITIVE  →  SEMANTIC (theme-scoped)  →  COMPONENT
   ============================================================= */

:root {
  /* ---------- PRIMITIVE ---------- */
  /* Kék rampa. Az arculatból KÉT fokozat származik: a 600 (#204EFB, a márkaszín)
     és a 100 (#DDE6FF, kiemelő tint). A többi a mi számításunk, szabadon áttervezhető.
     Az arculati fokozatokat a check-brand-anchors.mjs őrzi. */
  --blue-50:#EDF1FF;  --blue-100:#DDE6FF; --blue-200:#BCCCFF; --blue-300:#94ACFF;
  --blue-400:#5E80FF; --blue-500:#3B62FF; --blue-600:#204EFB; --blue-700:#1A3FCB;
  --blue-800:#1636A6; --blue-900:#14307F;
  /* Semleges rampa. Az arculatból HÁROM érték származik: a 200 (#DBDEE3), a fehér
     és a fekete. A #494E54 (a 700) NEM arculati érték, noha ez a komment korábban
     annak nevezte: az útmutató 46. oldali palettáján nem szerepel, csak a 40. oldali
     színlistában, ahol a kék is hibás (#de4a24, ami narancs). A forrás PDF-ből
     2026-08-18-án ellenőrizve. A többi fokozat a mi levezetésünk. */
  --gray-0:#FFFFFF;  --gray-25:#F7F8FA; --gray-50:#F0F2F5; --gray-100:#E7EAEF;
  --gray-200:#DBDEE3; --gray-300:#C3C8D0; --gray-400:#9AA1AC; --gray-500:#787E86;
  --gray-600:#565C64; --gray-700:#494E54; --gray-800:#2A2E37; --gray-900:#15171D;
  --gray-950:#0B0C0F; --black:#000000;
  /* Functional status (muted, derived – not in brand book) */
  --green-500:#2E9E74; --green-600:#25835F; --green-700:#12633F; --green-100:#E4F4EC;
  --amber-500:#B8801C; --amber-600:#9A6A14; --amber-700:#6E4A0E; --amber-100:#F7EEDA;
  --red-500:#CE443A;   --red-600:#B23229;   --red-700:#9A241C;   --red-100:#FAE7E5;

  /* Type */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Inter',system-ui,sans-serif; /* Articulat CF (logo only) → Inter for UI */
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-display:clamp(2.4rem,5vw,3.6rem); --fs-h1:2.25rem; --fs-h2:1.75rem; --fs-h3:1.375rem;
  --fs-h4:1.125rem; --fs-body-lg:1.125rem; --fs-body:1rem; --fs-body-sm:.875rem;
  --fs-caption:.75rem; --fs-overline:.6875rem;
  --lh-tight:1.1; --lh-snug:1.3; --lh-normal:1.5; --lh-relaxed:1.6;
  --tracking-tight:-.02em; --tracking-normal:0; --tracking-label:.08em; --tracking-cta:.1em;

  /* Spacing (4pt base, 8pt rhythm) */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* Density (comfortable default; compact tightens – toggled via data-density on <html>) */
  --pad-card:24px; --cell-y:13px; --cell-x:12px;

  /* Radius */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px;
  --radius-pill:999px; --radius-squircle:26%;
  --border-width:1px; --border-width-strong:2px;

  /* Z-index scale */
  --z-base:0; --z-sticky:100; --z-drawer:200; --z-overlay:300; --z-modal:400;
  --z-popover:500; --z-toast:600; --z-tooltip:700;

  /* Motion */
  --ease-standard:cubic-bezier(.4,0,.15,1); --ease-out:cubic-bezier(0,0,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --dur-slower:480ms;

  /* Görgetősáv. Egyszer van definiálva, mert a --border-strong-ra épül: azt
     mindkét téma újradefiniálja, a custom property pedig használatkor oldódik
     fel, így a sáv magától követi a világos és a sötét témát is. */
  --scroll-size:10px;
  --scroll-thumb:color-mix(in srgb, var(--border-strong) 90%, transparent);
  --scroll-thumb-hover:var(--text-muted);

  /* Breakpoints (reference only – CSS custom properties are NOT valid inside an
     @media condition, so every media query hard-codes the same numbers. If you
     change a tier here you MUST update the matching @media rules by hand.)
     Tiers match the app-frame layouts + the #responsive viewport presets. */
  --bp-sm:600px; --bp-md:900px; --bp-lg:1200px; --bp-xl:1440px; --bp-2xl:1920px;

  /* Brand gradient (ADR-0011, option A "Mély") + cool/expressive family */
  --brand-gradient:linear-gradient(135deg,#3B62FF 0%,#204EFB 55%,#1636C9 100%);
  --grad-cool:linear-gradient(135deg,#3E56E6 0%,#5B4BE6 55%,#7C3AED 100%);
  --grad-aqua:linear-gradient(135deg,#0E7EA6 0%,#1C63E0 60%,#1E46D6 100%);
  --grad-mesh:radial-gradient(120% 120% at 12% 12%,#3B62FF 0%,transparent 52%),radial-gradient(110% 110% at 88% 8%,#6E4BFF 0%,transparent 48%),radial-gradient(120% 120% at 72% 108%,#12A0E0 0%,transparent 48%),#1a3ad6;
}

/* ---------- SEMANTIC · LIGHT ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --text-primary:#0B0C0E; --text-secondary:var(--gray-700); --text-muted:var(--gray-600);
  --text-disabled:var(--gray-400); --text-on-accent:#FFFFFF; --text-link:var(--blue-600); --text-accent:var(--blue-600);

  --surface-page:var(--gray-50); --surface-nav:var(--blue-600); --surface-card:var(--gray-0);
  --surface-raised:var(--gray-0); --surface-sunken:var(--gray-100); --surface-overlay:rgba(11,12,15,.45);
  --surface-accent-soft:var(--blue-50); --surface-hover:var(--gray-50); --surface-selected:var(--blue-50);

  --border-default:var(--gray-200); --border-strong:var(--gray-300); --border-subtle:var(--gray-100);

  --action-primary:var(--blue-600); --action-primary-hover:var(--blue-700); --action-primary-active:var(--blue-800);
  --action-secondary:var(--gray-0); --action-selected:var(--blue-50);
  --focus-ring:rgba(32,78,251,.8);

  --status-success:var(--green-500); --status-success-soft:var(--green-100); --status-success-text:var(--green-700);
  --status-warning:var(--amber-500); --status-warning-soft:var(--amber-100); --status-warning-text:var(--amber-700);
  --status-danger:var(--red-500);    --status-danger-soft:var(--red-100);   --status-danger-text:var(--red-700);
  --status-info:var(--blue-600);      --status-info-soft:var(--blue-50);    --status-info-text:var(--blue-700);

  --financial-positive:var(--green-700); --financial-negative:var(--red-600); --financial-neutral:var(--gray-500);

  --chart-bg:transparent; --chart-grid:var(--gray-200); --chart-axis:#6B7178;
  --chart-tooltip-bg:var(--gray-0); --chart-tooltip-border:var(--gray-200);
  /* categorical hues, FIXED ORDER; chart-8 = neutral "Other".
     NEM "validalt szinvakssag-biztos" keszlet, ahogy korabban all a doksikban:
     a szomszedos parok atmennek, de minden-par modban chart-1 / chart-4 /
     chart-7 osszecsuszik (mindharom kek-lila). Meres: check-chart-cvd.mjs.
     Ne allitsd at lint-szintu javitaskent, ez tervezoi dontes. */
  --chart-1:#204EFB; --chart-2:#2E9E74; --chart-3:#B8801C; --chart-4:#8C5BE6;
  --chart-5:#1489A6; --chart-6:#CE443A; --chart-7:#5E80FF; --chart-8:#565C64;

  --shadow-sm:0 1px 2px rgba(11,12,14,.06);
  --shadow-md:0 10px 30px -12px rgba(11,12,14,.16);
  --shadow-lg:0 30px 70px -28px rgba(32,78,251,.28);

  --glass-bg:rgba(255,255,255,.65); --glass-border:rgba(255,255,255,.9);
  /* elevated look */
  --shadow-card:0 1px 2px rgba(11,12,14,.04),0 8px 24px -16px rgba(20,40,120,.20);
  --shadow-card-hover:0 2px 6px rgba(11,12,14,.06),0 26px 50px -22px rgba(32,78,251,.32);
  --shadow-glow:0 0 0 1px rgba(32,78,251,.10),0 20px 44px -22px rgba(32,78,251,.4);
  --shadow-primary:0 8px 22px -8px rgba(32,78,251,.55);
  --shadow-pop:0 12px 32px -10px rgba(20,40,120,.28),0 0 0 1px rgba(20,40,120,.06);
  --edge-sheen:rgba(255,255,255,.7); /* machined top-edge highlight on cards */
  --grid-line:rgba(11,12,14,.045);
  --gradient-hero:radial-gradient(58% 62% at 78% 8%,rgba(32,78,251,.16),transparent 70%);
  --gradient-hairline:linear-gradient(90deg,var(--blue-500),var(--blue-700));
  --gradient-wash:linear-gradient(180deg,rgba(32,78,251,.045),transparent 60%);
  --skeleton-base:var(--gray-100); --skeleton-sheen:rgba(255,255,255,.75);
}

/* ---------- SEMANTIC · DARK (designed, not inverted; glass surfaces) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --text-primary:#F3F5FA; --text-secondary:var(--gray-300); --text-muted:var(--gray-400);
  --text-disabled:var(--gray-600); --text-on-accent:#FFFFFF; --text-link:var(--blue-300); --text-accent:var(--blue-300);

  --surface-page:var(--gray-950); --surface-nav:#101423; --surface-card:var(--gray-900);
  --surface-raised:var(--gray-800); --surface-sunken:#0F1116; --surface-overlay:rgba(0,0,0,.6);
  --surface-accent-soft:rgba(59,98,255,.16); --surface-hover:rgba(255,255,255,.04); --surface-selected:rgba(59,98,255,.16);

  --border-default:var(--gray-800); --border-strong:#3A3F49; --border-subtle:rgba(255,255,255,.06);

  --action-primary:var(--blue-500); --action-primary-hover:var(--blue-600); --action-primary-active:var(--blue-300);
  --action-secondary:var(--gray-800); --action-selected:rgba(59,98,255,.16);
  --focus-ring:rgba(94,128,255,.8);

  --status-success:#3FBE8C; --status-success-soft:rgba(63,190,140,.16); --status-success-text:#5BD3A3;
  --status-warning:#D6A23F; --status-warning-soft:rgba(214,162,63,.16); --status-warning-text:#E4B45C;
  --status-danger:#CE443A;  --status-danger-soft:rgba(227,105,95,.16);  --status-danger-text:#F0897F;
  --status-info:var(--blue-400); --status-info-soft:rgba(59,98,255,.16); --status-info-text:var(--blue-300);

  --financial-positive:#3FBE8C; --financial-negative:#E3695F; --financial-neutral:var(--gray-400);

  --chart-bg:transparent; --chart-grid:rgba(255,255,255,.08); --chart-axis:var(--gray-400);
  --chart-tooltip-bg:var(--gray-800); --chart-tooltip-border:var(--gray-700);
  /* categorical hues (dark), deepened for vividness + CVD/contrast; chart-8 = neutral "Other" */
  --chart-1:#5E80FF; --chart-2:#2FB183; --chart-3:#CF9A33; --chart-4:#9873F2;
  --chart-5:#2BB0D4; --chart-6:#E3695F; --chart-7:#7E9BFF; --chart-8:#9AA1AC;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 14px 40px -14px rgba(0,0,0,.6);
  --shadow-lg:0 40px 90px -30px rgba(32,78,251,.45);

  --glass-bg:rgba(255,255,255,.055); --glass-border:rgba(255,255,255,.12);
  --brand-gradient:linear-gradient(135deg,#3B62FF 0%,#2A4EE0 55%,#1A3FCB 100%);
  --grad-mesh:radial-gradient(120% 120% at 12% 12%,#4E74FF 0%,transparent 52%),radial-gradient(110% 110% at 88% 8%,#7C5BFF 0%,transparent 48%),radial-gradient(120% 120% at 72% 108%,#22B0E6 0%,transparent 48%),#14307f;
  /* elevated look */
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 12px 34px -18px rgba(0,0,0,.7);
  --shadow-card-hover:0 2px 6px rgba(0,0,0,.5),0 30px 64px -24px rgba(32,78,251,.55);
  --shadow-glow:0 0 0 1px rgba(94,128,255,.16),0 24px 60px -24px rgba(32,78,251,.55);
  --shadow-primary:0 10px 26px -8px rgba(94,128,255,.5);
  --shadow-pop:0 18px 48px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  --edge-sheen:rgba(255,255,255,.08); /* machined top-edge highlight on cards (dark) */
  --grid-line:rgba(255,255,255,.05);
  --gradient-hero:radial-gradient(58% 62% at 78% 8%,rgba(94,128,255,.22),transparent 70%);
  --gradient-hairline:linear-gradient(90deg,#5E80FF,#3B62FF);
  --gradient-wash:linear-gradient(180deg,rgba(94,128,255,.08),transparent 60%);
  --skeleton-base:rgba(255,255,255,.06); --skeleton-sheen:rgba(255,255,255,.13);
}


/* ---------- DENSITY · COMPACT (theme-independent) ---------- */
:root[data-density="compact"] { --pad-card:15px; --cell-y:7px; --cell-x:10px; }

/* ---------- CROSS-DOCUMENT PAGE TRANSITIONS (MPA View Transitions) ---------- */
/* Smooth cross-fade when navigating between demo pages in supporting browsers; */
/* silently ignored elsewhere. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-standard); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

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