/* tokens/figma/fig-tokens.css */
/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --background-primary: rgb(255,255,255); /* @kind color */
  --basic-white: rgb(255,255,255); /* @kind color */
  --color-brand-brand-black: rgb(1,1,1); /* @kind color */
  --color-brand-brand-blue: rgb(44,70,115); /* @kind color */
  --color-brand-brand-dark-blue: rgb(19,45,90); /* @kind color */
  --color-brand-brand-orange: rgb(255,147,93); /* @kind color */
  --color-brand-brand-white: rgb(249,249,249); /* @kind color */
  --color-brand-brand-yellow: rgb(255,255,200); /* @kind color */
  --color-green-100: rgb(197,238,218); /* @kind color */
  --color-green-200: rgb(148,226,188); /* @kind color */
  --color-green-300: rgb(98,213,157); /* @kind color */
  --color-green-400: rgb(25,173,101); /* @kind color */
  --color-green-450: rgb(16,150,82); /* @kind color */
  --color-green-500: rgb(20,113,61); /* @kind color */
  --color-green-700: rgb(40,98,76); /* @kind color */
  --color-green-900: rgb(27,77,42); /* @kind color */
  --color-icons-base-primary: var(--color-neutral-800); /* @kind color */
  --color-icons-base-secondary2: var(--color-neutral-600); /* @kind color */
  --color-icons-base-secondary: var(--color-neutral-400); /* @kind color */
  --color-icons-base-tertiary: var(--color-neutral-400); /* @kind color */
  --color-icons-black: var(--color-neutral-black-2); /* @kind color */
  --color-icons-disabled: var(--color-neutral-250); /* @kind color */
  --color-icons-lbl-active: var(--color-green-500); /* @kind color */
  --color-icons-lbl-alert: var(--color-yellow-700); /* @kind color */
  --color-icons-lbl-warning: var(--color-red-400); /* @kind color */
  --color-icons-white: var(--color-neutral-white-2); /* @kind color */
  --color-neutral-100: rgb(221,221,221); /* @kind color */
  --color-neutral-150: rgb(240,239,237); /* @kind color */
  --color-neutral-200: rgb(249,248,247); /* @kind color */
  --color-neutral-250: rgb(223,226,234); /* @kind color */
  --color-neutral-300: rgb(217,220,239); /* @kind color */
  --color-neutral-350: rgb(184,193,218); /* @kind color */
  --color-neutral-400: rgb(164,169,184); /* @kind color */
  --color-neutral-500: rgb(112,115,121); /* @kind color */
  --color-neutral-50: rgb(249,249,249); /* @kind color */
  --color-neutral-600: rgb(83,85,91); /* @kind color */
  --color-neutral-700: rgb(59,62,69); /* @kind color */
  --color-neutral-750: rgb(45,48,54); /* @kind color */
  --color-neutral-800: rgb(27,27,26); /* @kind color */
  --color-neutral-825: rgb(45,46,50); /* @kind color */
  --color-neutral-850: rgb(29,31,32); /* @kind color */
  --color-neutral-900: rgb(20,20,19); /* @kind color */
  --color-neutral-black-2: rgb(16,17,20); /* @kind color */
  --color-neutral-black-3: rgb(0,0,0); /* @kind color */
  --color-neutral-black: rgb(0,0,0); /* @kind color */
  --color-neutral-white-2: rgb(255,255,255); /* @kind color */
  --color-neutral-white: rgb(255,255,255); /* @kind color */
  --color-red-100: rgb(255,229,238); /* @kind color */
  --color-red-150: rgb(250,219,224); /* @kind color */
  --color-red-200: rgb(255,201,199); /* @kind color */
  --color-red-250: rgb(246,176,174); /* @kind color */
  --color-red-300: rgb(236,144,145); /* @kind color */
  --color-red-400: rgb(225,126,126); /* @kind color */
  --color-red-500: rgb(227,32,33); /* @kind color */
  --color-red-900: rgb(103,41,46); /* @kind color */
  --color-strokes-labels-str-lbl-active: var(--color-green-200); /* @kind color */
  --color-strokes-labels-str-lbl-alert: var(--color-yellow-250); /* @kind color */
  --color-strokes-labels-str-lbl-warning-dark: var(--color-red-300); /* @kind color */
  --color-strokes-labels-str-lbl-warning: var(--color-red-200); /* @kind color */
  --color-strokes-primary-button-sec: var(--color-neutral-500); /* @kind color */
  --color-strokes-primary-default: var(--color-neutral-825); /* @kind color */
  --color-strokes-primary-inp-active: var(--color-neutral-400); /* @kind color */
  --color-strokes-primary-inp-default: var(--color-neutral-600); /* @kind color */
  --color-strokes-primary-inp-disabled: var(--color-neutral-750); /* @kind color */
  --color-strokes-primary-inp-error: var(--color-red-500); /* @kind color */
  --color-strokes-primary-inp-filled: var(--color-neutral-600); /* @kind color */
  --color-strokes-primary-inp-hover: var(--color-brand-brand-orange); /* @kind color */
  --color-strokes-secondary-default: var(--color-neutral-100); /* @kind color */
  --color-strokes-secondary-light: var(--color-neutral-50); /* @kind color */
  --color-surface-background-black: var(--color-neutral-black); /* @kind color */
  --color-surface-background-bone: var(--color-neutral-150); /* @kind color */
  --color-surface-background-dark: var(--color-neutral-900); /* @kind color */
  --color-surface-background-default: var(--color-neutral-white-2); /* @kind color */
  --color-surface-background-grey825: var(--color-neutral-825); /* @kind color */
  --color-surface-background-grey850: var(--color-neutral-850); /* @kind color */
  --color-surface-background-hero: var(--color-neutral-50); /* @kind color */
  --color-surface-background-secondary-300: var(--color-neutral-300); /* @kind color */
  --color-surface-background-secondary-350: var(--color-neutral-350); /* @kind color */
  --color-surface-background-secondary-400: var(--color-neutral-400); /* @kind color */
  --color-surface-buttons-heavy-button-heavy-hover: var(--color-neutral-750); /* @kind color */
  --color-surface-buttons-primary-button-prim-focus: var(--color-brand-brand-orange); /* @kind color */
  --color-surface-buttons-primary-button-prim-hover: var(--color-brand-brand-yellow); /* @kind color */
  --color-surface-buttons-secondary-button-sec-default: var(--color-neutral-white-2); /* @kind color */
  --color-surface-buttons-secondary-button-sec-disabled: var(--color-neutral-150); /* @kind color */
  --color-surface-buttons-secondary-button-sec-hover: var(--color-neutral-200); /* @kind color */
  --color-surface-labels-label-active: var(--color-green-100); /* @kind color */
  --color-surface-labels-label-alert: var(--color-yellow-300); /* @kind color */
  --color-surface-labels-label-warning: var(--color-red-100); /* @kind color */
  --color-text-body-body-green: var(--color-green-450); /* @kind color */
  --color-text-body-body-heavy: var(--color-neutral-850); /* @kind color */
  --color-text-body-body-prim-2: var(--color-neutral-white); /* @kind color */
  --color-text-body-body-prim: var(--color-neutral-white-2); /* @kind color */
  --color-text-body-body-red: var(--color-red-400); /* @kind color */
  --color-text-body-body-sec-10: var(--color-neutral-300); /* @kind color */
  --color-text-body-body-sec-20: var(--color-neutral-400); /* @kind color */
  --color-text-body-body-sec-30: var(--color-neutral-500); /* @kind color */
  --color-text-body-body-yellow: var(--color-yellow-600); /* @kind color */
  --color-text-heading-heading-brand: var(--color-brand-brand-orange); /* @kind color */
  --color-text-heading-heading-dark: var(--color-neutral-black); /* @kind color */
  --color-text-heading-heading-light: var(--color-neutral-white-2); /* @kind color */
  --color-text-heading-heading-sec-10: var(--color-neutral-850); /* @kind color */
  --color-text-heading-heading-sec-20: var(--color-neutral-750); /* @kind color */
  --color-text-heading-heading-sec-30: var(--color-neutral-500); /* @kind color */
  --color-yellow-100: rgb(244,236,208); /* @kind color */
  --color-yellow-250: rgb(249,223,181); /* @kind color */
  --color-yellow-300: rgb(250,241,203); /* @kind color */
  --color-yellow-500: rgb(255,228,134); /* @kind color */
  --color-yellow-550: rgb(212,154,46); /* @kind color */
  --color-yellow-600: rgb(226,114,0); /* @kind color */
  --color-yellow-700: rgb(188,106,67); /* @kind color */
  --color-yellow-900: rgb(150,84,53); /* @kind color */
  --color-yellow-950: rgb(170,58,5); /* @kind color */
  --font-size-body-l: var(--scale-16-2); /* @kind font */
  --font-size-body-m: var(--scale-14); /* @kind font */
  --font-size-body-s: var(--scale-12); /* @kind font */
  --font-size-body-xl: var(--scale-20-2); /* @kind font */
  --font-size-body-xxl: var(--scale-24); /* @kind font */
  --font-size-headings-h1: var(--scale-72); /* @kind font */
  --font-size-headings-h2: var(--scale-42); /* @kind font */
  --font-size-headings-h3: var(--scale-32); /* @kind font */
  --font-size-headings-h4: var(--scale-24); /* @kind font */
  --font-size-headings-h5: var(--scale-16-2); /* @kind font */
  --font-size-headings-h6: var(--scale-14); /* @kind font */
  --font-size-headings-h7: var(--scale-12); /* @kind font */
  --font-size-headings-h8: var(--scale-16-2); /* @kind font */
  --fontsize-buttons-m: var(--scale-16); /* @kind spacing */
  --graphite-300: rgb(138,143,148); /* @kind color */
  --icon-default: var(--ink-400); /* @kind color */
  --ink-400: rgb(158,169,183); /* @kind color */
  --line-height-body-l: var(--scale-24); /* @kind font */
  --line-height-body-m: var(--scale-24); /* @kind font */
  --line-height-body-s: var(--scale-16-2); /* @kind font */
  --line-height-body-xl: var(--scale-32); /* @kind font */
  --line-height-buttons-m: var(--scale-16); /* @kind font */
  --line-height-headings-h1: var(--scale-72); /* @kind font */
  --line-height-headings-h2: var(--scale-40); /* @kind font */
  --line-height-headings-h3: var(--scale-32); /* @kind font */
  --line-height-headings-h4: var(--scale-28); /* @kind font */
  --line-height-headings-h5: var(--scale-18); /* @kind font */
  --line-height-headings-h6: var(--scale-16-2); /* @kind font */
  --line-height-headings-h7: var(--scale-16-2); /* @kind font */
  --line-height-headings-h8: var(--scale-16-2); /* @kind font */
  --line-height-headings-hg: var(--scale-72); /* @kind font */
  --opacity-100-2: 100; /* @kind other */
  --opacity-100-3: 100; /* @kind other */
  --opacity-100: 100; /* @kind other */
  --opacity-opacity-100-2: 100; /* @kind other */
  --opacity-opacity-100: 100; /* @kind other */
  --opacity-opacity-12: 12; /* @kind other */
  --opacity-opacity-20: 20; /* @kind other */
  --opacity-opacity-40: 40; /* @kind other */
  --opacity-opacity-48: 48; /* @kind other */
  --opacity-opacity-60: 60; /* @kind other */
  --opacity-opacity-80: 80; /* @kind other */
  --paragraph-spacing-body-l: var(--sizes-spacing-sp-20-2); /* @kind font */
  --paragraph-spacing-body-m: var(--sizes-spacing-sp-16-2); /* @kind font */
  --paragraph-spacing-body-s: var(--sizes-spacing-sp-12); /* @kind font */
  --paragraph-spacing-body-xl: var(--sizes-spacing-sp-20-2); /* @kind font */
  --paragraph-spacing-headings-h1: var(--sizes-spacing-sp-24); /* @kind font */
  --paragraph-spacing-headings-h2: var(--sizes-spacing-sp-24); /* @kind font */
  --paragraph-spacing-headings-h3: var(--sizes-spacing-sp-20-2); /* @kind font */
  --paragraph-spacing-headings-h4: var(--sizes-spacing-sp-20-2); /* @kind font */
  --paragraph-spacing-headings-h5: var(--sizes-spacing-sp-16-2); /* @kind font */
  --paragraph-spacing-headings-h6: var(--sizes-spacing-sp-16-2); /* @kind font */
  --scale-0: 0; /* @kind spacing */
  --scale-1-2: 1; /* @kind spacing */
  --scale-100: 100; /* @kind spacing */
  --scale-120: 120; /* @kind spacing */
  --scale-12: 12; /* @kind spacing */
  --scale-14: 14; /* @kind spacing */
  --scale-16-2: 16; /* @kind spacing */
  --scale-16: 16; /* @kind spacing */
  --scale-18: 18; /* @kind spacing */
  --scale-1: 1; /* @kind spacing */
  --scale-2-2: 2; /* @kind spacing */
  --scale-20-2: 20; /* @kind spacing */
  --scale-20-3: 20; /* @kind spacing */
  --scale-20: 20; /* @kind spacing */
  --scale-24: 24; /* @kind spacing */
  --scale-28: 28; /* @kind spacing */
  --scale-2: 2; /* @kind spacing */
  --scale-32: 32; /* @kind spacing */
  --scale-36: 36; /* @kind spacing */
  --scale-4-2: 4; /* @kind spacing */
  --scale-40: 40; /* @kind spacing */
  --scale-42: 42; /* @kind spacing */
  --scale-48-2: 48; /* @kind spacing */
  --scale-48: 48; /* @kind spacing */
  --scale-4: 4; /* @kind spacing */
  --scale-52: 52; /* @kind spacing */
  --scale-54: 54; /* @kind spacing */
  --scale-58: 58; /* @kind spacing */
  --scale-60: 60; /* @kind spacing */
  --scale-62: 62; /* @kind spacing */
  --scale-72: 72; /* @kind spacing */
  --scale-8-2: 8; /* @kind spacing */
  --scale-80: 80; /* @kind spacing */
  --scale-8: 8; /* @kind spacing */
  --sizes-radius-none: var(--scale-0); /* @kind radius */
  --sizes-radius-rd-12: 0; /* @kind radius */
  --sizes-radius-rd-16: 0; /* @kind radius */
  --sizes-radius-rd-2-2: 0; /* @kind radius */
  --sizes-radius-rd-2-3: 0; /* @kind radius */
  --sizes-radius-rd-200: 0; /* @kind radius */
  --sizes-radius-rd-20: 0; /* @kind radius */
  --sizes-radius-rd-2: 0; /* @kind radius */
  --sizes-radius-rd-4-2: 0; /* @kind radius */
  --sizes-radius-rd-4: 0; /* @kind radius */
  --sizes-radius-rd-8-2: 0; /* @kind radius */
  --sizes-radius-rd-8: 0; /* @kind radius */
  --sizes-spacing-sp-0: var(--scale-0); /* @kind spacing */
  --sizes-spacing-sp-100: var(--scale-100); /* @kind spacing */
  --sizes-spacing-sp-120: var(--scale-120); /* @kind spacing */
  --sizes-spacing-sp-12: var(--scale-12); /* @kind spacing */
  --sizes-spacing-sp-16-2: var(--scale-16-2); /* @kind spacing */
  --sizes-spacing-sp-16: var(--scale-16); /* @kind spacing */
  --sizes-spacing-sp-20-2: var(--scale-20-2); /* @kind spacing */
  --sizes-spacing-sp-20: var(--scale-20); /* @kind spacing */
  --sizes-spacing-sp-24: var(--scale-24); /* @kind spacing */
  --sizes-spacing-sp-28: var(--scale-28); /* @kind spacing */
  --sizes-spacing-sp-2: var(--scale-2); /* @kind spacing */
  --sizes-spacing-sp-32: var(--scale-32); /* @kind spacing */
  --sizes-spacing-sp-36: var(--scale-36); /* @kind spacing */
  --sizes-spacing-sp-40: var(--scale-40); /* @kind spacing */
  --sizes-spacing-sp-42: var(--scale-42); /* @kind spacing */
  --sizes-spacing-sp-48-2: var(--scale-48-2); /* @kind spacing */
  --sizes-spacing-sp-48: var(--scale-48); /* @kind spacing */
  --sizes-spacing-sp-4: var(--scale-4); /* @kind spacing */
  --sizes-spacing-sp-52: var(--scale-52); /* @kind spacing */
  --sizes-spacing-sp-60: var(--scale-60); /* @kind spacing */
  --sizes-spacing-sp-8-2: var(--scale-8); /* @kind spacing */
  --sizes-spacing-sp-80: var(--scale-80); /* @kind spacing */
  --sizes-spacing-sp-8: var(--scale-8-2); /* @kind spacing */
  --sizes-stroke-str-1-2: var(--scale-1-2); /* @kind spacing */
  --sizes-stroke-str-1: var(--scale-1); /* @kind spacing */
  --sizes-stroke-str-2-2: var(--scale-2-2); /* @kind spacing */
  --sizes-stroke-str-2: var(--scale-2); /* @kind spacing */
  --stroke-weight-1-33-2: 1.333; /* @kind spacing */
  --stroke-weight-1-33-3: 1.333; /* @kind spacing */
  --stroke-weight-1-33: 1.333; /* @kind spacing */
  --type-font-family-body: "Archivo"; /* @kind font */
  --type-font-family-headings: "M8 Display"; /* @kind font */
  --type-font-weight-bold: "bold"; /* @kind other */
  --type-font-weight-medium: "medium"; /* @kind other */
  --type-font-weight-regular: "regular"; /* @kind other */
  --type-font-weight-semibold: "semibold"; /* @kind other */
}

:root[data-theme="dark"], .dark {
  --background-primary: rgb(37,39,54); /* @kind color */
  --color-text-body-body-prim-2: var(--color-neutral-black-3); /* @kind color */
  --icon-default: var(--graphite-300); /* @kind color */
  --sizes-radius-rd-2-2: 0; /* @kind radius */
  --sizes-radius-rd-4-2: 0; /* @kind radius */
  --sizes-radius-rd-8: 0; /* @kind radius */
  --sizes-spacing-sp-16: var(--scale-16); /* @kind spacing */
  --sizes-spacing-sp-20: var(--scale-20); /* @kind spacing */
  --sizes-spacing-sp-48: var(--scale-48); /* @kind spacing */
  --sizes-spacing-sp-8-2: var(--scale-8); /* @kind spacing */
  --sizes-stroke-str-1-2: var(--scale-1-2); /* @kind spacing */
  --sizes-stroke-str-2-2: var(--scale-2-2); /* @kind spacing */
}

/* tokens/figma/fig-typography.css */
/* No TEXT/EFFECT styles in this file. */

/* tokens/colors.css */
/* moat8 — Color tokens
   ----------------------------------------------------------------------
   Lifted verbatim from the landing codebase (src/app/globals.css @theme).
   Near-monochrome: warm ink/charcoal on warm off-white paper, with ONE
   deliberate orange accent used sparingly at high contrast. No gradients,
   no glow, no second hue.

   Naming: base palette first (raw values), then semantic aliases that the
   components actually reference. Prefer the semantic names in new work. */

:root {
  /* ── Base palette ───────────────────────────────────────────────── */

  /* Dark surfaces (warm-tinted, not pure neutral) */
  --ink: #141413;        /* primary dark surface — page background */
  --jet: #000000;        /* pure black — deepest panels */
  --surface: #1d1f20;    /* raised card on dark */
  --surface-2: #1b1b1a;  /* inset / nested panel on dark */
  --border: #2d2e32;     /* hairline on dark */
  --graphite: #2d3036;   /* charcoal — body text on light, dim chrome */

  /* Light surfaces (warm off-white, never pure #fff for fields) */
  --paper: #f9f9f9;      /* primary light surface / text on dark */
  --paper-2: #f0efed;    /* secondary light surface, hover on white */
  --white: #ffffff;      /* pure white — cards on paper2 */

  /* Accent — the single brand hue. Use sparingly. */
  --accent: #ff935d;          /* moat8 orange */
  --accent-strong: #ff712a;   /* pressed / hover accent */

  /* Text neutrals */
  --muted: #a4a9b8;      /* secondary text on dark */
  --faint: #707379;      /* tertiary / kicker text */
  --mist: #bac0cc;       /* body text on dark cards */

  /* ── Semantic aliases ───────────────────────────────────────────── */

  /* Surfaces */
  --surface-page: var(--ink);
  --surface-page-black: var(--jet);
  --surface-card-dark: var(--surface);
  --surface-card-light: var(--white);
  --surface-page-light: var(--paper);
  --surface-page-light-2: var(--paper-2);
  --surface-inset-dark: var(--surface-2);

  /* Text */
  --text-on-dark: var(--paper);
  --text-on-light: var(--ink);
  --text-secondary-dark: var(--muted);
  --text-secondary-light: var(--graphite);
  --text-tertiary: var(--faint);
  --text-accent: var(--accent);

  /* Lines & strokes */
  --border-on-dark: var(--border);
  --border-on-light: rgba(20, 20, 19, 0.1);
  --border-strong-light: rgba(20, 20, 19, 0.3);

  /* Interaction */
  --accent-hover: var(--accent-strong);
  --selection-bg: var(--accent);
  --selection-fg: var(--ink);
}

/* tokens/typography.css */
/* moat8 — Typography tokens + scale
   ----------------------------------------------------------------------
   Display : M8 Display (h1–h5, big numerals)  — weight 400 only
   Body    : Archivo (h6–h8, body)
   Mono    : JetBrains Mono (numbers, code, labels)

   Scale lifted from the Figma UI-kit (localmoat8 › Typography) as encoded
   in the landing codebase. Headings are left-aligned, tight leading,
   slightly positive tracking on display. Build hierarchy with SIZE and
   WEIGHT, not color.

   The .h1–.h8 and .b-* classes below are the literal class API the
   landing site uses — reuse them in components, cards and kits. */

:root {
  --font-display: "M8 Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Heading sizes (px) */
  --fs-h1: 72px;  --lh-h1: 72px;
  --fs-h2: 42px;  --lh-h2: 40px;
  --fs-h3: 32px;  --lh-h3: 40px;
  --fs-h4: 24px;  --lh-h4: 28px;
  --fs-h5: 16px;  --lh-h5: 18px;
  --fs-h6: 14px;  --lh-h6: 16px;  /* uppercase eyebrow */
  --fs-h7: 12px;  --lh-h7: 16px;  /* uppercase kicker */
  --fs-h8: 16px;  --lh-h8: 16px;

  /* Body sizes (px) */
  --fs-body-xxxl: 24px; --lh-body-xxxl: 32px;
  --fs-body-xxl: 24px;  --lh-body-xxl: 32px;
  --fs-body-xl: 20px;   --lh-body-xl: 28px;
  --fs-body-l: 16px;    --lh-body-l: 24px;
  --fs-body-m: 14px;    --lh-body-m: 24px;
  --fs-body-s: 12px;    --lh-body-s: 16px;

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
}

/* ── Display family helpers ──────────────────────────────────────────── */
.font-display,
.h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-display);
}
.h1, .h2, .h3, .h4, .h5 { font-weight: 400; }
.font-display { letter-spacing: 0.01em; }
.font-mono { font-family: var(--font-mono); }
.font-body { font-family: var(--font-body); }

/* ── Heading scale ───────────────────────────────────────────────────── */
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: 0.01em; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: 0.01em; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 0.01em; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: -0.3px; }
.h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }

.h6 {
  font-size: var(--fs-h6); line-height: var(--lh-h6);
  font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase;
  font-family: var(--font-body);
}
.h7 {
  font-size: var(--fs-h7); line-height: var(--lh-h7);
  font-weight: 400; letter-spacing: 1px; text-transform: uppercase;
  font-family: var(--font-body);
}
.h8 {
  font-size: var(--fs-h8); line-height: var(--lh-h8);
  font-weight: 500; font-family: var(--font-body);
}

/* ── Body scale ──────────────────────────────────────────────────────── */
.b-xxxl { font-size: 24px; line-height: 32px; font-weight: 500; }
.b-xxl  { font-size: 24px; line-height: 32px; font-weight: 400; }
.b-xl   { font-size: 20px; line-height: 28px; font-weight: 500; }
.b-l    { font-size: 16px; line-height: 24px; font-weight: 400; }
.b-m    { font-size: 14px; line-height: 24px; font-weight: 500; letter-spacing: -0.03em; }
.b-s    { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.03em; }

/* ── Section eyebrow / kicker (Figma h6 / h7) ───────────────────────── */
.eyebrow {
  font-size: 14px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase;
  font-family: var(--font-body);
}
.kicker {
  font-size: 12px; line-height: 16px; font-weight: 400;
  letter-spacing: 1px; text-transform: uppercase;
  font-family: var(--font-body);
}

/* tokens/spacing.css */
/* moat8 — Spacing, radius, stroke, elevation & motion
   ----------------------------------------------------------------------
   Sharp and engineered: minimal radius, hairline strokes (drawn as inset
   box-shadows so they don't grow the box), flat surfaces with restrained
   shadows used only on hover. Generous whitespace on a strong grid. */

:root {
  /* ── Spacing scale (px) — 4px base unit ─────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 42px;   /* card inner padding (lg) */
  --space-15: 60px;   /* section rhythm */
  --space-20: 80px;   /* section padding */
  --space-30: 120px;  /* big section padding */

  /* Layout */
  --container-max: 1440px;
  --container-content: 1360px;
  --header-h: 80px;

  /* ── Radius — minimal, engineered ───────────────────────────────── */
  --radius-none: 0px;
  --radius-sm: 0px;    /* buttons, inputs, chips, inner tiles (Figma "rounded") */
  --radius-md: 0px;    /* stack layer tiles */
  --radius-lg: 0px;   /* cards (Figma "rounded-xl") */
  --radius-full: 999px;/* number streak pills, avatars */

  /* ── Stroke widths ──────────────────────────────────────────────── */
  --stroke-1: 1px;
  --stroke-2: 2px;

  /* ── Elevation ──────────────────────────────────────────────────────
     Edges are inset shadows (inside-stroke, no box growth). Real drop
     shadows appear only on hover, warm-tinted and tight. */
  --edge-light: inset 0 0 0 1px var(--border-on-light);
  --edge-light-card: inset 0 0 0 1px #dddddd; /* @kind shadow */
  --edge-dark: inset 0 0 0 1px var(--border);
  --edge-accent: inset 0 0 0 1px var(--accent);

  --shadow-card-light: 0 24px 48px -26px rgba(20, 20, 19, 0.5);
  --shadow-card-dark: 0 24px 48px -26px rgba(0, 0, 0, 0.85);
  --shadow-header: 0 10px 30px -14px rgba(0, 0, 0, 0.25);

  /* ── Motion — minimal, functional ───────────────────────────────── */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 0.2s;  /* @kind other */
  --dur-base: 0.35s; /* @kind other */
  --dur-slow: 0.7s;  /* @kind other */
  --lift-hover: -6px;   /* card hover translateY */
}

/* tokens/base.css */
/* moat8 — Base / reset + shared effect utilities
   ----------------------------------------------------------------------
   Global resets, page defaults, and the small set of interaction
   utilities the components and UI kits share (card lift, scroll reveal,
   accordion). All motion is wrapped in prefers-reduced-motion. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

a { color: inherit; }

/* ── Card hover lift ─────────────────────────────────────────────────
   Inset 1px edge by default; real shadow + accent edge appear on hover. */
.card-rise {
  transition:
    transform var(--dur-base) var(--ease-out-soft),
    box-shadow var(--dur-base) ease,
    border-color var(--dur-base) ease;
  box-shadow: inset 0 0 0 1px var(--card-edge, transparent);
}
.card-rise:hover { transform: translateY(var(--lift-hover)); }
.card-rise.on-light:hover {
  box-shadow:
    inset 0 0 0 1px var(--card-edge, transparent),
    var(--shadow-card-light);
}
.card-rise.on-dark:hover {
  box-shadow:
    inset 0 0 0 1px var(--accent),
    var(--shadow-card-dark);
  border-color: var(--accent);
}

/* ── Button sheen — a single gloss sweep on hover ───────────────────── */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
}
.btn-shine:hover::after { transform: translateX(130%); }

/* ── Scroll reveal (used by UI kits) ────────────────────────────────── */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes accordion-in {
  from { opacity: 0; transform: translateY(-9px); }
  to { opacity: 1; transform: translateY(0); }
}
.accordion-body { animation: accordion-in 0.32s var(--ease-out-soft) both; }

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; will-change: opacity, transform; }
  [data-reveal].is-visible {
    animation: reveal-up 0.7s var(--ease-out-soft) var(--reveal-delay, 0ms) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}