/* Brimbob design tokens (spec §12). Light on bare :root, dark via system preference
   (unless the player forced light) and via the manual override data-theme="dark". */

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../assets/fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../assets/fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-014F, U+0152-016F, U+0172-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fredoka has no double-acute letters (Hungarian ő ű Ő Ű). The stack falls back to 'Nunito' (spec §12),
   self-hosted here for just those code points (OFL, Google Fonts latin-ext, Black 900 to match Fredoka Bold's weight),
   so the letters stay rounded and bold instead of dropping to a system font. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../assets/fonts/nunito-hu.woff2) format('woff2');
  unicode-range: U+0150-0151, U+0170-0171;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* spec table */
  --bg: #FFF7EA;
  --surface: #FFFFFF;
  --ink: #13223A;
  --muted: #5B6B80;
  --line: #E3D9C6;
  --glass: #E8F1F8;
  --brand: #FFC531;
  --beak: #FF8A00;
  --danger: #E5484D;
  --gold: #F5B700;
  --focus: #2F6BFF;

  /* derived (text-safe variants keep WCAG AA on --bg / --surface) */
  --on-brand: #13223A;
  --brand-deep: #F0A500;
  --surface-2: #FBF4E7;
  --surface-3: #F4EADA;
  --danger-text: #B4232A;
  --danger-fill: #B4232A;   /* destructive button fill: white text 6.5:1 in both themes */
  --gold-text: #7A5600;
  --ok-text: #0F7A55;
  --field-line: #7D8999;    /* form field and switch edges: >= 3:1 on surface and bg */
  --switch-on: #0E8277;     /* 4.6:1 on white */
  --dlg-edge: var(--line);
  --glass-stroke: #13223A;
  --glass-shine: rgba(255, 255, 255, .75);
  --grad-ink: rgba(19, 34, 58, .55);
  --veil: rgba(19, 34, 58, .38);
  --shadow-1: 0 1px 0 rgba(19, 34, 58, .05), 0 2px 6px -2px rgba(19, 34, 58, .12);
  --shadow-2: 0 1px 0 rgba(19, 34, 58, .04), 0 14px 32px -16px rgba(19, 34, 58, .35);
  --shadow-3: 0 -10px 40px -12px rgba(19, 34, 58, .35);
  --bubble: rgba(45, 156, 219, .07);

  /* liquid colours: fills only, never text */
  --liq-violet: #7A5AF8;
  --liq-teal: #12B5A6;
  --liq-sky: #2D9CDB;
  --liq-coral: #FF7A59;
  --liq-mint: #34C3A0;
  --liq-indigo: #4B4FD6;
  --liq-green: #3DBE5B;

  /* type */
  --font-display: 'Fredoka', 'Nunito', 'Montserrat', system-ui, sans-serif;
  --font-ui: 'Inter', 'Nunito', 'Montserrat', system-ui, sans-serif;

  /* shape + motion */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.3, .64, 1);
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D1626;
    --surface: #16233A;
    --ink: #F3EFE6;
    --muted: #9AA7BA;
    --line: #26354F;
    --glass: #1F2E47;
    --brand: #FFC531;
    --beak: #FF8A00;
    --danger: #FF6B6F;
    --gold: #FFD154;
    --focus: #8FB0FF;

    --brand-deep: #F0A500;
    --surface-2: #1A2943;
    --surface-3: #21324F;
    --danger-text: #FF8A8D;
    --danger-fill: #B4232A;
    --gold-text: #FFD154;
    --ok-text: #5BE0A8;
    --field-line: #5F7090;
    --switch-on: #12B5A6;
    --dlg-edge: rgba(243, 239, 230, .2);
    --glass-stroke: #C9D3E3;
    --glass-shine: rgba(255, 255, 255, .22);
    --grad-ink: rgba(243, 239, 230, .55);
    --veil: rgba(3, 8, 18, .74);
    --shadow-1: 0 1px 0 rgba(0, 0, 0, .25), 0 2px 6px -2px rgba(0, 0, 0, .4);
    --shadow-2: 0 1px 0 rgba(0, 0, 0, .2), 0 14px 32px -16px rgba(0, 0, 0, .7);
    --shadow-3: 0 -10px 40px -12px rgba(0, 0, 0, .7);
    --bubble: rgba(143, 176, 255, .05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D1626;
  --surface: #16233A;
  --ink: #F3EFE6;
  --muted: #9AA7BA;
  --line: #26354F;
  --glass: #1F2E47;
  --brand: #FFC531;
  --beak: #FF8A00;
  --danger: #FF6B6F;
  --gold: #FFD154;
  --focus: #8FB0FF;

  --brand-deep: #F0A500;
  --surface-2: #1A2943;
  --surface-3: #21324F;
  --danger-text: #FF8A8D;
  --danger-fill: #B4232A;
  --gold-text: #FFD154;
  --ok-text: #5BE0A8;
  --field-line: #5F7090;
  --switch-on: #12B5A6;
  --dlg-edge: rgba(243, 239, 230, .2);
  --glass-stroke: #C9D3E3;
  --glass-shine: rgba(255, 255, 255, .22);
  --grad-ink: rgba(243, 239, 230, .55);
  --veil: rgba(3, 8, 18, .74);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .25), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, .2), 0 14px 32px -16px rgba(0, 0, 0, .7);
  --shadow-3: 0 -10px 40px -12px rgba(0, 0, 0, .7);
  --bubble: rgba(143, 176, 255, .05);
}