/* ==========================================================================
   Ironbark Barber Co., Design Tokens (warm-dark heritage)
   Adapted from the barbershop reference pack: espresso + bone + ONE brass
   accent; oversized condensed display caps over real warm-dark photography.
   ========================================================================== */

:root {
  /* ---- Color (warm-dark) --------------------------------------------- */
  --color-bg: #16110D;          /* espresso near-black, page base          */
  --color-surface: #211A14;     /* warm charcoal, cards/bands              */
  --color-surface-2: #2B2118;   /* raised surface                          */
  --color-ink: #EDE4D3;         /* bone / warm cream, primary text         */
  --color-ink-muted: #A7987F;   /* aged parchment, meta/labels             */
  --color-brass: #B8935A;       /* THE accent, brass                       */
  --color-brass-strong: #CDA766;/* polished brass, hover                   */
  --color-border: #382D21;      /* hairline on dark                          */
  --color-on-brass: #17110C;    /* ink on a brass fill                       */

  /* Semantic status (not the accent: these only ever signal form state)     */
  --color-error: #D2705C;       /* 5.1:1 on surface, AA                      */
  --color-ok: #8FBF88;          /* 8.2:1 on surface, AA                      */

  /* Derived roles. Nothing new enters the palette here: each one is mixed
     from the nine locked colours above, so a token change moves everything.  */
  --color-rule: color-mix(in srgb, var(--color-ink-muted) 70%, var(--color-bg));
                                /* 3.4:1 on bg, for rules that carry meaning  */
  --color-seam: var(--color-border);            /* band-change hairline       */
  --color-seam-brass: color-mix(in srgb, var(--color-brass) 35%, transparent);
                                /* the two joins that bracket the heritage    */
  --color-scrim: color-mix(in srgb, var(--color-bg) 60%, transparent);
                                /* header wash over the hero photograph       */

  /* Signature 3D (three-3d.js reads these through a computed-style probe, so
     the WebGL moment can never drift from the stylesheet).                   */
  --color-3d-sweep-top: color-mix(in srgb, var(--color-ink-muted) 62%, var(--color-surface));
  --color-3d-sweep-mid: var(--color-ink-muted);
  --color-3d-sweep-base: var(--color-bg);
  --color-3d-leather: color-mix(in srgb, var(--color-border) 62%, var(--color-bg));
  --color-3d-steel: color-mix(in srgb, var(--color-ink) 55%, var(--color-ink-muted));

  /* ---- Type ----------------------------------------------------------- */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif; /* poster caps */
  --font-body: "Archivo", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --step-eyebrow: 0.8rem;
  --step-small: 0.9375rem;
  --step-body: 1.0625rem;
  --step-lead: clamp(1.15rem, 1.5vw, 1.35rem);
  --step-h4: 1.35rem;
  --step-h3: clamp(1.75rem, 3vw, 2.4rem);
  --step-h2: clamp(2.4rem, 6vw, 4.75rem);
  --step-hero: clamp(3.2rem, 11.5vw, 9.5rem);

  --leading-body: 1.6;
  --measure: 62ch;
  --tracking-eyebrow: 0.22em;
  --tracking-display: 0.005em;

  /* ---- Spacing (8px grid) -------------------------------------------- */
  --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px;
  --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px;
  --space-3xl: 96px; --space-4xl: 128px; --space-5xl: 160px;

  --section-pad: clamp(88px, 11vw, 150px);
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 72px);

  /* ---- Radius (tight, utilitarian) ----------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Shadow (deep, warm) ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.85);

  /* ---- Motion --------------------------------------------------------- */
  --dur-hover: 200ms;
  --ease-hover: cubic-bezier(0.22, 1, 0.36, 1);
}