@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* =========================================================
   SYNCCFO — "Ledger" tokens (canonical)
   Navy authority + warm paper + brass foil accent.
   Page-level <style> blocks load after this file and win
   on any conflict, so this acts as the shared floor.
   ========================================================= */
:root{
  /* ---- core palette ---- */
  --ink:#10243c;
  --ink-deep:#08182a;
  --ink-mid:#1b3f63;
  --brass:#9d7628;
  --brass-mid:#b9903c;
  --brass-lt:#ddba76;
  --muted:#5a6472;
  --muted-warm:#6f6857;
  --rule:#ddd3c0;
  --rule-soft:#ece5d7;
  --paper:#fbf8f2;
  --paper-2:#f3ecdd;
  --card:#ffffff;
  --white:#ffffff;

  /* ---- type roles ---- */
  --font-display:'Newsreader','Iowan Old Style',Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-data:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --shadow-sm:0 1px 2px rgba(16,36,60,.05), 0 6px 16px -10px rgba(16,36,60,.18);
  --shadow-md:0 2px 4px rgba(16,36,60,.05), 0 22px 44px -26px rgba(16,36,60,.35);

  /* ===== Aliases — older pages reference these names ===== */
  --navy:var(--ink);
  --navy-deep:var(--ink-deep);
  --navy-mid:var(--ink-mid);

  --violet:var(--brass);
  --violet-soft:var(--brass-lt);
  --plum:var(--ink-deep);
  --plum-mid:var(--brass);
  --plum-light:var(--brass);
  --plum-pale:var(--brass-lt);
  --plum-bright:var(--brass-lt);
  --purple:var(--brass);
  --purple-light:var(--brass);
  --lavender:var(--brass-lt);
  --terracotta:var(--brass);
  --terracotta-dark:#7d5c1d;
  --terracotta-soft:var(--brass-lt);

  /* surfaces — all warm now (the old cool #f3ecdd band read clinical) */
  --bg:var(--paper);
  --bg-warm:var(--paper-2);
  --cream:var(--paper-2);
  --ivory:var(--paper);
  --off-white:var(--paper-2);
  --paper-alt:var(--paper-2);
  --bg-deep:var(--ink);
  --surface:var(--ink);

  /* ink / text */
  --ink-soft:var(--muted);
  --ink-light:var(--muted);
  --text-body:var(--ink);
  --text-muted:var(--muted);

  /* hairlines */
  --hairline:var(--rule);
  --hairline-soft:var(--rule-soft);
  --border:var(--rule);
  --line:var(--rule);

  /* on-dark */
  --ink-on-dark:#ffffff;
  --ink-on-dark-soft:rgba(247,242,232,0.82);
  --hairline-on-dark:rgba(247,242,232,0.14);

  /* accent */
  --gold:var(--brass);
  --accent:var(--brass);
  --accent-light:var(--brass-lt);
}

/* =========================================================
   BASE FLOOR — warmth + typographic personality.
   Direct element rules, so headings pick up the display face
   even where a page only sets font-family on <body>.
   ========================================================= */
body{
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* paper grain — the single ambient texture, sitewide */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.018em;
  line-height:1.12;
}
h3{font-weight:500;}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300;color:var(--brass);}

/* eyebrows / small labels read as ledger marks */
.eyebrow,.sec-eyebrow,.kicker,.label,.mark,.role-kicker,.qa-label,.fallback-label{
  font-family:var(--font-data);
  font-size:11px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--brass);
  font-style:normal;
}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brass-lt);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* ---------------------------------------------------------
   Measure floor. Long-form paragraphs that run the full
   container width are the main reason pages read as clinical.
   max-width only ever narrows, so grids and cards are unaffected;
   centred blocks keep their own margin:auto.
   --------------------------------------------------------- */
.hero p, .hero-sub, .hero-lede, .sec-sub, .lede, .intro p, .page-intro p{
  max-width:64ch;
}
.hero h1, .hero h2{ margin-bottom:.5em; }
[style*="text-align:center"] .hero-sub,
[style*="text-align: center"] .hero-sub,
.hero-inner[style*="center"] p{ margin-left:auto; margin-right:auto; }
