/* ==========================================================================
   BRENTWELL DIGITAL — DESIGN TOKENS v1.0 · 1 September 2026
   brentwelldigital.com · @brentwelldigital
   --------------------------------------------------------------------------
   Source of truth for every build. Resolved from the three inputs
   (positioning · category convention · deliberate breaks) per
   The Parameter Manual; category baseline: Professional services.
   Deliberate breaks: SHAPE (45° chamfer, radius 0) and TYPE (no Inter).

   HOUSE RULES (lint these in review):
   1. Red is spent in exactly three places: the logo mark, the primary
      CTA hover fill, and the active-nav marker. Nowhere else.
   2. Radius is 0. A corner is either square or chamfered — never round.
   3. On dark grounds red-500 is 4.07:1 (non-text only, never 4.5:1):
      the mark goes cream (--bw-cream); red never carries text on dark.
   4. No metric ships without its project; no claim without a source.
   5. Every animation has a prefers-reduced-motion path.
   6. Zero unused font families may ship. Subset + self-host, ≤160KB.
   ========================================================================== */

:root {
  /* ---- colour · brand red (#B10105 → #EA0000, 2026-09-01, AA-checked) --- */
  --bw-red-50:  #fbf4f4;
  --bw-red-100: #f4dbdc;
  --bw-red-200: #e8b3b4;
  --bw-red-300: #d88082;   /* accent on dark grounds (large only)          */
  --bw-red-400: #c7484b;
  --bw-red-500: #ea0000;   /* THE red · 4.67:1 on white · 4.55:1 on ground (AA) */
  --bw-red-600: #950104;   /* text-safe accent · 9.19:1 on white           */
  --bw-red-700: #750103;
  --bw-red-800: #550002;
  --bw-red-900: #390002;

  /* ---- colour · neutrals ------------------------------------------------ */
  --bw-ink:        #161619;   /* text + primary button · 17.6:1 on ground   */
  --bw-ink-soft:   #3d3c43;
  --bw-muted:      #5c5b63;   /* secondary text · 6.54:1 on ground          */
  --bw-ground:     #fcfcfc;   /* page (the logo's own ground)               */
  --bw-panel:      #f4f4f2;
  --bw-card:       #ffffff;
  --bw-cream:      #f0efea;   /* text + mark on dark                        */
  --bw-dark:       #101013;   /* inverted sections — the hierarchy device   */
  --bw-dark-raised:#1a1a1f;
  --bw-border:        #dbdad5;
  --bw-border-strong: #8a8984;  /* 3.42:1 — meets non-text contrast         */

  /* ---- colour · semantic (always icon + text, never colour alone) ------- */
  --bw-success: #0e8345;
  --bw-warning: #b45309;
  --bw-error:   #de1b23;
  --bw-info:    #0b6bcb;
  --bw-focus:   #0b6bcb;      /* 2px outline, 2px offset — always visible   */

  /* ---- typography -------------------------------------------------------
     Display+UI: Archivo 500/600 · Body: Source Sans 3 400/500
     Micro-labels: IBM Plex Mono 500, caps, +0.14em
     BREAK: no Inter anywhere (it is on 10 of 23 sites in the reference
     portfolio). All faces open-licensed, self-hosted, subset.          --- */
  --bw-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --bw-font-body:    'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --bw-font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ratio 1.250 · 9 steps + fluid statement (≈5:1 vs body at desktop) */
  --bw-text-xs:   0.8125rem;  /* 13 */
  --bw-text-sm:   1rem;       /* 16 — body default, 1.55, measure 66cpl */
  --bw-text-md:   1.25rem;    /* 20 */
  --bw-text-lg:   1.5625rem;  /* 25 */
  --bw-text-xl:   1.9375rem;  /* 31 */
  --bw-text-2xl:  2.4375rem;  /* 39 */
  --bw-text-3xl:  3.0625rem;  /* 49 */
  --bw-text-4xl:  3.8125rem;  /* 61 */
  --bw-text-5xl:  4.75rem;    /* 76 */
  --bw-text-stmt: clamp(3.5rem, 8vw, 7.25rem);   /* the statement H1 */
  --bw-leading-body: 1.55;
  --bw-leading-head: 1.06;
  --bw-track-display: -0.02em;      /* tighten to -0.035em at stmt size */
  --bw-track-label: 0.14em;
  --bw-measure: 66ch;

  /* ---- spacing · 4px base, gap-first ------------------------------------ */
  --bw-sp-1: 4px;  --bw-sp-2: 8px;  --bw-sp-3: 12px; --bw-sp-4: 16px;
  --bw-sp-5: 20px; --bw-sp-6: 24px; --bw-sp-8: 32px; --bw-sp-10: 40px;
  --bw-sp-12: 48px;
  --bw-sec-1: 64px; --bw-sec-2: 80px; --bw-sec-3: 96px;
  --bw-sec-4: 128px; --bw-sec-5: 160px;

  /* ---- layout ----------------------------------------------------------- */
  --bw-container-sm: 60rem;
  --bw-container-md: 75rem;
  --bw-container-lg: 90rem;
  --bw-grid-gap: 24px;

  /* ---- shape · THE break ------------------------------------------------ */
  --bw-radius: 0px;                    /* the only radius token             */
  --bw-chamfer:      8px;              /* buttons · fields                  */
  --bw-chamfer-card: 12px;             /* cards · panels                    */
  --bw-chamfer-mark: 4px;              /* nav marker                        */
  --bw-cut: polygon(0 0, calc(100% - var(--bw-chamfer)) 0,
            100% var(--bw-chamfer), 100% 100%, 0 100%);
  --bw-cut-card: polygon(0 0, calc(100% - var(--bw-chamfer-card)) 0,
            100% var(--bw-chamfer-card), 100% 100%, 0 100%);

  /* ---- elevation · borders + inversion, shadows only for overlays ------- */
  --bw-shadow-overlay: 0 16px 40px rgba(16,16,19,.18);
  --bw-z-nav: 100; --bw-z-overlay: 200; --bw-z-toast: 300;

  /* ---- motion ----------------------------------------------------------- */
  --bw-dur-micro: 80ms;
  --bw-dur:       180ms;
  --bw-dur-long:  280ms;
  --bw-ease: cubic-bezier(0.2, 0, 0, 1);   /* ease-out                      */

  /* ---- performance budget (CI gates) ------------------------------------
     LCP ≤ 2.0s · INP ≤ 200ms · CLS ≤ 0.05 at p75 · fonts ≤ 160KB woff2 --- */
}

/* ==========================================================================
   EXEMPLAR COMPONENTS — the one button system, the field, the nav marker
   ========================================================================== */

.bw-btn,
.bw-btn--secondary {
  font-family: var(--bw-font-display);
  font-weight: 500;
  font-size: var(--bw-text-sm);
  line-height: 1.2;
  padding: 14px 28px;                /* ≥48px target (AA floor is 24)      */
  min-height: 48px;
  border: 0;
  border-radius: var(--bw-radius);
  clip-path: var(--bw-cut);
  cursor: pointer;
  transition: background-color var(--bw-dur) var(--bw-ease),
              color var(--bw-dur) var(--bw-ease);
}
.bw-btn { background: var(--bw-ink); color: var(--bw-cream); }
.bw-btn:hover { background: var(--bw-red-500); color: #fff; }  /* red spend 2/3 */
.bw-btn--secondary {
  background: transparent; color: var(--bw-ink);
  box-shadow: inset 0 0 0 1.5px var(--bw-ink);  /* border survives clip-path */
}
.bw-btn--secondary:hover { box-shadow: inset 0 0 0 2px var(--bw-ink); }
.bw-btn--tertiary {
  background: none; border: 0; padding: 0;
  font: 500 var(--bw-text-sm) var(--bw-font-display);
  color: var(--bw-ink);
  text-decoration: underline; text-underline-offset: 6px;
}
:is(.bw-btn, .bw-btn--secondary, .bw-btn--tertiary):focus-visible {
  outline: 2px solid var(--bw-focus); outline-offset: 2px;
}

.bw-field {
  font: 400 var(--bw-text-sm) var(--bw-font-body);
  color: var(--bw-ink);
  background: var(--bw-card);
  border: 1.5px solid var(--bw-border-strong);
  border-radius: var(--bw-radius);
  clip-path: var(--bw-cut);
  padding: 12px 16px;
  min-height: 48px;
}
.bw-field:focus-visible { outline: 2px solid var(--bw-focus); outline-offset: 2px; }
.bw-field[aria-invalid="true"] { border-color: var(--bw-error); }
/* error message pattern: icon + text, never colour alone (SC 1.4.1) */

.bw-label {
  font: 500 var(--bw-text-xs) var(--bw-font-mono);
  letter-spacing: var(--bw-track-label);
  text-transform: uppercase;
  color: var(--bw-muted);
}

.bw-nav-link[aria-current="page"]::after {
  content: '';
  display: block; width: 22px; height: 8px; margin-top: 6px;
  background: var(--bw-red-500);                 /* red spend 3/3 */
  clip-path: polygon(0 0, calc(100% - var(--bw-chamfer-mark)) 0,
             100% var(--bw-chamfer-mark), 100% 100%, 0 100%);
}

.bw-card {
  background: var(--bw-card);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius);
  clip-path: var(--bw-cut-card);
}

/* dark section — inversion is the hierarchy, red retires */
.bw-section--dark {
  background: var(--bw-dark);
  color: var(--bw-cream);
}

/* ==========================================================================
   MOTION — reduced-motion is a requirement, not an enhancement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}