/* =========================================================
   Ledger by Post AI — Design Tokens
   Map these names 1:1 to Webflow style classes / variables.
   ========================================================= */

:root {
  /* ---------- Color: neutrals (cool-warm hybrid, near-white) ---------- */
  --color-bg:            #fafafa;        /* page background */
  --color-bg-soft:       #f4f4f3;        /* alt section bg */
  --color-bg-sunken:     #efeeec;        /* trust strip, subtle blocks */
  --color-surface:       #ffffff;        /* cards, raised */
  --color-border:        #e6e5e2;        /* hairlines */
  --color-border-strong: #d6d4cf;        /* inputs, dividers */
  --color-text:          #15161a;        /* body */
  --color-text-strong:   #0a0a0c;        /* headings */
  --color-text-muted:    #5b5d63;        /* secondary copy */
  --color-text-subtle:   #8a8c92;        /* tertiary, captions */

  /* ---------- Color: brand (ink blue) ---------- */
  --color-brand:         oklch(38% 0.13 258);   /* primary */
  --color-brand-strong:  oklch(32% 0.13 258);   /* hover / pressed */
  --color-brand-soft:    oklch(94% 0.025 258);  /* tinted backgrounds */
  --color-brand-ink:     oklch(22% 0.10 258);   /* deepest, footer band */
  --color-on-brand:      #ffffff;

  /* ---------- Color: semantic accents (sparingly used) ---------- */
  --color-success:       oklch(48% 0.10 155);
  --color-warn:          oklch(60% 0.13 70);
  --color-danger:        oklch(52% 0.16 25);

  /* ---------- Type ---------- */
  --font-sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs:    12px;
  --fs-sm:    13.5px;
  --fs-base:  15.5px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   60px;
  --fs-6xl:   76px;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ---------- Layout ---------- */
  --container:        1200px;
  --container-narrow: 720px;     /* legal/support pages */
  --container-wide:   1320px;
  --gutter:           clamp(20px, 4vw, 40px);

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 17, 24, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 17, 24, 0.05), 0 1px 2px rgba(15, 17, 24, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 17, 24, 0.07), 0 2px 6px rgba(15, 17, 24, 0.04);
  --shadow-lg: 0 24px 48px -12px rgba(15, 17, 24, 0.18), 0 8px 16px rgba(15, 17, 24, 0.06);
  --shadow-xl: 0 40px 80px -20px rgba(20, 30, 70, 0.22), 0 12px 28px rgba(15, 17, 24, 0.08);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 420ms;

  /* ---------- Z ---------- */
  --z-nav: 50;
  --z-modal: 100;
}