/* ============================================================
   Ummeo — design tokens
   Every colour, size, radius, shadow and duration lives here.
   Nothing downstream may hardcode a raw value.
   ============================================================ */

:root {
  /* ---- Palette -------------------------------------------------
     "Ink & Sap". A near-black warm ink, bone paper, and a living
     green that signals growth. Terracotta carries the human note. */

  --ink-950: #08090B;
  --ink-900: #0C0E11;
  --ink-800: #14171C;
  --ink-700: #1D2128;
  --ink-600: #2A2F38;
  --ink-500: #3D444F;
  --ink-400: #5A626F;
  --ink-300: #858D9A;
  --ink-200: #B4BAC4;
  --ink-100: #D9DDE3;
  --ink-050: #EDEFF2;

  --bone-100: #FFFFFF;
  --bone-200: #FBFAF7;
  --bone-300: #F4F1EB;
  --bone-400: #E9E4DA;
  --bone-500: #D8D1C3;

  /* Living green — the brand's single "growth" signal */
  --sap-700: #0A7D57;
  --sap-600: #0E9F6E;
  --sap-500: #12BE81;
  --sap-400: #34D399;
  --sap-300: #6EE7B7;
  --sap-200: #A7F3D0;
  --sap-100: #D9FBE9;

  /* Terracotta — warmth, used sparingly for accents and marks */
  --clay-600: #C4562F;
  --clay-500: #E0703F;
  --clay-400: #F08A5B;
  --clay-300: #F7B394;
  --clay-100: #FDEBE1;

  /* Semantic */
  --bg: var(--bone-300);
  --bg-raised: var(--bone-200);
  --bg-sunken: var(--bone-400);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-400);
  --fg-subtle: var(--ink-300);
  --rule: color-mix(in srgb, var(--ink-900) 12%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink-900) 22%, transparent);
  --accent: var(--sap-600);
  --accent-ink: #04231A;

  /* ---- Type ----------------------------------------------------
     Display: Fraunces (editorial, optical-size + soft axes).
     Text: Inter. Both degrade to strong system stacks offline. */

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
    ui-serif, Georgia, serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid scale — clamp(min, preferred, max), 320px → 1440px */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.39vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.61vw, 1.83rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.93vw, 2.33rem);
  --step-4:  clamp(2.07rem, 1.79rem + 1.40vw, 2.96rem);
  --step-5:  clamp(2.49rem, 2.07rem + 2.07vw, 3.76rem);
  --step-6:  clamp(2.99rem, 2.38rem + 3.02vw, 4.78rem);
  --step-7:  clamp(3.58rem, 2.71rem + 4.34vw, 6.07rem);

  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-body: 1.62;
  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.14em;

  /* ---- Space — 8pt rhythm ------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  --section-y: clamp(4.5rem, 3rem + 7.5vw, 9rem);
  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3rem);
  --measure: 68ch;
  --container: 1240px;
  --container-wide: 1440px;

  /* ---- Radii --------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---- Elevation ----------------------------------------------- */
  --e-1: 0 1px 2px rgba(8, 9, 11, 0.05);
  --e-2: 0 2px 6px rgba(8, 9, 11, 0.06), 0 1px 2px rgba(8, 9, 11, 0.04);
  --e-3: 0 8px 24px rgba(8, 9, 11, 0.08), 0 2px 6px rgba(8, 9, 11, 0.04);
  --e-4: 0 20px 50px rgba(8, 9, 11, 0.12), 0 6px 14px rgba(8, 9, 11, 0.05);
  --e-5: 0 40px 90px rgba(8, 9, 11, 0.18), 0 12px 28px rgba(8, 9, 11, 0.07);

  /* ---- Motion -------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --t-slower: 720ms;

  --z-base: 1;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 200;
}

/* Dark surfaces are opt-in per section via [data-surface="ink"],
   not a global theme. The site is light by design; ink sections
   are a deliberate rhythm device. */
[data-surface="ink"] {
  --bg: var(--ink-950);
  --bg-raised: var(--ink-900);
  --bg-sunken: var(--ink-800);
  --fg: var(--bone-200);
  --fg-muted: var(--ink-200);
  --fg-subtle: var(--ink-300);
  --rule: color-mix(in srgb, var(--bone-100) 14%, transparent);
  --rule-strong: color-mix(in srgb, var(--bone-100) 26%, transparent);
  --accent: var(--sap-400);
  --accent-ink: #04231A;
  color-scheme: dark;
}