/* Abeam design system tokens — transcribed from abeam-design-system/tokens/*.css
   Source of truth: ~/Desktop/Abeam Master/Abeam Brand Guide/abeam-design-system
   Dark-only. Ink carries every surface; Sky is the single accent. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');


:root{
  /* Ink ramp */
  --ink-100:#E4EAF3; --ink-200:#B5C2D6; --ink-300:#93A4BE; --ink-400:#6C82A4;
  --ink-500:#4E6A97; --ink-600:#35507C; --ink-700:#263D63; --ink-800:#1C2E4F; --ink-900:#101B2F;
  /* Sky ramp — the one accent */
  --sky-100:#EEF5FC; --sky-200:#CFE3F7; --sky-300:#A8CDF0; --sky-400:#7FB4E8;
  --sky-500:#569CE0; --sky-600:#3C7BBE; --sky-700:#2B5C90; --sky-800:#1D3D62; --sky-900:#14283F;
  /* Named brand values */
  --navy:#172642; --navy-lift:#1C2E4F; --paper:#E8EDF5;

  --surface-ground:var(--navy);
  --surface-card:var(--navy-lift);
  --surface-recessed:var(--ink-900);
  --surface-signal:var(--sky-800);

  --text-primary:var(--paper);
  --text-secondary:var(--ink-200);
  --text-muted:var(--ink-300);
  --text-faint:var(--ink-400);
  --text-accent:var(--sky-400);
  --text-on-sky:#0F1D33;

  --accent:var(--sky-500);
  --accent-hover:rgba(86,156,224,.12);
  --accent-press:rgba(86,156,224,.22);
  --neutral-hover:rgba(232,237,245,.07);
  --neutral-press:rgba(232,237,245,.14);

  --border-hairline:rgba(232,237,245,.16);
  --border-faint:rgba(232,237,245,.08);
  --border-rule:rgba(232,237,245,.14);
  --focus-ring:var(--sky-500);
  --selection:rgba(86,156,224,.3);

  /* Type */
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --type-display-size:64px; --type-display-lh:1.02; --type-display-track:-.03em;
  --type-h1-size:40px;  --type-h1-lh:1.08;  --type-h1-track:-.02em;
  --type-h2-size:26px;  --type-h2-lh:1.15;  --type-h2-track:-.015em;
  --type-h3-size:18px;  --type-h3-lh:1.3;   --type-h3-track:0;
  --type-body-size:15px;    --type-body-lh:1.65;
  --type-body-sm-size:13px; --type-body-sm-lh:1.6;
  --type-caption-size:11px; --type-caption-track:.12em;
  --type-instrument-size:15px; --type-instrument-track:.02em;
  --type-wordmark-track:.16em;

  /* Spacing — 4px base at 0.7x density */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --space-section:88px;

  /* Radii — 4 tags / 8 default / 16 panels / full for rings only */
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-full:999px;

  /* Elevation — hairline edge plus ambient darkness. Never stack, never glow. */
  --elev-1:0 0 0 1px rgba(232,237,245,.1);
  --elev-2:0 0 0 1px var(--ink-600), 0 8px 24px rgba(0,0,0,.5);
  --elev-3:0 0 0 1px var(--ink-600), 0 20px 48px rgba(0,0,0,.6);

  --touch-min:44px;
  --icon-stroke:1.75px;

  /* Motion — instruments don't bounce */
  --motion-fast:120ms; --motion-base:180ms; --motion-slow:260ms;
  --motion-ease:cubic-bezier(0.2,0,0.2,1);
  --rule-fade:48px;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--surface-ground); color:var(--text-primary);
  font-family:var(--font-body); font-size:var(--type-body-size);
  line-height:var(--type-body-lh); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 var(--space-3)}
h1{font-size:var(--type-h1-size); line-height:var(--type-h1-lh); letter-spacing:var(--type-h1-track); font-weight:700}
h2{font-size:var(--type-h2-size); line-height:var(--type-h2-lh); letter-spacing:var(--type-h2-track); font-weight:600}
h3{font-size:var(--type-h3-size); line-height:var(--type-h3-lh); letter-spacing:0; font-weight:600}
p{margin:0 0 var(--space-3); text-wrap:pretty}
a{color:var(--text-accent); text-decoration:none}
a:hover{color:var(--sky-300)}
img{display:block; max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}
::selection{background:var(--selection)}
code,kbd,samp{font-family:var(--font-mono)}

/* The beam rule — freestanding rules fade over their last 48px */
.abeam-rule{
  height:1px; border:0; margin:var(--space-6) 0;
  background:linear-gradient(to right,transparent,var(--border-rule) var(--rule-fade),var(--border-rule) calc(100% - var(--rule-fade)),transparent);
}