/* GENERATED FILE. DO NOT EDIT.
 * Source: docs/DESIGN-TOKENS.css
 * Regenerate: scripts/sync-tokens.sh
 * Edits made here are silently discarded on the next sync.
 */
/* Expanding Ranks design tokens.
 *
 * Five base colors, from the Coolors palette:
 *   https://coolors.co/003366-0077cc-cdedf6-ef7b45-718096
 *
 * Each base is anchored at its natural step and the rest of the ramp is
 * generated by moving lightness while holding hue, with saturation tapered
 * toward the light end so the tints do not go neon. The base hex is exact at
 * its anchor step; every other value is derived.
 */

:root {
  /* Oxford Navy. Primary. The brand color and the logo mark. 900 is the base, taken from the mark itself. */
  --color-oxford-navy-50: #f4f7fb;
  --color-oxford-navy-100: #e4edf6;
  --color-oxford-navy-200: #c8dbef;
  --color-oxford-navy-300: #a1c4e8;
  --color-oxford-navy-400: #6da8e4;
  --color-oxford-navy-500: #358ce3;
  --color-oxford-navy-600: #1473d2;
  --color-oxford-navy-700: #0a5cae;
  --color-oxford-navy-800: #034586;
  --color-oxford-navy-900: #003366;
  --color-oxford-navy-950: #021c36;

  /* Twitter Blue. Supporting. Interactive blue: links, secondary buttons, focus rings. 700 is the base. */
  --color-twitter-blue-50: #f4f8fb;
  --color-twitter-blue-100: #e4eff6;
  --color-twitter-blue-200: #c7dff0;
  --color-twitter-blue-300: #9ecbeb;
  --color-twitter-blue-400: #66b3ea;
  --color-twitter-blue-500: #299def;
  --color-twitter-blue-600: #0585e0;
  --color-twitter-blue-700: #0077cc;
  --color-twitter-blue-800: #035086;
  --color-twitter-blue-900: #043253;
  --color-twitter-blue-950: #032035;

  /* Light Cyan. Accent. Quiet informational surfaces, tags, selected rows. 200 is the base. */
  --color-light-cyan-50: #f4f9fb;
  --color-light-cyan-100: #e3f3f7;
  --color-light-cyan-200: #cdedf6;
  --color-light-cyan-300: #9cdbec;
  --color-light-cyan-400: #6ec9e2;
  --color-light-cyan-500: #41b6d7;
  --color-light-cyan-600: #299cbd;
  --color-light-cyan-700: #227c96;
  --color-light-cyan-800: #1a5d70;
  --color-light-cyan-900: #113a46;
  --color-light-cyan-950: #0b262d;

  /* Atomic Tangerine. Alert and focus. Reserved for the one thing that matters: the candidate worth calling, the connector that broke. 500 is the base. */
  --color-atomic-tangerine-50: #fbf6f4;
  --color-atomic-tangerine-100: #f5eae5;
  --color-atomic-tangerine-200: #efd4c8;
  --color-atomic-tangerine-300: #eab69e;
  --color-atomic-tangerine-400: #ec9065;
  --color-atomic-tangerine-500: #ef7b45;
  --color-atomic-tangerine-600: #d05116;
  --color-atomic-tangerine-700: #a44113;
  --color-atomic-tangerine-800: #7a3110;
  --color-atomic-tangerine-900: #4c1f0b;
  --color-atomic-tangerine-950: #311407;

  /* Slate Grey. Neutrals. Text, borders, backgrounds, disabled states. 500 is the base. */
  --color-slate-grey-50: #f7f7f8;
  --color-slate-grey-100: #ecedef;
  --color-slate-grey-200: #d8dbdf;
  --color-slate-grey-300: #bec3cb;
  --color-slate-grey-400: #9da6b3;
  --color-slate-grey-500: #718096;
  --color-slate-grey-600: #627084;
  --color-slate-grey-700: #4f5969;
  --color-slate-grey-800: #3b434e;
  --color-slate-grey-900: #262a31;
  --color-slate-grey-950: #181b20;

  /* Semantic aliases. Use these in components, not the raw ramps.
   *
   * Every ratio below is computed by scripts/contrast.py against the two light
   * surfaces this system ships, white and sunken. The script reads these hexes
   * out of this file rather than holding its own copy, so editing a value here
   * changes the report. Run it before changing any of them.
   *
   * Three of these aliases were re-anchored on September 24, 2026, on first
   * measurement. Same five ramps, same roles, different steps. The families are
   * unchanged and no new color was introduced. What changed and why:
   *
   *   --color-interactive        was 700 #0077cc, 4.35:1 on sunken. Failed AA
   *                              for normal text on a surface it is used on.
   *   --color-interactive-hover  was 600 #0585e0, 3.86:1 on white. A hover state
   *                              that fails AA is a link that becomes unreadable
   *                              on contact. Hover now goes darker, not lighter.
   *   --color-focus-ring         was 500 #299def, 2.93:1 on white. WCAG 2.2
   *                              1.4.11 and 2.4.11 both require 3:1 for a focus
   *                              indicator, so the ring was not a ring.
   *
   * --color-border-control is new and is not a duplicate of --color-border.
   * See the note on the pair below; using the decorative one on an input is the
   * most common single way an otherwise accessible design fails.
   */
  --color-brand:            var(--color-oxford-navy-900);   /* 12.61:1 on white, 11.78:1 on sunken */
  --color-brand-hover:      var(--color-oxford-navy-800);   /*  9.55:1 on white,  8.92:1 on sunken */
  --color-interactive:      var(--color-twitter-blue-800);  /*  8.41:1 on white,  7.86:1 on sunken */
  --color-interactive-hover:var(--color-twitter-blue-900);  /* 13.24:1 on white, 12.36:1 on sunken */
  --color-focus-ring:       var(--color-twitter-blue-700);  /*  4.66:1 on white,  4.35:1 on sunken. Needs 3:1 */
  --color-signal:           var(--color-atomic-tangerine-500); /* A FILL, never an ink. 2.77:1 on white.
                                                                  Dark type on it reads 6.21:1. See DESIGN-SYSTEM.md 4.3 */
  --color-signal-surface:   var(--color-atomic-tangerine-100);
  --color-info-surface:     var(--color-light-cyan-200);

  --color-text:             var(--color-slate-grey-900);    /* 14.40:1 on white, 13.45:1 on sunken */
  --color-text-muted:       var(--color-slate-grey-600);    /*  5.04:1 on white,  4.70:1 on sunken.
                                                                Not permitted on a tinted surface: 4.26:1
                                                                on signal-surface. Rebound there, see 4.4 */
  --color-text-disabled:    var(--color-slate-grey-400);    /*  2.46:1 on white. WCAG 1.4.3 exempts disabled
                                                                controls from contrast. Never used for
                                                                anything that is not disabled */
  --color-border:           var(--color-slate-grey-200);    /*  1.39:1. DECORATIVE ONLY. Card edges, table
                                                                dividers, section rules. Removing one of these
                                                                stops nobody operating anything */
  --color-border-control:   var(--color-slate-grey-500);    /*  4.02:1 on white, 3.75:1 on sunken. FUNCTIONAL.
                                                                The visible boundary of an input, select,
                                                                textarea or checkbox. WCAG 1.4.11 needs 3:1.
                                                                Never put --color-border on a form control */
  --color-surface:          #ffffff;
  --color-surface-sunken:   var(--color-slate-grey-50);

  /* Type. Three families, not interchangeable. Self-host the variable woff2;
   * do not link a font CDN. The fallbacks name real faces that exist on macOS
   * and Windows so a failed font load degrades to something close rather than
   * to Times. */
  --font-display: Archivo, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-ui:      "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Logotype only. Archivo's width axis carries the concept: the word widens. */
  --logotype-expanding-weight: 300;
  --logotype-expanding-width:  95;
  --logotype-expanding-track:  0.18em;
  --logotype-ranks-weight:     700;
  --logotype-ranks-width:      110;
  --logotype-ranks-track:      0.02em;
}

/* Numbers in any table or metric must not jitter when a value changes width. */
table, .metric, .tabular { font-variant-numeric: tabular-nums; }