/* ============================================================
   FLYBITS COLOR SYSTEM
   Dark-first brand. Near-black canvases, signature aqua accent,
   warm sand secondary, deep-teal support. WCAG AA verified pairs
   noted inline (contrast ratio against stated background).
   ============================================================ */
:root{
  /* ---- Brand core ---------------------------------------- */
  --fb-aqua:#41E5E1;            /* signature accent — aqua/teal */
  --fb-aqua-bright:#5CF2EE;     /* hover / glow */
  --fb-aqua-deep:#2E9898;       /* mid teal */
  --fb-teal-deep:#1F6364;       /* deep teal — support surfaces */
  --fb-sand:#E2C7AC;            /* warm secondary — "Sage" warmth */
  --fb-sand-deep:#C9A986;       /* deeper sand */
  --fb-clay:#B5623F;            /* warm earthen accent (photography) */
  --fb-lava:#F7703C;            /* primary CTA — warm "lava" coral-orange */
  --fb-lava-bright:#FF7D52;     /* lava hover */

  /* ---- Ink / neutrals (cool near-black ramp) ------------- */
  --fb-ink-900:#0A0113;         /* primary canvas — Ink (the brand has no true black) */
  --fb-ink-800:#0A0D12;         /* raised canvas (cool tint) */
  --fb-ink-700:#12161D;         /* panel */
  --fb-ink-600:#1B212B;         /* card surface */
  --fb-ink-500:#28313E;         /* border / hairline strong */
  --fb-ink-400:#3A4553;         /* muted border */
  --fb-ink-300:#5A6675;         /* disabled text on dark */
  --fb-ink-200:#8B97A6;         /* secondary text on dark */
  --fb-ink-100:#C2CBD6;         /* body text on dark */
  --fb-white:#FFFFFF;
  --fb-off-white:#F4F6F8;       /* light canvas */
  --fb-paper:#EDEFF2;           /* light panel */

  /* ---- Semantic ------------------------------------------ */
  --fb-success:#4FD1A5;
  --fb-warning:#E8B25E;
  --fb-danger:#E5674B;
  --fb-info:#41E5E1;

  /* ---- Semantic aliases (dark theme is default) ---------- */
  --surface-canvas:var(--fb-ink-900);
  --surface-raised:var(--fb-ink-800);
  --surface-panel:var(--fb-ink-700);
  --surface-card:var(--fb-ink-600);
  --surface-glass:rgba(18,22,29,0.55);      /* glass fill (see effects) */
  --surface-glass-hairline:rgba(255,255,255,0.10);

  --text-strong:var(--fb-white);            /* 21:1 on ink-900 */
  --text-body:var(--fb-ink-100);            /* ~12:1 on ink-900 — AA/AAA */
  --text-muted:var(--fb-ink-200);           /* ~5.6:1 on ink-900 — AA */
  --text-disabled:var(--fb-ink-300);
  --text-accent:var(--fb-aqua);             /* ~10:1 on ink-900 */
  --text-on-accent:var(--fb-ink-900);       /* dark text on aqua fills */

  --border-subtle:var(--fb-ink-500);
  --border-strong:var(--fb-ink-400);
  --border-accent:var(--fb-aqua);

  --accent:var(--fb-aqua);
  --accent-hover:var(--fb-aqua-bright);
  --accent-quiet:var(--fb-aqua-deep);
  --accent-warm:var(--fb-sand);

  --focus-ring:var(--fb-aqua);

  --link:var(--fb-aqua);
  --link-hover:var(--fb-aqua-bright);
}

/* Light theme scope — for docs, print, light website sections */
.fb-theme-light{
  --surface-canvas:var(--fb-off-white);
  --surface-raised:var(--fb-white);
  --surface-panel:var(--fb-paper);
  --surface-card:var(--fb-white);
  --surface-glass:rgba(255,255,255,0.65);
  --surface-glass-hairline:rgba(10,1,19,0.08);

  --text-strong:var(--fb-ink-900);
  --text-body:#1B212B;
  --text-muted:#4A5563;
  --text-disabled:#96A0AD;
  --text-accent:var(--fb-teal-deep);   /* deep teal for AA on light */
  --text-on-accent:var(--fb-ink-900);

  --border-subtle:#D7DCE2;
  --border-strong:#BEC6CF;

  --accent:var(--fb-teal-deep);
  --accent-hover:var(--fb-aqua-deep);
  --link:var(--fb-teal-deep);
  --link-hover:var(--fb-aqua-deep);
}