/* =========================================================
   LEGATUM — Design Tokens
   Colors, Type, Spacing, Radii, Shadows
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---------- COLOR: Ink (dark background system) ---------- */
  --ink-0:   #0A0A0B;   /* deepest — page base */
  --ink-1:   #101012;   /* elevated surface */
  --ink-2:   #16161A;   /* card / panel */
  --ink-3:   #1D1D22;   /* card hover / nested panel */
  --ink-4:   #26262C;   /* divider / strong border */
  --ink-5:   #33333A;   /* input border active */

  /* ---------- COLOR: Bone (warm off-white, accent + text) ---------- */
  --bone-0:  #F4EFE6;   /* accent / brand surface — muted ivory */
  --bone-1:  #EDE6D9;   /* primary text on dark */
  --bone-2:  #D9D1C1;   /* secondary text */
  --bone-3:  #A69F91;   /* tertiary / muted text */
  --bone-4:  #75716A;   /* disabled / placeholder */

  /* ---------- COLOR: Semantic ---------- */
  --accent:           var(--bone-0);     /* primary accent (neutral) */
  --accent-hover:     #FBF6EC;
  --accent-pressed:   #E8DFCE;
  --accent-ink:       #141414;           /* text on accent */

  /* Gold — the premium legal accent. Used for the continuous line, CTAs, highlights. */
  --gold:             #C9A86A;
  --gold-bright:      #E8C879;
  --gold-dim:         #8A7548;
  --gold-ink:         #141414;

  --border-subtle:    rgba(237, 230, 217, 0.08);
  --border-default:   rgba(237, 230, 217, 0.14);
  --border-strong:    rgba(237, 230, 217, 0.22);

  --fg-primary:    var(--bone-1);
  --fg-secondary:  var(--bone-2);
  --fg-muted:      var(--bone-3);
  --fg-disabled:   var(--bone-4);

  --bg-page:       var(--ink-0);
  --bg-surface:    var(--ink-1);
  --bg-card:       var(--ink-2);
  --bg-card-hover: var(--ink-3);
  --bg-input:      var(--ink-1);

  /* Functional */
  --success:  #8FAF8E;   /* muted sage */
  --warn:     #D4B979;   /* muted gold */
  --danger:   #C97B6F;   /* muted terracotta */

  /* ---------- TYPE ---------- */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-serif:   'Space Grotesk', sans-serif; /* backwards compat — italic via font-style */

  /* Fluid-ish fixed scale. Russian Cyrillic reads well at slightly larger body sizes. */
  --fs-display-xl: 96px;
  --fs-display-l:  72px;
  --fs-display-m:  56px;
  --fs-h1:         48px;
  --fs-h2:         36px;
  --fs-h3:         28px;
  --fs-h4:         22px;
  --fs-body-l:     19px;
  --fs-body:       17px;
  --fs-body-s:     15px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.18em;

  /* ---------- SPACING ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Section vertical rhythm (desktop) */
  --section-y: 128px;

  /* ---------- RADII ---------- */
  /* Legatum is restrained — small radii only. No pill shapes. */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-full: 999px;  /* reserved for avatars / status dots only */

  /* ---------- SHADOWS / ELEVATION ---------- */
  /* On dark surfaces, elevation is signaled by a hairline + a very soft inner highlight.
     Outer shadows are near-invisible; prefer borders + subtle top-inner-highlight. */
  --shadow-hairline: inset 0 1px 0 rgba(237, 230, 217, 0.04);
  --shadow-card:     0 1px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(237, 230, 217, 0.035);
  --shadow-raised:   0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(237, 230, 217, 0.05);
  --shadow-overlay:  0 24px 64px rgba(0,0,0,0.7), inset 0 1px 0 rgba(237, 230, 217, 0.06);

  /* Focus ring — bone accent, low-contrast but clearly visible */
  --focus-ring: 0 0 0 2px var(--ink-0), 0 0 0 4px rgba(244, 239, 230, 0.5);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container:       1200px;
  --container-wide:  1320px;
  --container-narrow: 880px;
  --gutter: 24px;
}

/* =========================================================
   SEMANTIC ELEMENT DEFAULTS
   ========================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-normal); }

p  { margin: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-secondary); text-wrap: pretty; }

small { font-size: var(--fs-caption); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  letter-spacing: 0;
}

/* Inline serif italic — used for pull-quotes and emphasis on Latin terms (Legatum) */
em, .italic-display {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-primary);
}

a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-base) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); }

::selection { background: var(--bone-0); color: var(--accent-ink); }

/* Scrollbar on dark */
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }