/* ==========================================================================
   Binary Bliss — Design System v2.0 token layer
   Canonical direction: A. Blue + Graphite Signal System (owner decision 2026-09-18)
   Spec: docs/2026-09-18-signal-system-design-system-v2-spec.md §3
   Skill: binary-bliss-design-system

   TOKENS ONLY — this file must contain no CSS rules, only custom properties,
   so linking it can never change a rendered cascade position. Every value that
   a component needs lives here; components reference tokens, never literals.
   ========================================================================== */

:root {
  /* ---- Brand core ------------------------------------------------------ */
  --bb-blue-950: #061B3D;
  --bb-blue-900: #082A62;
  --bb-blue-800: #0A3C88;
  --bb-blue-700: #0D49A5;
  --bb-blue-600: #0F52BA; /* BB Blue 600 — the single accent */
  --bb-blue-500: #2467D1;
  --bb-blue-400: #4A82E3;
  --bb-blue-300: #82A9ED;
  --bb-blue-200: #BCD0F5;
  --bb-blue-100: #E6EEFC;
  --bb-blue-50:  #F4F7FE;

  /* ---- Graphite inks --------------------------------------------------- */
  --bb-ink-950: #090B0F;
  --bb-ink-900: #111318;
  --bb-ink-850: #181A1F;
  --bb-ink-800: #202329;
  --bb-ink-700: #2A2E35;

  /* ---- Clouds / neutrals ---------------------------------------------- */
  --bb-cloud-0:   #FFFFFF;
  --bb-cloud-50:  #F8F9FB;
  --bb-cloud-100: #F1F3F6;
  --bb-cloud-200: #E3E6EB;
  --bb-cloud-300: #D5D9E0;

  /* ---- Semantic surfaces ---------------------------------------------- */
  --bb-surface:            var(--bb-cloud-0);
  --bb-surface-raised:     var(--bb-cloud-0);
  --bb-surface-muted:      var(--bb-cloud-50);
  --bb-surface-analytical: var(--bb-blue-50);
  --bb-surface-dark:       var(--bb-ink-900);
  --bb-surface-dark-raised:var(--bb-ink-850);
  --bb-border-light:       var(--bb-cloud-200);
  --bb-border-dark:        rgba(255, 255, 255, 0.10);
  --bb-border-strong:      var(--bb-cloud-300);

  /* ---- Semantic text (contrast ratios measured against their surface) -- */
  --bb-text-primary:        var(--bb-ink-900);  /* 16.9:1 on white */
  --bb-text-secondary:      #5E6470;            /* 5.94:1 on white  (AA) */
  --bb-text-muted:          #6B7280;            /* 4.83:1 on white  (AA) */
  --bb-text-primary-dark:   #F7F8FA;            /* on dark surfaces */
  --bb-text-secondary-dark: #A8AEB8;            /* 7.95:1 on #0C1829 (AA) */
  --bb-text-muted-dark:     #7F8792;            /* non-essential only */

  /* ---- Accent + interaction states ------------------------------------ */
  --bb-accent:          var(--bb-blue-600);   /* white on this = 7.14:1 (AAA) */
  --bb-accent-hover:    #0B3F91;              /* white on this = 9.9:1 */
  --bb-accent-active:   var(--bb-blue-900);
  --bb-accent-text:     var(--bb-cloud-0);
  --bb-accent-quiet:    var(--bb-blue-100);
  --bb-accent-on-dark:  var(--bb-blue-300);   /* 8.6:1 on ink-900 */
  --bb-disabled-bg:     var(--bb-cloud-100);
  --bb-disabled-text:   #8A9099;
  --bb-disabled-border: var(--bb-cloud-300);

  /* ---- Meaning-carrying colours (never decorative) --------------------- */
  --bb-semantic-success: #1B7F4B;
  --bb-semantic-warning: #8A5A00;
  --bb-semantic-error:   #B3261E;

  /* ---- Typography ------------------------------------------------------ */
  --bb-font-display: "Sansation", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --bb-font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bb-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  --bb-fs-300: 0.875rem;   /* 14 */
  --bb-fs-400: 1rem;       /* 16 base */
  --bb-fs-500: 1.125rem;   /* 18 */
  --bb-fs-600: 1.375rem;   /* 22 */
  --bb-fs-700: 1.75rem;    /* 28 */
  --bb-fs-800: 2.25rem;    /* 36 */
  --bb-fs-900: clamp(2.5rem, 5.2vw, 4rem);
  --bb-fs-1000: clamp(2.12rem, 4.2vw, 3.25rem);

  --bb-lh-tight: 1.12;
  --bb-lh-snug: 1.28;
  --bb-lh-body: 1.68;
  --bb-ls-display: -0.02em;
  --bb-ls-label: 0.12em;

  --bb-fw-regular: 400;
  --bb-fw-medium: 500;
  --bb-fw-semibold: 600;
  --bb-fw-bold: 700;

  /* ---- Spacing (4px base, 8px rhythm) --------------------------------- */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 24px;
  --bb-space-6: 32px;
  --bb-space-7: 40px;
  --bb-space-8: 48px;
  --bb-space-9: 64px;
  --bb-space-10: 80px;
  --bb-space-11: 96px;
  --bb-space-12: 128px;
  --bb-section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* ---- Layout ---------------------------------------------------------- */
  --bb-container: 1240px;
  --bb-container-narrow: 930px;
  --bb-measure: 68ch;
  --bb-grid-desktop: 12;
  --bb-grid-tablet: 8;
  --bb-grid-mobile: 4;

  /* ---- Radii ----------------------------------------------------------- */
  --bb-radius-xs: 4px;
  --bb-radius-sm: 8px;
  --bb-radius-md: 12px;
  --bb-radius-lg: 16px;
  --bb-radius-xl: 24px;
  --bb-radius-pill: 999px;

  /* ---- Elevation (borders first, shadows reserved) --------------------- */
  --bb-shadow-none: none;
  --bb-shadow-sm: 0 1px 2px rgba(9, 11, 15, 0.06);
  --bb-shadow-md: 0 8px 24px rgba(9, 11, 15, 0.08);
  --bb-shadow-lg: 0 18px 48px rgba(9, 11, 15, 0.10);
  --bb-shadow-dark: 0 18px 48px rgba(0, 0, 0, 0.45);

  /* ---- Focus (preserved treatment: 3px solid ring, 3px offset) --------- */
  --bb-focus-ring: var(--bb-blue-600);
  --bb-focus-ring-dark: var(--bb-blue-300);
  --bb-focus-width: 3px;
  --bb-focus-offset: 3px;

  /* ---- Motion ---------------------------------------------------------- */
  --bb-motion-micro: 180ms;
  --bb-motion-ui: 280ms;
  --bb-motion-visual: 600ms;
  --bb-motion-ambient: 12s;
  --bb-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --bb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Controls -------------------------------------------------------- */
  --bb-control-height: 50px;
  --bb-control-height-sm: 44px;
  --bb-touch-min: 44px;
  --bb-touch-floor: 24px;

  /* ---- Signal System primitives --------------------------------------- */
  --bb-signal-line: 1px;
  --bb-signal-line-hair: 0.75px;
  --bb-signal-stroke: var(--bb-blue-600);
  --bb-signal-stroke-soft: var(--bb-blue-300);
  --bb-signal-node: 3.5px;
  --bb-signal-grid: rgba(15, 82, 186, 0.12);
  --bb-signal-glow: rgba(15, 82, 186, 0.22);
  --bb-signal-on-dark: var(--bb-blue-300);
  --bb-signal-track: var(--bb-cloud-200);
  --bb-illustration-max: 560px;
}

/* ---- Legacy token reconciliation (staging bridge) ----------------------
   The legacy sheets resolve their colours through a thin token block in
   style.css. Those declarations carry !important in places, so a rule-level
   override cannot win; redefining the legacy custom properties here — after
   style.css, before any v2 rule — retires the drift accent everywhere at once
   and removes the last contrast failures without a single !important.
   Measured effect: white on primary 3.85:1 -> 7.14:1; muted text on the pale
   surface 4.37:1 -> 5.24:1.                                                  */
:root {
  --brand-primary-500: var(--bb-blue-600);
  --brand-primary-600: var(--bb-blue-600);
  --brand-accent-500: var(--bb-blue-600);
  --color-primary-hover: var(--bb-accent-hover);
  --neutral-700: var(--bb-text-secondary);
  --color-text-muted: var(--bb-text-secondary);
  --focus-ring: var(--bb-blue-600);
}

/* High-contrast / forced-colors users keep system meaning. */
@media (prefers-contrast: more) {
  :root {
    --bb-text-secondary: #40454F;
    --bb-border-light: #9AA1AC;
  }
}