/*
 * Guesslandia design tokenek. GENERÁLT FÁJL, kézzel ne szerkeszd!
 * Forrás: design/system/tokens.json · Előállítás: python scripts/build_tokens.py
 */

:root {
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --tap-min: 44px;
  --control-h: 54px;
  --header-h: 64px;
  --game-max: 480px;
  --text-countdown-font: 800 160px/1 var(--font-display);
  --text-countdown-tracking: -0.06em;
  --text-display-font: 800 36px/40px var(--font-display);
  --text-display-tracking: -0.04em;
  --text-title-font: 800 24px/30px var(--font-display);
  --text-title-tracking: -0.03em;
  --text-heading-font: 700 18px/24px var(--font-display);
  --text-heading-tracking: -0.01em;
  --text-button-font: 800 17px/20px var(--font-display);
  --text-button-tracking: normal;
  --text-overline-font: 700 12px/16px var(--font-display);
  --text-overline-tracking: 0.14em;
  --text-body-font: 400 16px/24px var(--font-body);
  --text-body-tracking: normal;
  --text-body-strong-font: 700 16px/24px var(--font-body);
  --text-body-strong-tracking: normal;
  --text-small-font: 400 14px/20px var(--font-body);
  --text-small-tracking: normal;
  --text-caption-font: 600 12px/16px var(--font-body);
  --text-caption-tracking: normal;
  --text-num-lg-font: 600 28px/32px var(--font-mono);
  --text-num-lg-tracking: normal;
  --text-num-font: 600 15px/20px var(--font-mono);
  --text-num-tracking: normal;
}

/* Világos téma (alapértelmezett) */
:root,
[data-theme="light"] {
  color-scheme: light;
  --surface: #F7FAFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EAF1FF;
  --surface-inverse: #0F1B3D;
  --on-inverse: #FFFFFF;
  --ink: #0F1B3D;
  --ink-muted: #4A5878;
  --ink-disabled: #8A96B0;
  --line: #DCE5F5;
  --line-control: #77849F;
  --shape: #0F1B3D;
  --shape-neighbor: #C9D6F2;
  --shape-other: #E3EAF7;
  --coral: #F0563F;
  --on-coral: #0F1B3D;
  --coral-soft: #FDE3DE;
  --sky: #2F6BE0;
  --on-sky: #FFFFFF;
  --focus-ring: #2F6BE0;
  --correct: #16703E;
  --on-correct: #FFFFFF;
  --correct-soft: #DDF3E6;
  --partial: #F2B134;
  --on-partial: #0F1B3D;
  --partial-ink: #7A5200;
  --partial-soft: #FDF0D2;
  --wrong: #B4233C;
  --on-wrong: #FFFFFF;
  --wrong-soft: #FBE1E5;
  --anchor: #EEF2F8;
  --anchor-line: #77849F;
  --scrim: #0F1B3DCC;
  --shadow-card: 0 1px 2px #0F1B3D0F, 0 6px 20px #0F1B3D0F;
  --shadow-lift: 0 10px 28px #0F1B3D29;
}

/* Sötét téma a rendszer beállítása szerint, amíg a játékos nem választ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0B1430;
    --surface-raised: #15224A;
    --surface-sunken: #101B3C;
    --surface-inverse: #EAF1FF;
    --on-inverse: #0F1B3D;
    --ink: #EAF1FF;
    --ink-muted: #A9B6D3;
    --ink-disabled: #6E7DA3;
    --line: #26355F;
    --line-control: #7C8DB8;
    --shape: #EAF1FF;
    --shape-neighbor: #2D3D6B;
    --shape-other: #17244B;
    --coral: #FF6B52;
    --on-coral: #0F1B3D;
    --coral-soft: #4A2320;
    --sky: #7FA6FF;
    --on-sky: #0F1B3D;
    --focus-ring: #8FB2FF;
    --correct: #46C47E;
    --on-correct: #0F1B3D;
    --correct-soft: #123A24;
    --partial: #F5BE4F;
    --on-partial: #0F1B3D;
    --partial-ink: #F5BE4F;
    --partial-soft: #3A2C0C;
    --wrong: #FF8395;
    --on-wrong: #0F1B3D;
    --wrong-soft: #401723;
    --anchor: #18244A;
    --anchor-line: #7C8DB8;
    --scrim: #050A1ACC;
    --shadow-card: 0 1px 2px #00000040;
    --shadow-lift: 0 10px 28px #00000080;
  }
}

/* Sötét téma a témakapcsolóval választva */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0B1430;
  --surface-raised: #15224A;
  --surface-sunken: #101B3C;
  --surface-inverse: #EAF1FF;
  --on-inverse: #0F1B3D;
  --ink: #EAF1FF;
  --ink-muted: #A9B6D3;
  --ink-disabled: #6E7DA3;
  --line: #26355F;
  --line-control: #7C8DB8;
  --shape: #EAF1FF;
  --shape-neighbor: #2D3D6B;
  --shape-other: #17244B;
  --coral: #FF6B52;
  --on-coral: #0F1B3D;
  --coral-soft: #4A2320;
  --sky: #7FA6FF;
  --on-sky: #0F1B3D;
  --focus-ring: #8FB2FF;
  --correct: #46C47E;
  --on-correct: #0F1B3D;
  --correct-soft: #123A24;
  --partial: #F5BE4F;
  --on-partial: #0F1B3D;
  --partial-ink: #F5BE4F;
  --partial-soft: #3A2C0C;
  --wrong: #FF8395;
  --on-wrong: #0F1B3D;
  --wrong-soft: #401723;
  --anchor: #18244A;
  --anchor-line: #7C8DB8;
  --scrim: #050A1ACC;
  --shadow-card: 0 1px 2px #00000040;
  --shadow-lift: 0 10px 28px #00000080;
}

/* Szövegstílusok */
.gl-text-countdown { font: var(--text-countdown-font); letter-spacing: var(--text-countdown-tracking); }
.gl-text-display { font: var(--text-display-font); letter-spacing: var(--text-display-tracking); }
.gl-text-title { font: var(--text-title-font); letter-spacing: var(--text-title-tracking); }
.gl-text-heading { font: var(--text-heading-font); letter-spacing: var(--text-heading-tracking); }
.gl-text-button { font: var(--text-button-font); letter-spacing: var(--text-button-tracking); }
.gl-text-overline { font: var(--text-overline-font); letter-spacing: var(--text-overline-tracking); }
.gl-text-body { font: var(--text-body-font); letter-spacing: var(--text-body-tracking); }
.gl-text-body-strong { font: var(--text-body-strong-font); letter-spacing: var(--text-body-strong-tracking); }
.gl-text-small { font: var(--text-small-font); letter-spacing: var(--text-small-tracking); }
.gl-text-caption { font: var(--text-caption-font); letter-spacing: var(--text-caption-tracking); }
.gl-text-num-lg { font: var(--text-num-lg-font); letter-spacing: var(--text-num-lg-tracking); }
.gl-text-num { font: var(--text-num-font); letter-spacing: var(--text-num-tracking); }