/*
 * brains-a11y — BRAINS brand tokens
 * ---------------------------------------------------------------------------
 * Palette and type for BRAINS surfaces. Import AFTER tokens/base.css.
 *
 *   @import 'brains-a11y/tokens/base.css';
 *   @import 'brains-a11y/tokens/brains.css';
 *
 * BRAINS sets Atkinson Hyperlegible as the DEFAULT body face — a deliberate
 * accessibility stance carried over from the audit platform, where the most
 * legible face should not be something a user has to go and find. The
 * reading-font axis therefore changes nothing on BRAINS surfaces except to
 * switch headings to Atkinson as well.
 *
 * ⚠ Gold on light grounds is #7A5500 — see the note in tokens/shard.css.
  *
 * Wrapped in the `brains-a11y-brand` cascade layer. Layered styles lose to
 * unlayered ones regardless of specificity, which is how the axis rules in
 * base.css override brand tokens (contrast lifts --ink-muted, reading-font
 * swaps --font-body) without a specificity fight they would otherwise lose
 * on source order.
 */

@layer brains-a11y-brand {
  :root,
  :root[data-theme='midnight'] {
    --bg: #0A0A0A;
    --surface: #131313;
    --surface-2: #181818;
    --ink: #F5F5F5;
    --ink-muted: #9B9B9B;
    --ink-muted-high: #E0E0E0;
    --line: rgba(255, 255, 255, 0.08);
    --control-border: #6A6A6A;   /* >=3:1 both grounds — SC 1.4.11 */
  --line-high: rgba(255, 255, 255, 0.36);
    --overlay-bg: #181818;

  
  /* Soft contrast — lower luminance, no pure white or pure black. */
  --bg-soft: #17171A;
  --surface-soft: #202024;
  --ink-muted-soft: #8A8A8A;
  --ink-soft: #D6D6D6;

    --accent: #FCC14D;         /* 12.14:1 on bg */
    --accent-ink: #0A0A0A;
    --focus-ring: rgba(252, 193, 77, 0.75);

    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  }

  :root[data-theme='bone'] {
    --bg: #FFFFFF;
    --surface: #F5F5F5;
    --surface-2: #EBEBEB;
    --ink: #1A1A1A;
    --ink-muted: #5A5A5A;
    --ink-muted-high: #1A1A1A;
    --line: rgba(0, 0, 0, 0.10);
    --control-border: #818181;   /* >=3:1 both grounds — SC 1.4.11 */
    --line-high: rgba(0, 0, 0, 0.45);
    --overlay-bg: #FFFFFF;

  
    --bg-soft: #F2F2F0;
    --surface-soft: #E9E9E6;
    --ink-muted-soft: #6A6A6A;
    --ink-soft: #26262A;

    --accent: #7A5500;         /* 6.72:1 on bg */
    --accent-ink: #FFFFFF;
    --focus-ring: rgba(122, 85, 0, 0.75);
  }

  :root[data-accent='teal']            { --accent: #5EEAD4; --accent-ink: #0A0A0A; --focus-ring: rgba(94, 234, 212, 0.75); }
  :root[data-accent='blue']            { --accent: #93C5FD; --accent-ink: #0A0A0A; --focus-ring: rgba(147, 197, 253, 0.75); }
  :root[data-theme='bone'][data-accent='gold'] { --accent: #7A5500; --accent-ink: #FFFFFF; --focus-ring: rgba(122, 85, 0, 0.75); }
  :root[data-theme='bone'][data-accent='teal'] { --accent: #0F766E; --accent-ink: #FFFFFF; --focus-ring: rgba(15, 118, 110, 0.75); }
  :root[data-theme='bone'][data-accent='blue'] { --accent: #1D4ED8; --accent-ink: #FFFFFF; --focus-ring: rgba(29, 78, 216, 0.75); }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
  }
  h1, h2, h3, h4 { font-family: var(--font-display); }
  code, kbd, samp, pre, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
}