/* Thimonz design tokens. Single source of truth for color, type, spacing.
   Bumping any of these cascades to every component. Keep values in sync with
   .stitch/designs/ Tailwind config. */
:root {
  /* Color */
  --bone:           #F4EFE6;
  --bone-soft:      #FBF9F4;
  --charcoal:       #1A1A1F;
  --graphite:       #3A3A40;
  --amber:          #C8842B;
  --amber-soft:     #E0A858;
  --magenta:        #F03BA0;
  --violet:         #6B2BD8;
  --error:          #BA1A1A;

  /* Surface aliases (used by WC overrides) */
  --bg:             var(--bone);
  --bg-soft:        var(--bone-soft);
  --text:           var(--charcoal);
  --text-muted:     rgba(26, 26, 31, 0.65);
  --hairline:       rgba(26, 26, 31, 0.10);

  /* Type */
  --font-display:   "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-italic:    "Newsreader", Georgia, serif;

  --fs-eyebrow:     12px;
  --fs-body:        16px;
  --fs-body-lg:     18px;
  --fs-h3:          24px;
  --fs-h2:          32px;
  --fs-display-md:  48px;
  --fs-display-lg:  60px;
  --fs-display-xl:  80px;
  --fs-colossal:    240px;

  --lh-tight:       1.0;
  --lh-snug:        1.2;
  --lh-body:        1.6;

  --tracking-wide:  0.18em;
  --tracking-tight: -0.02em;
  --tracking-x:     -0.04em;

  /* Spacing */
  --section-pad-y:        128px;
  --section-pad-y-mobile: 80px;
  --gutter:               24px;
  --container-max:        1320px;
  --pad-x-desktop:        64px;
  --pad-x-mobile:         24px;

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-24:   24px;
  --radius-32:   32px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(26, 26, 31, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 26, 31, 0.08);

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:    160ms;
  --t-base:    240ms;
  --t-slow:    480ms;

  /* Header */
  --header-h: 72px;
  --promo-h:  40px;
}

@media (max-width: 768px) {
  :root {
    --section-pad-y: var(--section-pad-y-mobile);
    --fs-display-xl: 56px;
    --fs-display-lg: 44px;
    --fs-display-md: 36px;
    --fs-h2:         28px;
    --fs-h3:         20px;
    --fs-colossal:   120px;
    --pad-x-desktop: var(--pad-x-mobile);
  }
}