/* ============================================================
   BrainFusion V2 Design Tokens -- Semantic Layer
   ============================================================
   These tokens bridge Tailwind utilities, Web Awesome ::part()
   styles, and Lit shadow DOM components.

   Convention: --v2-{category}-{name}

   Loaded as a static <link> in _LayoutV2.cshtml.
   Must load AFTER webawesome-theme.css to override WA tokens.
   ============================================================ */

/* Student entry illustration and controls. Shared semantic tokens keep page CSS color-free. */
:root {
  --v2-play-card: #fffdf9;
  --v2-play-action: #246eb2;
  --v2-play-action-hover: #1b5c99;
  --v2-play-action-text: #ffffff;
  --v2-play-accent-blue: #319ed5;
  --v2-play-accent-lime: #b0d83c;
  --v2-play-glow: #ffd65a;
  --v2-play-page-shadow: #1b3550;
  --v2-play-snow: #fffefa;
  --v2-play-scene: #f7f4ed;
  --v2-play-header: #fffdf9;
  --v2-play-card-border: #dce4eb;
  --v2-play-input-border: #728196;
  --v2-play-footer-text: #ffffff;
  --v2-play-footer-surface: #073e4c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v2-play-card: #0c233a;
    --v2-play-action: #b0e653;
    --v2-play-action-hover: #c3ed7b;
    --v2-play-action-text: #0a1f42;
    --v2-play-scene: #021d35;
    --v2-play-header: #091f35;
    --v2-play-card-border: #477da6;
    --v2-play-input-border: #7893a8;
  }
}
[data-theme="dark"] {
  --v2-play-card: #0c233a;
  --v2-play-action: #b0e653;
  --v2-play-action-hover: #c3ed7b;
  --v2-play-action-text: #0a1f42;
  --v2-play-scene: #021d35;
  --v2-play-header: #091f35;
  --v2-play-card-border: #477da6;
  --v2-play-input-border: #7893a8;
}

/* ---- Light Mode (default) ---- */
:root {
  /* Game launcher has a deliberately dark, illustrated stage in every theme. */
  --v2-selection-scene: #061429;
  --v2-selection-text: #f5f9ff;
  --v2-selection-muted: #b1cee5;
  --v2-selection-accent: #5eead4;
  --v2-selection-dot: #719abd;
  --v2-selection-arrow-border: #739fc1;
  --v2-selection-shadow: #020b18;

  /* Surfaces */
  --v2-surface-page: #fefdfb;
  --v2-surface-card: #ffffff;
  --v2-surface-raised: #ffffff;
  --v2-surface-lowered: #fdf9f3;
  --v2-surface-overlay: rgba(10, 31, 66, 0.5);

  /* Text */
  --v2-text-primary: #0a1f42;
  --v2-text-secondary: #475569;
  --v2-text-muted: #6b7a8d;
  --v2-text-inverse: #ffffff;
  --v2-text-link: #0d9488;
  --v2-text-link-hover: #0f766e;

  /* Brand */
  --v2-brand-primary: #3abba7;
  --v2-brand-primary-hover: #14b8a6;
  --v2-brand-primary-active: #0d9488;
  --v2-brand-secondary: #3399CC;
  --v2-brand-secondary-hover: #2b86b3;
  --v2-brand-secondary-active: #24739a;
  --v2-brand-secondary-light: #5cb8e0;
  --v2-brand-accent: #fbbf24;
  --v2-brand-accent-hover: #f59e0b;
  --v2-attribution: #8b5cf6;

  /* Borders */
  --v2-border-default: #e2e8f0;
  --v2-border-strong: #cbd5e1;
  --v2-border-brand: #3abba7;

  /* Typography */
  --v2-font-display: 'Outfit', system-ui, sans-serif;
  --v2-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Spacing (semantic) */
  --v2-section-gap: 5rem;
  --v2-card-padding: 1.5rem;
  --v2-container-max: 1200px;
  --v2-container-padding: 1rem;

  /* Transitions */
  --v2-transition-fast: 150ms ease;
  --v2-transition-base: 250ms ease;
  --v2-transition-slow: 350ms ease;

  /* Focus */
  --v2-focus-ring: 0 0 0 3px color-mix(in srgb, var(--v2-brand-primary) 40%, transparent);

  /* Button hover */
  --v2-brand-primary-light: #4ecdb8;
  --v2-text-on-brand-light: #0a1f42;

  /* Error / Danger */
  --v2-danger: #ef4444;
  --v2-danger-text: #dc2626;

  /* Shadows (brand-tinted) */
  --v2-shadow-brand-sm: 0 2px 8px color-mix(in srgb, var(--v2-brand-primary) 20%, transparent);
  --v2-shadow-brand-md: 0 4px 14px color-mix(in srgb, var(--v2-brand-primary) 30%, transparent);
  --v2-shadow-brand-lg: 0 6px 20px color-mix(in srgb, var(--v2-brand-primary) 40%, transparent);
  --v2-shadow-brand-step: 0 4px 12px color-mix(in srgb, var(--v2-brand-primary) 25%, transparent);

  /* Shadows (neutral) */
  --v2-shadow-neutral-card: 0 4px 24px -4px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --v2-shadow-neutral-md: 0 8px 20px -6px rgba(0, 0, 0, 0.08);
  --v2-shadow-neutral-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 6px 12px -4px rgba(0, 0, 0, 0.04);
  --v2-shadow-neutral-hover: 0 12px 24px -6px rgba(0, 0, 0, 0.1);

  /* CTA dark sections */
  --v2-cta-gradient-start: #134e4a;
  --v2-cta-gradient-end: #0a1f42;
  --v2-cta-section-text: #f8fafc;
  --v2-cta-orb: color-mix(in srgb, var(--v2-brand-primary) 10%, transparent);

  /* Atmosphere (hero decorative gradients) */
  --v2-atmosphere-brand: color-mix(in srgb, var(--v2-brand-primary) 7%, transparent);
  --v2-atmosphere-brand-subtle: color-mix(in srgb, var(--v2-brand-primary) 2%, transparent);
  --v2-atmosphere-accent: color-mix(in srgb, var(--v2-brand-accent) 5%, transparent);

  /* Misc */
  --v2-text-on-accent: #451a03;
  --v2-border-brand-muted: var(--v2-brand-primary);
  --v2-brand-primary-midtone: #7dd3c0;
  --v2-science-gradient-brand: var(--v2-brand-primary);
  --v2-science-gradient-accent: var(--v2-brand-accent);

  /* Web Awesome bridge tokens */
  --wa-color-brand-fill-loud: var(--v2-brand-primary);
  --wa-color-brand-on-loud: var(--v2-text-inverse);
  --wa-color-focus: var(--v2-brand-primary);
  --wa-color-primary: var(--v2-brand-primary);
  --wa-color-surface-raised: var(--v2-surface-raised);
  --wa-color-text-normal: var(--v2-text-primary);
  --wa-color-text-quiet: var(--v2-text-muted);
  --wa-color-surface-hover: color-mix(in srgb, var(--v2-brand-primary) 8%, var(--v2-surface-card));
}

/* ---- Dark Mode (system preference) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v2-surface-page: #0f172a;
    --v2-surface-card: #1e293b;
    --v2-surface-raised: #334155;
    --v2-surface-lowered: #020617;
    --v2-surface-overlay: rgba(0, 0, 0, 0.6);

    --v2-text-primary: #f8fafc;
    --v2-text-secondary: #cbd5e1;
    --v2-text-muted: #8494a7;
    --v2-text-inverse: #0f172a;
    --v2-text-link: #5eead4;
    --v2-text-link-hover: #99f6e4;

    --v2-brand-primary: #5eead4;
    --v2-brand-primary-hover: #99f6e4;
    --v2-brand-primary-active: #3abba7;
    --v2-brand-secondary: #60a5fa;
    --v2-brand-secondary-hover: #93c5fd;
    --v2-brand-secondary-active: #3b82f6;
    --v2-brand-secondary-light: #7db8fb;
    --v2-brand-accent: #fcd34d;
    --v2-brand-accent-hover: #fde68a;
    --v2-attribution: #a78bfa;

    --v2-border-default: #334155;
    --v2-border-strong: #475569;
    --v2-border-brand: #5eead4;

    --v2-focus-ring: 0 0 0 3px color-mix(in srgb, var(--v2-brand-primary) 40%, transparent);

    --v2-brand-primary-light: #4ecdb8;
    --v2-text-on-brand-light: #f0fdfb;

    --v2-danger: #ef4444;
    --v2-danger-text: #fca5a5;

    --v2-shadow-brand-sm: 0 2px 8px color-mix(in srgb, var(--v2-brand-primary) 10%, transparent);
    --v2-shadow-brand-md: 0 4px 14px color-mix(in srgb, var(--v2-brand-primary) 15%, transparent);
    --v2-shadow-brand-lg: 0 6px 20px color-mix(in srgb, var(--v2-brand-primary) 25%, transparent);
    --v2-shadow-brand-step: 0 4px 12px color-mix(in srgb, var(--v2-brand-primary) 15%, transparent);

    --v2-shadow-neutral-card: 0 4px 24px -4px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
    --v2-shadow-neutral-md: 0 8px 20px -6px rgba(0, 0, 0, 0.3);
    --v2-shadow-neutral-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.3), 0 6px 12px -4px rgba(0, 0, 0, 0.2);
    --v2-shadow-neutral-hover: 0 12px 24px -6px rgba(0, 0, 0, 0.35);

    --v2-cta-gradient-start: #0f172a;
    --v2-cta-gradient-end: #134e4a;
    --v2-cta-section-text: #f8fafc;
    --v2-cta-orb: color-mix(in srgb, var(--v2-brand-primary) 8%, transparent);

    --v2-atmosphere-brand: color-mix(in srgb, var(--v2-brand-primary) 4%, transparent);
    --v2-atmosphere-brand-subtle: transparent;
    --v2-atmosphere-accent: color-mix(in srgb, var(--v2-brand-accent) 2%, transparent);

    --v2-text-on-accent: #451a03;
    --v2-border-brand-muted: color-mix(in srgb, var(--v2-brand-primary) 40%, transparent);
    --v2-brand-primary-midtone: #a7f3d0;
    --v2-science-gradient-brand: color-mix(in srgb, var(--v2-brand-primary) 40%, transparent);
    --v2-science-gradient-accent: color-mix(in srgb, var(--v2-brand-accent) 30%, transparent);

    --wa-color-brand-fill-loud: var(--v2-brand-primary);
    --wa-color-brand-on-loud: var(--v2-text-inverse);
    --wa-color-focus: var(--v2-brand-primary);
    --wa-color-primary: var(--v2-brand-primary);
    --wa-color-surface-raised: var(--v2-surface-raised);
    --wa-color-text-normal: var(--v2-text-primary);
    --wa-color-text-quiet: var(--v2-text-muted);
    --wa-color-surface-hover: color-mix(in srgb, var(--v2-brand-primary) 8%, var(--v2-surface-card));
  }
}

/* ---- Dark Mode (explicit toggle) ---- */
[data-theme="dark"] {
  --v2-surface-page: #0f172a;
  --v2-surface-card: #1e293b;
  --v2-surface-raised: #334155;
  --v2-surface-lowered: #020617;
  --v2-surface-overlay: rgba(0, 0, 0, 0.6);

  --v2-text-primary: #f8fafc;
  --v2-text-secondary: #cbd5e1;
  --v2-text-muted: #64748b;
  --v2-text-inverse: #0f172a;
  --v2-text-link: #5eead4;
  --v2-text-link-hover: #99f6e4;

  --v2-brand-primary: #5eead4;
  --v2-brand-primary-hover: #99f6e4;
  --v2-brand-primary-active: #3abba7;
  --v2-brand-secondary: #60a5fa;
  --v2-brand-secondary-hover: #93c5fd;
  --v2-brand-secondary-active: #3b82f6;
  --v2-brand-secondary-light: #7db8fb;
  --v2-brand-accent: #fcd34d;
  --v2-brand-accent-hover: #fde68a;

  --v2-border-default: #334155;
  --v2-border-strong: #475569;
  --v2-border-brand: #5eead4;

  --v2-focus-ring: 0 0 0 3px color-mix(in srgb, var(--v2-brand-primary) 40%, transparent);

  --v2-brand-primary-light: #4ecdb8;
  --v2-text-on-brand-light: #f0fdfb;

  --v2-danger: #ef4444;
  --v2-danger-text: #fca5a5;

  --v2-shadow-brand-sm: 0 2px 8px color-mix(in srgb, var(--v2-brand-primary) 10%, transparent);
  --v2-shadow-brand-md: 0 4px 14px color-mix(in srgb, var(--v2-brand-primary) 15%, transparent);
  --v2-shadow-brand-lg: 0 6px 20px color-mix(in srgb, var(--v2-brand-primary) 25%, transparent);
  --v2-shadow-brand-step: 0 4px 12px color-mix(in srgb, var(--v2-brand-primary) 15%, transparent);

  --v2-shadow-neutral-card: 0 4px 24px -4px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
  --v2-shadow-neutral-md: 0 8px 20px -6px rgba(0, 0, 0, 0.3);
  --v2-shadow-neutral-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.3), 0 6px 12px -4px rgba(0, 0, 0, 0.2);
  --v2-shadow-neutral-hover: 0 12px 24px -6px rgba(0, 0, 0, 0.35);

  --v2-cta-gradient-start: #0f172a;
  --v2-cta-gradient-end: #134e4a;
  --v2-cta-section-text: #f8fafc;
  --v2-cta-orb: color-mix(in srgb, var(--v2-brand-primary) 8%, transparent);

  --v2-atmosphere-brand: color-mix(in srgb, var(--v2-brand-primary) 4%, transparent);
  --v2-atmosphere-brand-subtle: transparent;
  --v2-atmosphere-accent: color-mix(in srgb, var(--v2-brand-accent) 2%, transparent);

  --v2-text-on-accent: #451a03;
  --v2-border-brand-muted: color-mix(in srgb, var(--v2-brand-primary) 40%, transparent);
  --v2-brand-primary-midtone: #a7f3d0;
  --v2-science-gradient-brand: color-mix(in srgb, var(--v2-brand-primary) 40%, transparent);
  --v2-science-gradient-accent: color-mix(in srgb, var(--v2-brand-accent) 30%, transparent);

  --wa-color-brand-fill-loud: var(--v2-brand-primary);
  --wa-color-brand-on-loud: var(--v2-text-inverse);
  --wa-color-focus: var(--v2-brand-primary);
  --wa-color-primary: var(--v2-brand-primary);
  --wa-color-surface-raised: var(--v2-surface-raised);
  --wa-color-text-normal: var(--v2-text-primary);
  --wa-color-text-quiet: var(--v2-text-muted);
  --wa-color-surface-hover: color-mix(in srgb, var(--v2-brand-primary) 8%, var(--v2-surface-card));
}

/* Student entry seasonal palettes. All illustration control colors live here. */
body.play-page:not(.theme-default) { --v2-play-action-hover: color-mix(in srgb, var(--v2-play-action) 87%, var(--v2-play-action-text)); }
body.theme-newyear { --v2-play-scene: #08213b; --v2-play-action: #173b55; }
body.theme-valentine { --v2-play-scene: #fbe9dc; --v2-play-action: #9c2845; }
body.theme-stpatrick { --v2-play-scene: #e1e7c9; --v2-play-action: #105541; }
body.theme-easter { --v2-play-scene: #faf1db; --v2-play-action: #22344c; }
body.theme-july4th { --v2-play-scene: #09274b; --v2-play-action: #173b55; }
body.theme-backtoschool { --v2-play-scene: #faebd0; --v2-play-action: #0b3557; }
body.theme-halloween { --v2-play-scene: #111731; --v2-play-action: #142446; --v2-play-glow: #ffad54; }
body.theme-thanksgiving { --v2-play-scene: #f5dfb7; --v2-play-action: #15534f; }
body.theme-christmas { --v2-play-scene: #06353d; --v2-play-action: #09535b; }
@media (prefers-color-scheme: dark) {
    body.theme-newyear { --v2-play-action: #f5d28d; }
    body.theme-valentine { --v2-play-scene: #181c36; --v2-play-action: #ffaaa6; }
    body.theme-stpatrick { --v2-play-scene: #06272a; --v2-play-action: #c7ef74; }
    body.theme-easter { --v2-play-scene: #17223d; --v2-play-action: #f5cf77; }
    body.theme-july4th { --v2-play-action: #ff9c91; }
    body.theme-backtoschool { --v2-play-scene: #0d2338; --v2-play-action: #ffd153; }
    body.theme-halloween { --v2-play-action: #ffad54; }
    body.theme-thanksgiving { --v2-play-scene: #13222d; --v2-play-action: #f3bd73; }
    body.theme-christmas { --v2-play-action: #ffd074; }
}