/* Ignite design tokens — the single source of truth for color + type.
   These are the OFFICIAL Ignite tokens. Reference them via var(--bc-*)
   in component CSS; never hardcode a hex. Hover/lifted shades are derived
   from these with color-mix() in base.css, not added as new colors. */

:root {
  /* ── Official Ignite palette ─────────────────────────────────── */
  --bc-primary:        #FF6600;  /* CTAs, accents, highlights */
  --bc-primary-hover:  #FF6C0E;  /* hover state on primary buttons */
  --bc-primary-light:  #FFF3E6;  /* warm bg tint: chips, hover bg */
  --bc-dark:           #415364;  /* dark surfaces, headings */
  --bc-text:           #333333;  /* body text on light */
  --bc-gray:           #999999;  /* muted text / secondary labels */
  --bc-light-gray:     #cccccc;  /* borders, dividers */
  --bc-light:          #F5F8F8;  /* light page bg / subtle surfaces */

  /* Utility neutral (not a brand color, but the UI needs pure white). */
  --bc-white:          #FFFFFF;

  /* ── Semantic surface + ink (themeable) ───────────────────────────────
     Components paint card/panel/input backgrounds with --surface and
     heading/high-contrast text with --ink. In light mode these ARE the
     Ignite neutrals; dark mode (below) is the only place they diverge.
     --bc-white stays pure white for foregrounds on colored fills (button
     text, avatars); --bc-dark stays the slate used for accent fills. */
  --surface:           var(--bc-white);
  --ink:               var(--bc-dark);

  /* ── Typography ───────────────────────────────────────────────────── */
  /* Titillium Web is the official BC face; loaded in base.html. The system
     stack is the fallback while the web font loads (or if it can't). */
  --font-body: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── Shape / depth (baseline scale — extend as the UI grows) ──────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;  /* panels/cards/modals */
  --shadow-card: 0 1px 3px rgba(65, 83, 100, .10), 0 1px 2px rgba(65, 83, 100, .06);
  --shadow-lift: 0 8px 24px rgba(65, 83, 100, .15);
  /* Liquid glass (all cards): translucent top-to-bottom fill, rim, top sheen. */
  --glass:       linear-gradient(180deg, color-mix(in srgb, var(--surface) 26%, transparent), color-mix(in srgb, var(--surface) 9%, transparent));
  --glass-edge:  rgba(255, 255, 255, .7);
  --glass-hi:    rgba(255, 255, 255, .4);
  --glass-sheen: rgba(255, 255, 255, .55);
  /* Composed glass-card recipe — the single source of truth every card uses. */
  --glass-card-bg:     radial-gradient(130% 90% at 14% -12%, var(--glass-hi), transparent 46%), var(--glass);
  --glass-card-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-sheen), inset 0 -1px 0 rgba(0, 0, 0, .12);
  --glass-blur:        blur(28px) saturate(185%);

  /* ── Layout ───────────────────────────────────────────────────────── */
  --container-max: 1120px;

  /* ── Semantic status (functional indicators — NOT the brand accent) ── */
  --info:        #2563eb;  --info-bg:    #e6effd;
  --success:     #16a34a;  --success-bg: #e2f5e9;
  --warning:     #d97706;  --warning-bg: #fdecd0;
  --danger:      #dc2626;  --danger-bg:  #fbe2e0;

  color-scheme: light;
}

/* ── Dark theme ────────────────────────────────────────────────────────────
   Set on <html data-theme="dark"> by the no-flash bootstrap in app_base.html
   (driven by the Appearance setting / OS preference). Only the neutral ramp +
   semantic surface/ink flip; the orange accent and the slate used for avatar/
   map fills stay put, so foregrounds keep their contrast without any component
   rule changing. A slate-blue dark, not pure black — it sits in the --bc-dark
   family so the brand still feels present. */
[data-theme="dark"] {
  --surface:           #171f29;  /* cards, panels, inputs */
  --ink:               #eaf0f5;  /* headings + high-contrast text */

  --bc-light:          #0e141b;  /* page background + subtle surfaces */
  --bc-text:           #b9c4ce;  /* body text */
  --bc-gray:           #7f8c99;  /* muted / secondary text */
  --bc-light-gray:     #2b3742;  /* borders, dividers */
  --bc-primary-light:  color-mix(in srgb, var(--bc-primary) 22%, #171f29);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, .55);
  --glass:       linear-gradient(180deg, color-mix(in srgb, var(--surface) 22%, transparent), color-mix(in srgb, var(--surface) 7%, transparent));
  --glass-edge:  rgba(255, 255, 255, .14);
  --glass-hi:    rgba(255, 255, 255, .1);
  --glass-sheen: rgba(255, 255, 255, .1);

  --info-bg:    color-mix(in srgb, var(--info) 24%, #171f29);
  --success-bg: color-mix(in srgb, var(--success) 24%, #171f29);
  --warning-bg: color-mix(in srgb, var(--warning) 24%, #171f29);
  --danger-bg:  color-mix(in srgb, var(--danger) 24%, #171f29);

  color-scheme: dark;
}