/* BEElio V2 — shared visual tokens. Load before view/component styles. */
@layer reset, tokens, base, components, views, print, overrides;

@layer tokens {
  :root {
    color-scheme: light;
    --beelio-gold: #F6B91A;
    --beelio-honey: #F47B20;
    --beelio-blue: #2563EB;
    --beelio-green: #2E9B55;
    --beelio-ink: #24324A;
    --beelio-paper: #FFF9EE;
    --beelio-cream: #F7F0E3;
    --beelio-border: #D9E2EC;
    --beelio-crimson: #C83D45;
    --beelio-violet: #7656C9;
    --beelio-math: #2563EB;
    --beelio-vietnamese: #D6475D;
    --beelio-english: #168C68;
    --beelio-science: #6B8E23;
    --beelio-history-geo: #B56A22;
    --beelio-informatics: #6750A4;
    --beelio-text: var(--beelio-ink);
    --beelio-text-muted: #5D6B80;
    --beelio-surface: #FFFFFF;
    --beelio-surface-soft: var(--beelio-cream);
    --beelio-positive: var(--beelio-green);
    --beelio-attention: #B86100;
    --beelio-danger: var(--beelio-crimson);
    --beelio-font-body: "Be Vietnam Pro", "Nunito", system-ui, sans-serif;
    --beelio-font-rounded: "Nunito", "Be Vietnam Pro", system-ui, sans-serif;
    --beelio-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --beelio-text-xs: 0.75rem;
    --beelio-text-sm: 0.875rem;
    --beelio-text-md: 1rem;
    --beelio-text-lg: 1.25rem;
    --beelio-text-xl: 1.625rem;
    --beelio-line: 1.55;
    --beelio-space-1: 0.25rem;
    --beelio-space-2: 0.5rem;
    --beelio-space-3: 0.75rem;
    --beelio-space-4: 1rem;
    --beelio-space-5: 1.5rem;
    --beelio-space-6: 2rem;
    --beelio-radius-sm: 10px;
    --beelio-radius-md: 16px;
    --beelio-radius-lg: 24px;
    --beelio-radius-pill: 999px;
    --beelio-shadow-xs: 0 1px 2px rgb(36 50 74 / 0.08);
    --beelio-shadow-sm: 0 4px 12px rgb(36 50 74 / 0.10);
    --beelio-shadow-md: 0 10px 28px rgb(36 50 74 / 0.14);
    --beelio-shadow-lip: 0 4px 0 rgb(36 50 74 / 0.18);
    --beelio-focus-ring: 0 0 0 4px rgb(118 86 201 / 0.36);
    --beelio-focus-color: var(--beelio-violet);
    --beelio-min-hit-target: 44px;
    --beelio-control-gap: 0.625rem;
    --beelio-content-gap: 1rem;
    --beelio-motion-fast: 140ms;
    --beelio-motion-normal: 240ms;
    --beelio-motion-slow: 420ms;
    --beelio-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html[data-grade-band="early-primary"] {
    --beelio-text-sm: 0.9375rem;
    --beelio-text-md: 1.0625rem;
    --beelio-text-lg: 1.375rem;
    --beelio-text-xl: 1.875rem;
    --beelio-line: 1.62;
    --beelio-radius-sm: 14px;
    --beelio-radius-md: 20px;
    --beelio-radius-lg: 28px;
    --beelio-min-hit-target: 48px;
    --beelio-control-gap: 0.75rem;
    --beelio-content-gap: 1.5rem;
    --beelio-grade-accent: #F6B91A;
    --beelio-grade-accent-2: #55B96D;
    --beelio-grade-sky: #DDF5FF;
    --beelio-grade-land: #EAF6BF;
  }

  html[data-grade-band="upper-primary"] {
    --beelio-text-sm: 0.8125rem;
    --beelio-text-md: 0.9375rem;
    --beelio-text-lg: 1.1875rem;
    --beelio-text-xl: 1.5rem;
    --beelio-line: 1.5;
    --beelio-radius-sm: 8px;
    --beelio-radius-md: 14px;
    --beelio-radius-lg: 20px;
    --beelio-min-hit-target: 44px;
    --beelio-control-gap: 0.5rem;
    --beelio-content-gap: 0.875rem;
    --beelio-grade-accent: #2563EB;
    --beelio-grade-accent-2: #7656C9;
    --beelio-grade-sky: #E8F0FF;
    --beelio-grade-land: #E6EEE8;
  }

  [data-theme="sepia"] {
    color-scheme: light;
    --beelio-paper: #F5E9D2;
    --beelio-cream: #EDE0C7;
    --beelio-surface: #FFF8EA;
    --beelio-surface-soft: #F0E3CC;
    --beelio-border: #CDBB9B;
    --beelio-ink: #3D342B;
    --beelio-text: #3D342B;
    --beelio-text-muted: #695D4E;
    --beelio-blue: #2559A7;
    --beelio-green: #35794C;
    --beelio-violet: #684C95;
    --beelio-focus-color: #684C95;
    --beelio-focus-ring: 0 0 0 4px rgb(104 76 149 / 0.36);
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --beelio-paper: #151C28;
    --beelio-cream: #1D2736;
    --beelio-surface: #222D3E;
    --beelio-surface-soft: #1B2533;
    --beelio-border: #435068;
    --beelio-ink: #F5F7FB;
    --beelio-text: #F5F7FB;
    --beelio-text-muted: #B8C2D2;
    --beelio-gold: #FFD45A;
    --beelio-honey: #FF9A4B;
    --beelio-blue: #79A7FF;
    --beelio-green: #70CF8E;
    --beelio-crimson: #FF7C86;
    --beelio-violet: #B29BFF;
    --beelio-focus-color: #D0C3FF;
    --beelio-focus-ring: 0 0 0 4px rgb(208 195 255 / 0.42);
    --beelio-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.28);
    --beelio-shadow-sm: 0 4px 12px rgb(0 0 0 / 0.32);
    --beelio-shadow-md: 0 10px 28px rgb(0 0 0 / 0.42);
  }
}

@layer base {
  :where(html) { background: var(--beelio-paper); color: var(--beelio-text); }
  :where(body, button, input, select, textarea) { font-family: var(--beelio-font-body); }
  :where(button, [role="button"], a, input, select, textarea):focus-visible {
    outline: 2px solid var(--beelio-focus-color);
    outline-offset: 3px;
    box-shadow: var(--beelio-focus-ring);
  }
}

@layer components {
  .beelio-svg-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    color: inherit;
    line-height: 0;
    vertical-align: -0.125em;
  }
  .beelio-svg-icon > svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .beelio-svg-icon--brand { color: var(--beelio-ink); }
  .beelio-svg-icon--multicolor > svg { color: inherit; }
  .beelio-hit-target { min-width: var(--beelio-min-hit-target); min-height: var(--beelio-min-hit-target); }
}

@media (prefers-reduced-motion: reduce) {
  @layer overrides {
    :root { --beelio-motion-fast: 1ms; --beelio-motion-normal: 1ms; --beelio-motion-slow: 1ms; }
    *, *::before, *::after {
      scroll-behavior: auto !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
    }
  }
}

@media print {
  @layer print {
    :root, [data-theme="sepia"], [data-theme="dark"] {
      color-scheme: light;
      --beelio-paper: #FFFFFF;
      --beelio-cream: #FFFFFF;
      --beelio-surface: #FFFFFF;
      --beelio-surface-soft: #FFFFFF;
      --beelio-border: #555555;
      --beelio-ink: #000000;
      --beelio-text: #000000;
      --beelio-text-muted: #333333;
      --beelio-gold: #FFFFFF;
      --beelio-honey: #555555;
      --beelio-blue: #000000;
      --beelio-green: #222222;
      --beelio-crimson: #000000;
      --beelio-violet: #333333;
      --beelio-shadow-xs: none;
      --beelio-shadow-sm: none;
      --beelio-shadow-md: none;
      --beelio-shadow-lip: none;
      --beelio-focus-ring: none;
    }
    .beelio-svg-icon, .beelio-svg-icon > svg { color: #000000; filter: grayscale(1) contrast(1.25); }
  }
}