/* ─────────────────────────────────────────────────────────
   BLVCK ROSE COLLECTIVE — DESIGN TOKENS
   Monochrome by design. The work is the only colour on the
   page, so the interface stays black, white, and grain.
   Created: 2026-07-19
───────────────────────────────────────────────────────── */

:root {
  /* ── Surface ── */
  --ink:            #000000;   /* true black — page ground */
  --ink-raised:     #0A0A0B;   /* cards sitting on the ground */
  --ink-elevated:   #131315;   /* hover / active card */
  --hairline:       #1F1F22;   /* borders, dividers */
  --hairline-bright:#2E2E33;   /* hover borders */

  /* ── Type ── */
  --bone:           #F4F2ED;   /* primary text, slightly warm white */
  --bone-muted:     #9A968E;   /* secondary text */
  /* Was #5E5B57, which measured 3.11:1 on the black ground — under the 4.5:1
     WCAG AA floor, and it carries the small print: booking instructions,
     aftercare, the cancellation policy, review counts.
     Set against the LIGHTEST surface it lands on, not the page ground. A first
     pass tuned it to 4.65:1 on pure black, which still failed at 4.38:1 on the
     review cards and 4.11:1 on a hovered card — this colour is used on all
     three. Now: 5.20:1 on --ink, 4.90:1 on --ink-raised, 4.59:1 on
     --ink-elevated. The warm bias is preserved exactly (same channel offsets,
     -3 and -7 off red); only lightness moved. */
  --bone-faint:     #817E7A;   /* labels, meta, captions */

  /* ── Accent: ROSE GOLD ──
     Taken from the barber chairs in the shop, and Matt's own preference.
     The BRANDING stays black and white — rose gold is the metal that
     runs through the interface: hairlines, rules, active states, stars,
     hover borders. Used as a thin edge, never as a fill. */
  --rose:           #C08A72;
  --rose-bright:    #D9A88F;
  --rose-deep:      #8E6250;

  /* Channel triplets so every translucent rose in the stylesheet derives from
     these three values instead of being retyped. Before this, the accent was
     hand-written at 12 different alphas across main.css — change the brand
     colour and those would not have followed. rgba(var(--x), a) works
     everywhere; relative-colour syntax does not, and this is a client site. */
  --rose-rgb:        192, 138, 114;
  --rose-bright-rgb: 217, 168, 143;
  --rose-deep-rgb:   142, 98, 80;
  --rose-soft:      rgba(var(--rose-rgb), 0.16);
  --rose-hair:      rgba(var(--rose-rgb), 0.34);
  --rose-glow:      rgba(var(--rose-rgb), 0.22);

  /* Gradient used for rules and the mark's edge — reads as brushed metal. */
  --rose-sheen: linear-gradient(90deg,
      rgba(var(--rose-rgb), 0)   0%,
      rgba(var(--rose-bright-rgb), 0.9) 30%,
      rgba(var(--rose-deep-rgb), 0.9)   62%,
      rgba(var(--rose-rgb), 0)   100%);

  /* ── Side identity ──
     Barber tint is ROSE GOLD, taken from the actual chairs in the shop —
     black leather on rose gold frames, under hexagon LEDs, reflected in a
     gloss black floor. That metal is the strongest brand signature in the
     room, so the barber side borrows it rather than inventing a colour.
     Tattoo side stays warm bone: gallery walls, framed work, no metal. */
  --barber-tint:    #C08A72;   /* rose gold — the chairs */
  --barber-glow:    rgba(var(--rose-rgb), 0.22);
  --tattoo-tint:    #D8CFC4;   /* warm bone — gallery light */

  /* ── Type scale ── */
  /* ── Type, matched to their own logo ──
     The wordmark is a bold geometric grotesque; "·COLLECTIVE·" is
     letterspaced caps; the BR mark is blackletter. Three voices, so the
     site uses three:
       display  → headlines, echoing the BLACK ROSE wordmark
       mono     → labels and eyebrows, echoing ·COLLECTIVE· tracking
       black    → the BR monogram only. Used sparingly; blackletter at
                  body size is unreadable and looks like a metal poster.
     Bodoni was here first and was wrong — an elegant fashion serif has
     nothing to do with this brand. */
  --font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-black:   'Pirata One', 'UnifrakturMaguntia', serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.875rem;
  /* Scale re-cut for Archivo Black. The old ramp was set for a narrow
     didone; a black grotesque at the same sizes ran to four lines on a
     360px screen and swallowed the viewport. */
  --text-3xl:  clamp(1.85rem, 5.5vw, 3.25rem);
  --text-4xl:  clamp(2.15rem, 7.5vw, 5rem);

  --tracking-wide:  0.14em;
  --tracking-wider: 0.28em;

  /* ── Space ── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-8: 3rem;     --sp-10: 4rem;    --sp-12: 6rem;
  --sp-16: 8rem;

  /* ── Shape ── */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* ── Motion ──
     Slow and weighted. Nothing bounces; this is a gallery. */
  --dur-fast: 220ms;
  --dur-mid:  420ms;
  --dur-slow: 780ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout ── */
  --w-wide:   1440px;
  --w-normal: 1180px;
  --w-text:   68ch;
  --header-h: 72px;
}

/* The site is black-first. A light theme would fight the brand,
   so we opt out of the browser's light-mode assumptions entirely. */
:root { color-scheme: dark; }