/* =============================================================================
   Steradian Insights — shared design tokens
   Single source of truth for landing.html, insight_review.html, insight_print.html
   Import:  <link rel="stylesheet" href="shared_tokens.css">
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Fonts — load once per page (kept here as a reminder; pages also <link> them):
   Source Serif 4   : headings  (H1 800, H2 700, H3 600)
   Inter            : body/UI   (400 body, 500 callout, 600 uppercase table head)
   JetBrains Mono   : hashes only
   ----------------------------------------------------------------------------- */

:root{
  /* --- Brand palette (exact, no substitutions) --- */
  --navy:           #0B1929;   /* primary brand navy */
  --navy-deep:      #051019;   /* cover gradient top */
  --navy-line:      #1C2D40;   /* hairline on navy */
  --navy-soft:      #16263A;   /* raised panel on navy */

  --gold:           #C9A961;   /* gold accent */
  --gold-deep:      #A8863C;   /* gold text on light */
  --gold-soft:      #E7D8AE;   /* gold tint */
  --gold-wash:      #F4ECD6;   /* gold field */

  --cream:          #F5EDE0;   /* page/content background */
  --paper:          #FBFAF6;   /* lighter card surface */
  --paper-2:        #EFE7D7;   /* alt stripe */

  --ink:            #1F2937;   /* body text */
  --ink-strong:     #111A26;   /* near-navy ink for emphasis */
  --muted:          #6B7280;   /* muted text */
  --muted-2:        #9AA0A8;   /* faint text */

  --rule:           #DAD3C4;   /* hairline on cream */
  --rule-soft:      #EBE4D5;   /* faint hairline */
  --rule-navy:      rgba(201,169,97,0.22); /* gold hairline on navy */

  /* --- Status tokens (exact) --- */
  --strong-fg:      #047857;   --strong-bg:  #ECFDF5;
  --watch-fg:       #92400E;   --watch-bg:   #FEF3C7;
  --anchor-fg:      #C2410C;   --anchor-bg:  #FFEDD5;

  /* --- On-navy foreground --- */
  --on-navy:        #F3EEE2;
  --on-navy-mute:   rgba(243,238,226,0.66);
  --on-navy-faint:  rgba(243,238,226,0.42);

  /* --- Type families --- */
  --serif:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Spacing --- */
  --pad-digital:    32px;
  --pad-print:      72pt;       /* 1in */

  /* --- Radius (max 4px, never more) --- */
  --r:              3px;
  --r-sm:           2px;

  /* --- Reading-progress / accent --- */
  --progress:       var(--gold);
}

/* -----------------------------------------------------------------------------
   Reset
   ----------------------------------------------------------------------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* -----------------------------------------------------------------------------
   Type primitives — shared across surfaces
   ----------------------------------------------------------------------------- */
.serif{ font-family:var(--serif); }
.mono { font-family:var(--mono); }

h1,h2,h3,h4{ font-family:var(--serif); color:var(--navy); margin:0; line-height:1.06; }
h1{ font-weight:800; font-size:60px; letter-spacing:-0.018em; }
h2{ font-weight:700; font-size:38px; letter-spacing:-0.012em; }
h3{ font-weight:600; font-size:22px; letter-spacing:-0.005em; }
h4{ font-weight:600; font-size:17px; }

p{ margin:0 0 12px; }

/* Eyebrow / kicker — gold caps */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow.on-navy{ color:var(--gold); }

/* uppercase micro-label (table headers, field labels) */
.label{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.tnum{ font-variant-numeric:tabular-nums; }

/* -----------------------------------------------------------------------------
   Buttons — solid gold primary / outlined secondary
   ----------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans);
  font-weight:600; font-size:14px; letter-spacing:0.01em;
  padding:12px 20px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }

.btn-primary{ background:var(--gold); color:var(--navy-deep); border-color:var(--gold); }
.btn-primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }

.btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--on-navy); }

.btn-outline-navy{ background:transparent; color:var(--on-navy); border-color:var(--navy-line); }
.btn-outline-navy:hover{ border-color:var(--gold); color:var(--gold); }

.btn-outline-gold{ background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-outline-gold:hover{ background:var(--gold); color:var(--navy-deep); }

/* -----------------------------------------------------------------------------
   Pills — solid fills only, no gradients
   ----------------------------------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--sans);
  font-size:10px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:3px 9px 2px;
  border-radius:var(--r-sm);
  line-height:1.3;
  white-space:nowrap;
}
.pill-strong  { background:var(--strong-bg); color:var(--strong-fg); }
.pill-watch   { background:var(--watch-bg);  color:var(--watch-fg); }
.pill-anchor  { background:var(--anchor-bg); color:var(--anchor-fg); }
.pill-gold    { background:var(--gold); color:var(--navy-deep); }
.pill-outline { background:transparent; border:1px solid var(--gold); color:var(--gold-deep); }

/* -----------------------------------------------------------------------------
   Brand lockup — tri-blade mark + single-line wordmark
   Markup:
     <a class="wordmark">
       <svg class="si-mark"><use href="#si-logo"/></svg>
       <span class="wm-name">STERADIAN INSIGHTS</span>
     </a>
   The #si-logo symbol is defined inline in each page's <defs>.
   ----------------------------------------------------------------------------- */
.wordmark{ display:inline-flex; align-items:center; gap:13px; }
.si-mark{ width:36px; height:36px; flex:0 0 auto; }
.wm-name{
  font-family:var(--sans);
  font-weight:800;
  font-size:18px;
  letter-spacing:0.085em;
  color:#EAEFF5;
}

/* metric value — the big serif number shared by cards everywhere */
.metric-value{
  font-family:var(--serif);
  font-weight:700;
  color:var(--navy);
  line-height:0.95;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}

/* hairline helpers */
.rule-top{ border-top:1px solid var(--rule); }
.gold-rule{ height:2px; width:54px; background:var(--gold); border:0; }