/*
 * Design Tokens — Shear Madness Barbering
 * Direction: "flash sheet & olive walls" — the shop's own tattoo-flash badge
 * (black line-art pin-up, banner ribbon, hexagonal frame) printed on bone
 * paper, over the real sage-olive walls of the loft.
 *
 * Every colour here is lifted from something that actually exists:
 *   - olive  #3E4A38  the wall colour of the loft (see images/loft.jpg)
 *   - rust   #AA3D1D  the accent already used on shearmadnessbyarika.com
 *   - orange #C74300  their brighter accent, kept for hover states only
 *   - bone   #F4EFE6  the paper the flash badge is drawn on
 * Nothing was invented for the palette.
 *
 * Deliberately NOT the Barber Haus direction (charcoal + brass + condensed
 * caps). Two barbershops on this platform must not read as siblings, so this
 * one is light, warm and slab-lettered where that one is dark and condensed.
 *
 * Flat and hard-edged: no gradients, no shadows-as-decoration, no pill
 * shapes, no hover-lift. Separation comes from SPACE and from changes of
 * ground (bone / bone-shade / olive), not from printed rules. Rules survive
 * only where they do a job: buttons, form fields, the checkbox marks, the
 * price leaders, and one faint hairline between FAQ rows.
 *
 * Every visual property is controlled from this file.
 */

/* Display: the sign lettering. One weight, very wide, very heavy. */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/alfa-slab-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Text: Archivo, a grotesque drawn for newsprint and signage. Chosen over the
   platform stack because -apple-system under a heavy Egyptian slab reads as a
   system default, not as a decision. Archivo shares the slab's American
   job-printing lineage, and its width axis gives the "shop label" register a
   genuinely condensed cut instead of faked tracking. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colors — Ink & Paper. Ink carries a green cast so black line art sits
     with the olive rather than fighting it. */
  --color-ink: #181C16;
  --color-ink-soft: #3F463C;
  --color-ink-faint: #5A6156;   /* 5.6:1 on paper, 4.8:1 on paper-shade */
  --color-paper: #F4EFE6;
  --color-paper-shade: #E7DFD1;

  /* Colors — Brand (the loft's olive-sage wall) */
  --color-brand: #3E4A38;
  --color-brand-dark: #2A3326;
  --color-brand-light: #5A6A50;

  /* Colors — Signal (their real rust; used sparingly) */
  --color-signal: #AA3D1D;
  --color-signal-dark: #86300F;
  --color-signal-bright: #C74300;
  /* The rust lifted far enough to carry small text on the near-black photo
     viewer backdrop. #C74300 there measures 3.48:1, which fails AA for body
     sizes; this is 5.11:1 on #181C16 and still reads as the same accent.
     Use ONLY on the ink backdrop. */
  --color-signal-on-ink: #E8622F;

  /* Colors — On dark surfaces */
  --color-paper-on-dark: #F4EFE6;
  --color-faint-on-dark: rgba(244, 239, 230, 0.74);
  --color-ink-on-signal: #F4EFE6;

  /* Colors — Rules. Used sparingly; see the note at the top of this file. */
  --color-rule: #181C16;          /* buttons, form fields, checkbox marks */
  --color-rule-soft: #CFC6B4;
  --color-rule-faint: rgba(24, 28, 22, 0.10);   /* the only hairline tone */
  --color-rule-on-dark: rgba(244, 239, 230, 0.20);

  /* Colors — Forms & status */
  --color-success: #3F6B3A;
  --color-error: #AA3D1D;
  --color-error-light: #F5E2DA;

  /* Typography — two registers, on purpose:
     display = sign lettering (heavy slab, the badge's voice)
     body    = shop label (Archivo; condensed caps for the label register) */
  --font-display: 'Alfa Slab One', 'Rockwell', 'Courier Bold', Georgia, serif;
  --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;   /* 17px — the template's 16px reads cramped in
                               this much white space */
  --text-lg: 1.25rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.25rem;
  --text-6xl: 4.25rem;

  /* Display sizes are FLUID, not stepped. Alfa Slab is exceptionally wide:
     "TRANSFORMATION" measures 10.849x its own font-size in this face at this
     tracking. A fixed --text-6xl let that one word exceed its column, and the
     browser's last resort was to break it mid-word ("TRANSFORMATIO / N").
     The hero headline is now sized from its own column with a container query
     (see .hero h1 in components.css); --display-hero is the fallback, clamped
     low enough to be safe in the narrow two-column case. The h1 rule in
     global.css forbids the mid-word break outright.
     Change the display copy, re-check these numbers. */
  --display-hero: clamp(1.5rem, 8vw, 3.1rem);
  --display-section: clamp(1.875rem, 3.6vw, 2.875rem);
  --display-sub: clamp(1.375rem, 2.2vw, 1.75rem);

  /* Alfa Slab is a heavy Egyptian — it needs more leading than a condensed
     face and slightly negative tracking at display sizes. */
  --leading-tight: 1.06;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --leading-relaxed: 1.75;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 400;          /* Alfa Slab One ships one weight */
  --weight-display-heavy: 400;

  --tracking-display: -0.01em;    /* heavy slab caps: pull in, don't open up */
  --tracking-caps: 0.02em;
  --tracking-label: 0.12em;       /* the "shop label" register */

  /* Archivo's width axis. The label register gets a real condensed cut, which
     is what a painted shop label actually is; tracking alone only fakes it. */
  --stretch-label: 88%;
  --stretch-normal: 100%;

  /* Spacing */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;
  --space-5xl: 9rem;

  /* Vertical rhythm between sections. This is the main lever for how open the
     page feels — it steps up on wider screens rather than staying fixed. */
  --space-section: 4rem;

  /* Layout */
  --container-max: 72rem;
  --container-wide: 84rem;
  --container-narrow: 44rem;
  --container-padding: 1.25rem;

  /* Rules & corners — hard edges, printed weight */
  --rule-heavy: 3px;
  --rule: 2px;
  --rule-hairline: 1px;
  --radius: 0;

  /* Transitions. Motion here is restrained on purpose: the art direction is a
     flat printed sheet, so nothing lifts, floats or glows. The only motion is
     a short reveal that brings the photographs in as you reach them, and
     ground/colour changes on hover. */
  --transition-fast: 120ms ease;
  --transition-reveal: 620ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(170, 61, 29, 0.5);
  --focus-ring-offset: 0 0 0 2px var(--color-paper), var(--focus-ring);
}

@media (min-width: 48rem) {
  :root {
    --space-section: 6.5rem;
    --container-padding: 2rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --space-section: 8rem;
    --container-padding: 2.5rem;
  }
}