/* ============================================================
   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.
   ============================================================ */

/* ---- Light Mode (default) ---- */
:root {
  /* 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;

  /* 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-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));
}