/* Atlas Blue - shared tokens + base. Per DESIGN.md. Funnel light theme. */
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* neutrals */
  --background:#F6F7FA; --paper:#F7F8FA; --foreground:#111E37; --card:#FFFFFF;
  --muted:#F0F3F7; --muted-foreground:#5E6B85;
  --border:#DEE3ED; --line:#2E5090; --line-soft:#C9D2E2;
  /* blue (base/brand) = structure */
  --accent:#2E5090; --accent-secondary:#527BC8; --accent-secondary-bright:#7FA0D8; --accent-foreground:#FFFFFF; --ring:#2E5090;
  /* green = interaction on light (Marrs): hover, selected, active, focus. Never let interaction drift to blue. */
  --accent-2:#0E7C7B; --accent-2-secondary:#14B3B2; --accent-2-bright:#0E7C7B; --accent-2-soft:#E7F2F2;
  /* reserved deep-teal, ONE semantic job: the free/human "what stays yours" thread. Used rarely. */
  --teal:#0E7C7B; --teal-soft:rgba(14,124,123,.10);
  /* interaction surfaces */
  --tint:#EAEEF4; --tint-border:#D5DCE9; --hover:#EEF1F6;
  /* state */
  --good:#16A34A; --bad:#DC2626;
  /* gradients (Mode B only) */
  --grad:linear-gradient(135deg,#2E5090,#527BC8);
  --grad-2:linear-gradient(135deg,#3E63A8,#7FA0D8);
  --grad-duo:linear-gradient(115deg,#2E5090 0%,#3E63A8 50%,#7FA0D8 100%);
  /* subtle BUTTON gradient: a whisper of top-down light, ~8%. Filled buttons only, never ghost. */
  --btn-grad:linear-gradient(180deg,#3A5DA0,#2E5090);
  /* fonts: TWO faces only. Calistoga (--font-display) is the warm serif voice for
     headings/large numerals; Inter (--font-body) does body + UI AND the small
     uppercase labels/eyebrows/index numbers. --font-mono is kept as an alias to Inter
     so the existing label styles (uppercase + letter-spacing) need no change; there is
     no third / monospace face. Inter draws a clean, dotless zero. */
  --font-body:"Inter",system-ui,sans-serif;
  --font-display:"Calistoga",Georgia,serif;
  --font-mono:"Inter",system-ui,sans-serif;
  /* ONE type scale, shared by every surface (item 17). The report layer (the two
     renderers) names the same roles as --t-cover/--t-h2/--t-h3/--t-body/--t-table/
     --t-mono; the landing's display headings clamp UP to --fs-h1/--fs-h2 for hero
     impact, but the resting/body/label tiers below match the reports one to one.
     px: cover 44 . h2 28 . h3/sub 20 . body 16 . table 14 . mono-label 12. */
  --t-cover:44px; --t-h2:28px; --t-h3:20px; --t-body:16px; --t-table:14px; --t-mono:12px;
  /* radius: 5px across the funnel. Pills stay round. --radius-lg for large
     interactive cards where the base radius looks tight. */
  --radius:5px; --radius-soft:5px; --radius-lg:14px; --radius-pill:999px;
  /* subtle elevation: interactive surfaces only (never documents). Tuned for the light canvas. */
  --shadow-card:0 1px 2px rgba(17,30,55,.04),0 6px 18px rgba(17,30,55,.06);
  --shadow-sm:0 1px 3px rgba(17,30,55,.05);
}
*{margin:0;padding:0;box-sizing:border-box}
h1,h2,h3,h4,h5,p{display:block}
/* mobile overflow BASE guard (item 14): no surface scrolls sideways. Lanes still
   fix their own local culprits (wide tables, fixed-width grids); this is the floor. */
html,body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--background);color:var(--foreground);
  line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* shared mono eyebrow */
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;font-weight:500;color:var(--accent)}
.live-sq{display:inline-block;width:9px;height:9px;background:var(--accent-2);margin-right:9px;
  vertical-align:middle}
@keyframes pulse-sq{0%,100%{opacity:1}50%{opacity:.45}}
/* pulse intentionally disabled: a blinking "live" dot reads consumer/gimmicky for a consultancy */
.live-sq.pulse{animation:none}

/* shared buttons (3px radius, subtle gradient on the filled variant) */
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--accent);border-radius:var(--radius);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:14px;
  font-weight:500;padding:19px 30px;transition:all .16s ease;cursor:pointer;background:none}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(5px)}
.btn-fill{background:var(--btn-grad);color:#fff}
.btn-fill:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-line{background:transparent;color:var(--accent)}
.btn-line:hover{background:var(--accent);color:#fff}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ink tokens (light-variant values; the funnel does not use a dark canvas) */
:root{
  --ink-bg:#F6F7FA;
  --ink-fg:#111E37;
  --ink-fg-soft:#3A4866;
  --ink-fg-mute:#5E6B85;
  --ink-line:rgba(17,30,55,.12);
  --ink-line-soft:rgba(17,30,55,.07);
  --ink-surface:rgba(46,80,144,.04);
}