/* =============================================================================
   Design tokens

   Names follow the Tailwind v4 theme convention (--color-*, --font-*, --text-*,
   --spacing-*). Migrating to Tailwind means moving this block into @theme and
   deleting utilities.css; every class in the markup keeps resolving.
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------------ */
  --color-carbon: #3F433C;   /* body text, dark surfaces, footer */
  --color-taupe:  #8B8877;   /* corporate grey-brown, background planes */
  --color-olive:  #8A8C5C;   /* alternate planes */
  --color-moss:   #586B41;   /* support, hover states */
  --color-brick:  #D98B68;   /* ACCENT ONLY: decision points, underlines */
  --color-brass:  #E6C693;   /* hairlines and labels on dark surfaces */
  --color-ivory:  #F8F5ED;   /* dominant background */

  /* --- Typography --------------------------------------------------------- */
  --font-display: 'Century Gothic', 'Questrial', 'Didact Gothic', sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;

  --text-label: clamp(0.6875rem, 0.68vw, 0.75rem);
  --text-small: clamp(0.875rem, 0.9vw, 0.9375rem);
  --text-body: clamp(1.0625rem, 1.1vw, 1.125rem);
  --text-medium: clamp(1.25rem, 1.5vw, 1.4375rem);
  --text-display: clamp(3rem, 7.4vw, 6.25rem);
  --text-number: clamp(3.5rem, 6.5vw, 5.25rem);

  --leading-none: 1.02;
  --leading-relaxed: 1.6;

  /* --- Spacing: base-4 scale ---------------------------------------------- */
  /* Every step is a multiple of 4px. Step N === N * 4px, same as Tailwind. */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-11: 44px;   /* minimum touch target */
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;

  /* --- Shape -------------------------------------------------------------- */
  /* Brand rule: radii stay between 0 and 4px. No shadows, no blur. */
  --radius-sm: 2px;
  --border-hairline: 1px;

  /* --- Layout ------------------------------------------------------------- */
  --width-wide: 1440px;

  /* --- Motion ------------------------------------------------------------- */
  --ease-draw: cubic-bezier(0.6, 0.02, 0.2, 1);
  --ease-enter: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-fast: 0.2s;
}