/* ============================================================
   Liquidity House — Core Tokens
   Colors, Type, Spacing, Radii, Shadows, Motion
   Single source of truth. Every surface imports this.
   ============================================================ */

/* Fonts — Google Fonts substitutes.
   Swap to local @font-face when commercial faces are licensed. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: Ink (institutional anchor) ---------- */
  --ink:        #0B1220;
  --ink-2:      #121A2C;   /* card on ink */
  --ink-3:      #1B2438;   /* hover on ink */
  --ink-line:   rgba(255, 255, 255, 0.08);
  --ink-line-2: rgba(255, 255, 255, 0.14);

  /* ---------- Color: Bone (ledger paper) ---------- */
  --bone:       #F4EFE6;   /* default page bg */
  --bone-2:     #EFE9DC;   /* subtle depth */
  --bone-3:     #E6DFCF;   /* hover on bone surfaces */
  --paper:      #FBF8F1;   /* card on bone */
  --ledger:     #D9CFB8;   /* 1px hairlines */
  --ledger-soft:#E8DFC8;   /* lighter hairline */

  /* ---------- Color: Liquid (the single accent) ---------- */
  --liquid:       #00C39A;
  --liquid-deep:  #2FD4B2;   /* on dark / hover */
  --liquid-ink:   #054437;   /* text on liquid fills */
  --liquid-tint:  #E0F5EE;   /* tint for chips / hover */

  /* ---------- Color: Text ---------- */
  --fg-1:   #0B1220;   /* primary on bone */
  --fg-2:   #3E4353;   /* secondary on bone */
  --fg-3:   #6B6B5A;   /* mute on bone */
  --fg-4:   #9A9481;   /* placeholder */

  --on-ink-1: #F4EFE6;   /* primary on ink */
  --on-ink-2: #B8BCC8;   /* secondary on ink */
  --on-ink-3: #7C8398;   /* mute on ink */

  /* ---------- Color: Semantic ---------- */
  --up:        #00A37A;
  --up-tint:   #DFF1EA;
  --down:      #C8422C;
  --down-tint: #F6E1DC;
  --warn:      #C78A1A;
  --warn-tint: #F6EBCF;

  /* ---------- Type: Families ---------- */
  --ff-display: "Newsreader", "GT Sectra", "Reckless", Georgia, serif;
  --ff-ui:      "Inter Tight", "Söhne", "Diatype", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:    "JetBrains Mono", "Söhne Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Type: Scale (semantic) ---------- */
  --t-display-1: 600 96px/0.98 var(--ff-display);   /* hero */
  --t-display-2: 600 72px/1.02 var(--ff-display);   /* marketing H1 */
  --t-display-3: 500 56px/1.04 var(--ff-display);   /* section H1 */
  --t-h1:        500 40px/1.08 var(--ff-display);
  --t-h2:        500 32px/1.12 var(--ff-display);
  --t-h3:        600 20px/1.3  var(--ff-ui);        /* product H3 — grotesque */
  --t-h4:        600 16px/1.35 var(--ff-ui);
  --t-body:      400 15px/1.55 var(--ff-ui);
  --t-body-sm:   400 13px/1.5  var(--ff-ui);
  --t-label:     500 13px/1.3  var(--ff-ui);
  --t-caption:   400 12px/1.4  var(--ff-ui);
  --t-eyebrow:   500 11px/1.2  var(--ff-ui);        /* uppercase, tracked */
  --t-mono:      400 13px/1.45 var(--ff-mono);
  --t-mono-sm:   400 12px/1.4  var(--ff-mono);
  --t-num-hero:  500 72px/1    var(--ff-mono);      /* big data numerals */

  /* ---------- Spacing (8px baseline + 4px half-steps) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  40px;
  --s-8:  48px;
  --s-10: 64px;
  --s-12: 96px;
  --s-16: 128px;

  /* ---------- Radii ---------- */
  --r-1:   4px;     /* inputs, tags */
  --r-2:   8px;     /* cards, modals */
  --r-3:   12px;    /* hero cards */
  --r-pill: 999px;  /* status chips only */

  /* ---------- Shadows ---------- */
  --lift:  0 1px 0 rgba(11, 18, 32, 0.04), 0 1px 2px rgba(11, 18, 32, 0.06);
  --float: 0 4px 12px rgba(11, 18, 32, 0.08), 0 12px 32px rgba(11, 18, 32, 0.10);
  --press: inset 0 1px 0 rgba(0, 0, 0, 0.08);
  --focus: 0 0 0 2px var(--bone), 0 0 0 4px var(--liquid);

  /* ---------- Motion ---------- */
  --ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-micro: 120ms;
  --d-default: 200ms;
  --d-expressive: 320ms;

  /* ---------- Layout ---------- */
  --mw-content: 1240px;
  --mw-bleed:   1440px;
  --gutter:     24px;
}

/* ============================================================
   Semantic element defaults — opt-in via `body.lh`
   ============================================================ */
body.lh {
  margin: 0;
  background: var(--bone);
  color: var(--fg-1);
  font: var(--t-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.lh.dark {
  background: var(--ink);
  color: var(--on-ink-1);
}

.lh h1, .lh .h1 { font: var(--t-h1); letter-spacing: -0.02em; margin: 0; }
.lh h2, .lh .h2 { font: var(--t-h2); letter-spacing: -0.02em; margin: 0; }
.lh h3, .lh .h3 { font: var(--t-h3); letter-spacing: -0.01em; margin: 0; }
.lh h4, .lh .h4 { font: var(--t-h4); letter-spacing: -0.01em; margin: 0; }
.lh p  { margin: 0; }

.lh .display-1 { font: var(--t-display-1); letter-spacing: -0.035em; margin: 0; }
.lh .display-2 { font: var(--t-display-2); letter-spacing: -0.03em;  margin: 0; }
.lh .display-3 { font: var(--t-display-3); letter-spacing: -0.025em; margin: 0; }

.lh .eyebrow {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
.lh.dark .eyebrow { color: var(--on-ink-3); }

.lh .mono, .lh code, .lh kbd, .lh samp {
  font: var(--t-mono);
  font-variant-numeric: tabular-nums;
}
.lh .num { font-variant-numeric: tabular-nums; }

/* Hairline rule */
.lh hr, .lh .rule {
  border: 0;
  border-top: 1px solid var(--ledger);
  margin: 0;
}
.lh.dark hr, .lh.dark .rule { border-top-color: var(--ink-line); }

/* Focus ring */
.lh :focus-visible {
  outline: 2px solid var(--liquid);
  outline-offset: 2px;
  border-radius: 2px;
}