/* ============================================================
   Home Trades — Shared design tokens
   ------------------------------------------------------------
   Type, spacing, radii, shadows, motion. Shared by every
   surface (marketing + app). Per-surface palettes (color, ink,
   borders, brand) live in palette-marketing.css /
   palette-app.css and are scoped by body class.

   Edit this file to retune the system globally.
   ============================================================ */

:root {
  /* ---------- Type ---------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — 1.200 minor third */
  --t-xs: 0.75rem;     /* 12 — meta, labels */
  --t-sm: 0.8125rem;   /* 13 — body small */
  --t-base: 0.875rem;  /* 14 — app body */
  --t-md: 1rem;        /* 16 — marketing body */
  --t-lg: 1.125rem;    /* 18 */
  --t-xl: 1.375rem;    /* 22 — section heads */
  --t-2xl: 1.75rem;    /* 28 — page titles */
  --t-3xl: 2.25rem;    /* 36 — display small */
  --t-4xl: 3rem;       /* 48 — display */
  --t-5xl: 4rem;       /* 64 — hero */
  --t-6xl: 5.5rem;     /* 88 — hero giant */

  --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-mono: -0.01em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Spacing — 4px base ---------- */
  --s-0: 0;
  --s-px: 1px;
  --s-0_5: 2px;
  --s-1: 4px;
  --s-1_5: 6px;
  --s-2: 8px;
  --s-2_5: 10px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- Radii ---------- */
  --r-sm: 4px;     /* inputs, badges */
  --r-md: 6px;     /* buttons, cards-inner */
  --r-lg: 10px;    /* cards */
  --r-xl: 14px;    /* sheets, large cards */
  --r-2xl: 20px;   /* hero illustrations */
  --r-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 0 rgba(15, 23, 42, 0.03);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 8px 24px -8px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-focus: 0 0 0 3px var(--ring, rgba(30, 64, 175, 0.25));

  /* ---------- Borders ---------- */
  --border-width: 1px;
  --border-width-2: 2px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* ---------- Z ---------- */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 50;
  --z-modal: 100;
  --z-toast: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ============================================================
   Base resets — apply on every surface
   ============================================================ */
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }

/* Numeric tabular for tables, totals, IDs */
.num, .tabular { font-variant-numeric: tabular-nums; }

/* Mono utility */
.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }