/* === FirstCoreAI design tokens ===
   Our own tokens, written from scratch to follow the SnowUI visual language:
   black-opacity ink scale on white, pastel tint fills, hairline inset borders,
   generous radii, Inter. No SnowUI files are copied or linked. TODO(Q6): revisit if the kit licence is confirmed for web reuse.

   Contrast notes (WCAG 2.2 AA):
   - ink-80 and darker for body text. ink-40 measures ~2.9:1 on white, so it is
     for non-essential labels only, never small text that carries meaning.
   - The brand teal (#2DD4BF) is ~1.8:1 on white: marks, dots and fills only.
     Accent *text* uses --fc-accent-ink (#0F766E, ~5.5:1 on white). */

:root {
  color-scheme: light;

  /* Ink: every grey is black at an opacity step */
  --fc-ink-100: #000000;
  --fc-ink-80:  rgba(0, 0, 0, .80);
  --fc-ink-40:  rgba(0, 0, 0, .40);
  --fc-ink-20:  rgba(0, 0, 0, .20);
  --fc-ink-10:  rgba(0, 0, 0, .10);
  --fc-ink-4:   rgba(0, 0, 0, .04);

  /* Surfaces */
  --fc-bg-1:      #FFFFFF;
  --fc-bg-2:      #F9F9FA;
  --fc-surface-1: rgba(255, 255, 255, .80);   /* glass panels */
  --fc-surface-2: rgba(0, 0, 0, .03);         /* card fill on white */
  --fc-tint-blue:   #E6F1FD;
  --fc-tint-indigo: #EDEEFC;

  /* Brand */
  /* TODO(Q3): teal kept as the single accent; navy retired, amber for warnings only. */
  --fc-accent:      #2DD4BF;                  /* FirstCore teal: marks, dots, fills */
  --fc-accent-ink:  #0F766E;                  /* teal that passes AA as text on white */
  --fc-accent-soft: rgba(45, 212, 191, .16);
  --fc-warning:     #F4B740;                  /* amber, warnings only */
  --fc-error:       #B42318;

  /* Pastel fills for stat cards and tags, one per card, never as text colour */
  --fc-fill-purple: rgba(184, 153, 235, .28);   /* #B899EB */
  --fc-fill-indigo: rgba(173, 173, 251, .28);   /* #ADADFB */
  --fc-fill-cyan:   rgba(160, 188, 232, .30);   /* #A0BCE8 */
  --fc-fill-mint:   rgba(107, 230, 211, .26);   /* #6BE6D3 */
  --fc-fill-green:  rgba(113, 221, 140, .26);   /* #71DD8C */
  --fc-fill-orange: rgba(255, 181, 91, .28);    /* #FFB55B */

  /* Primary button: black on light, white on dark */
  --fc-primary-bg: #000000;
  --fc-primary-fg: #FFFFFF;
  --fc-primary-bg-hover: rgba(0, 0, 0, .80);

  /* Type */
  --fc-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-font-mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fc-text-12: .75rem;
  --fc-text-14: .875rem;
  --fc-text-16: 1rem;
  --fc-text-18: 1.125rem;
  --fc-text-24: 1.5rem;
  --fc-text-32: 2rem;
  --fc-text-48: 3rem;
  --fc-text-64: 4rem;

  /* Shape */
  --fc-radius-8:  8px;     /* inputs, tags */
  --fc-radius-12: 12px;    /* buttons */
  --fc-radius-16: 16px;    /* small cards, code */
  --fc-radius-24: 24px;    /* cards, panels */
  --fc-radius-32: 32px;    /* hero media */
  --fc-radius-full: 9999px;

  /* Depth: hairlines instead of borders, shadows only on floating layers */
  --fc-hairline: inset 0 0 0 .5px var(--fc-ink-10);
  --fc-shadow-float: 0 4px 16px rgba(0, 0, 0, .04);
  --fc-shadow-modal: 0 8px 28px rgba(0, 0, 0, .10);
  --fc-blur-float: blur(8px);
  --fc-blur-modal: blur(20px);
  --fc-focus-ring: 0 0 0 4px rgba(0, 0, 0, .04);

  /* Spacing steps */
  --fc-space-4: 4px;
  --fc-space-8: 8px;
  --fc-space-12: 12px;
  --fc-space-16: 16px;
  --fc-space-20: 20px;
  --fc-space-24: 24px;
  --fc-space-28: 28px;
  --fc-space-40: 40px;
  --fc-space-48: 48px;

  /* Motion */
  --fc-ease: ease-out;
  --fc-t: 150ms;

  /* Layout */
  --fc-container: 1200px;
}

/* Dark mode. Two selectors with the same values: the media query follows the OS
   unless the visitor picked light, the attribute forces dark when they picked it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fc-ink-100: #FFFFFF;
    --fc-ink-80:  rgba(255, 255, 255, .80);
    --fc-ink-40:  rgba(255, 255, 255, .40);
    --fc-ink-20:  rgba(255, 255, 255, .20);
    --fc-ink-10:  rgba(255, 255, 255, .10);
    --fc-ink-4:   rgba(255, 255, 255, .04);
    --fc-bg-1:      #1F1F1F;
    --fc-bg-2:      #282828;
    --fc-surface-1: rgba(31, 31, 31, .80);
    --fc-surface-2: rgba(255, 255, 255, .05);
    --fc-tint-blue:   rgba(45, 212, 191, .14);
    --fc-tint-indigo: rgba(45, 212, 191, .10);
    --fc-accent-ink:  #2DD4BF;
    --fc-accent-soft: rgba(45, 212, 191, .14);
    --fc-error:       #F97066;
    --fc-fill-purple: rgba(184, 153, 235, .16);
    --fc-fill-indigo: rgba(173, 173, 251, .16);
    --fc-fill-cyan:   rgba(160, 188, 232, .16);
    --fc-fill-mint:   rgba(107, 230, 211, .14);
    --fc-fill-green:  rgba(113, 221, 140, .14);
    --fc-fill-orange: rgba(255, 181, 91, .16);
    --fc-primary-bg: #FFFFFF;
    --fc-primary-fg: #000000;
    --fc-primary-bg-hover: rgba(255, 255, 255, .80);
    --fc-shadow-float: 0 4px 16px rgba(0, 0, 0, .24);
    --fc-shadow-modal: 0 8px 28px rgba(0, 0, 0, .40);
    --fc-focus-ring: 0 0 0 4px rgba(255, 255, 255, .08);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fc-ink-100: #FFFFFF;
  --fc-ink-80:  rgba(255, 255, 255, .80);
  --fc-ink-40:  rgba(255, 255, 255, .40);
  --fc-ink-20:  rgba(255, 255, 255, .20);
  --fc-ink-10:  rgba(255, 255, 255, .10);
  --fc-ink-4:   rgba(255, 255, 255, .04);
  --fc-bg-1:      #1F1F1F;
  --fc-bg-2:      #282828;
  --fc-surface-1: rgba(31, 31, 31, .80);
  --fc-surface-2: rgba(255, 255, 255, .05);
  --fc-tint-blue:   rgba(45, 212, 191, .14);
  --fc-tint-indigo: rgba(45, 212, 191, .10);
  --fc-accent-ink:  #2DD4BF;
  --fc-accent-soft: rgba(45, 212, 191, .14);
  --fc-error:       #F97066;
  --fc-fill-purple: rgba(184, 153, 235, .16);
  --fc-fill-indigo: rgba(173, 173, 251, .16);
  --fc-fill-cyan:   rgba(160, 188, 232, .16);
  --fc-fill-mint:   rgba(107, 230, 211, .14);
  --fc-fill-green:  rgba(113, 221, 140, .14);
  --fc-fill-orange: rgba(255, 181, 91, .16);
  --fc-primary-bg: #FFFFFF;
  --fc-primary-fg: #000000;
  --fc-primary-bg-hover: rgba(255, 255, 255, .80);
  --fc-shadow-float: 0 4px 16px rgba(0, 0, 0, .24);
  --fc-shadow-modal: 0 8px 28px rgba(0, 0, 0, .40);
  --fc-focus-ring: 0 0 0 4px rgba(255, 255, 255, .08);
}