/* ============================================================
   ArcoNet Brand Tokens · v1.0 · July 2026
   Source of truth. Nothing ships with a value that isn't here.
   Direction: "Ink and signal" (2d) - near-monochrome ink,
   signal blue used only where it counts.
   Type: Newsreader (display) + Instrument Sans (body), Google Fonts.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  /* ---------- Neutrals (ink scale) ---------- */
  --n-950: #0B0D10;  /* dark bg (website ground) */
  --n-900: #12151A;  /* dark surface */
  --n-850: #171A1E;  /* ink: text on light */
  --n-800: #1A1E25;  /* dark raised (cards) */
  --n-700: #2A3038;  /* dark border / hairline */
  --n-600: #3D444E;
  --n-500: #5C646E;  /* muted text on light */
  --n-400: #7E8792;
  --n-300: #A7AFBA;  /* muted text on dark (AA on n-950) */
  --n-200: #CDD3DA;  /* light border */
  --n-100: #EBEDF0;  /* primary text on dark */
  --n-50:  #F6F7F9;  /* light surface */
  --n-0:   #FFFFFF;  /* light bg */

  /* ---------- Signal blue (the one accent) ---------- */
  --blue-200: #A9CBE9;
  --blue-300: #7FAEDD;  /* links on dark */
  --blue-400: #4E8FD0;  /* accent on dark: markers, highlights */
  --blue-500: #2D6AA6;  /* accent on light; button fill (white text = AA) */
  --blue-600: #235684;
  --blue-700: #1B4265;
  --blue-alpha-25: rgba(78,143,208,.25);
  --blue-alpha-15: rgba(78,143,208,.15);
  --blue-alpha-05: rgba(78,143,208,.05);

  /* ---------- Semantic ---------- */
  --success-on-dark: #55B584;  --success-on-light: #2E7D54;
  --warning-on-dark: #D9A54A;  --warning-on-light: #9A6F1F;
  --error-on-dark:   #D96962;  --error-on-light:   #A33A34;

  /* ---------- Dark surface set (primary: website, dark slides) ---------- */
  --dark-bg:          var(--n-950);
  --dark-surface:     var(--n-900);
  --dark-raised:      var(--n-800);
  --dark-border:      var(--n-700);
  --dark-text:        var(--n-100);
  --dark-text-muted:  var(--n-300);
  --dark-accent:      var(--blue-400);
  --dark-link:        var(--blue-300);

  /* ---------- Light surface set (docs, print, white slides) ---------- */
  --light-bg:         var(--n-0);
  --light-surface:    var(--n-50);
  --light-border:     var(--n-200);
  --light-text:       var(--n-850);
  --light-text-muted: var(--n-500);
  --light-accent:     var(--blue-500);

  /* ---------- Buttons (both modes) ---------- */
  --btn-bg:   var(--blue-500);  /* white text on this = 5.6:1 */
  --btn-text: var(--n-0);

  /* ---------- Typography ---------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600;

  --text-hero:    clamp(42px, 7vw, 72px);
  --text-h1:      clamp(34px, 5vw, 54px);
  --text-h2:      clamp(26px, 4vw, 38px);
  --text-h3:      22px;
  --text-lg:      18px;
  --text-body:    16px;
  --text-sm:      14px;
  --text-caption: 13px;
  --text-eyebrow: 12px;   /* uppercase, tracked */

  --track-display: -0.015em;
  --track-eyebrow: 0.18em;
  --leading-display: 1.08;
  --leading-body: 1.6;

  /* ---------- Spacing (4px grid) ---------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --section-pad: clamp(64px, 9vw, 120px);

  /* ---------- Radius ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* ---------- Shadows / focus ---------- */
  --shadow-dark-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-dark-2: 0 12px 32px rgba(0,0,0,.45);
  --shadow-light-1: 0 1px 3px rgba(11,13,16,.08);
  --shadow-light-2: 0 10px 28px rgba(11,13,16,.12);
  --ring: 0 0 0 3px rgba(78,143,208,.4);

  /* ---------- Hairlines ---------- */
  --hairline: 1px solid var(--n-700);
  --hairline-light: 1px solid var(--n-200);
}