/* ============================================================
   Chasin' Tailz Crawfish — Design Tokens
   Mobile-first. Every value here; no raw hex in components.
   ============================================================ */

:root {
  /* ---- Spacing: 4dp baseline grid ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* default screen edge margin */
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Type scale (mobile-first) ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  34px;
  --text-5xl:  clamp(40px, 12vw, 84px);
  --text-6xl:  clamp(52px, 15vw, 132px);

  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Touch ---- */
  --touch-min: 48px;

  /* ---- Brand palette ---- */
  --brand-crimson:     #C2222B;   /* the sign red */
  --brand-crimson-hot: #E4433C;
  --brand-crimson-dim: #7E1319;
  --brand-cayenne:     #F0A03C;   /* boil gold */
  --brand-cayenne-dim: #A96A1E;
  --brand-swamp:       #24483A;
  --brand-cream:       #F6EFE3;
  --brand-shell:       #D8CBB8;

  /* ---- Semantic surfaces (site runs dark by design) ---- */
  --bg:        #120C0A;
  --bg-elev:   #1B1310;
  --surface:   #241915;
  --surface-2: #30211B;
  --scrim:     rgba(10, 6, 5, 0.72);

  --text:      #F6EFE3;
  --text-2:    #D8CBB8;
  --text-3:    #9C8B7C;
  --text-on-accent: #FFF6EA;

  --border:      rgba(246, 239, 227, 0.14);
  --border-soft: rgba(246, 239, 227, 0.08);
  --border-hot:  rgba(240, 160, 60, 0.42);

  --accent:      var(--brand-cayenne);
  --accent-ink:  #2A1608;

  /* ---- Status ---- */
  --success: #4FB477;
  --warning: #E8A33D;
  --danger:  #E4433C;
  --info:    #5AA9E6;

  /* ---- Safe areas ---- */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* ---- Chrome heights ---- */
  --topbar-h: 56px;
  --tabbar-h: 60px;
  --orderbar-h: 68px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-hot: 0 8px 28px rgba(194, 34, 43, 0.35);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --maxw-prose: 68ch;

  /* ---- Type families ---- */
  --font-display: "Anton", "Haettenschweiler", "Arial Narrow Bold", -apple-system, sans-serif;
  --font-cond: "Barlow Condensed", "Oswald", -apple-system, sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Light-mode visitors still get the intended dark "night boil" look —
   this is a deliberate single-look brand surface, painted explicitly. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}