/* ==========================================================================
   BREWED IN PIXELS — design tokens v2
   Confirmed 2026-09-04. NOT YET LIVE — website/ still runs on styles.css.
   Every custom property is prefixed --bp- so this file can be loaded
   alongside the current stylesheet without overriding anything.
   ========================================================================== */

:root{
  /* ---- colour: pure white, black, orange. no cream. ---- */
  --bp-white:#FFFFFF;
  --bp-ink:#0A0A0A;
  --bp-orange:#FF4D00;
  --bp-paper:#F1F1F0;      /* the ONLY tint. orange is an accent, never a surface. */
  --bp-dim:#6E7379;        /* secondary text */
  --bp-faint:#9AA0A5;      /* tertiary text, captions */
  --bp-hair:rgba(10,10,10,.055);  /* hairline dividers. NOT for borders. */
  --bp-rule:rgba(10,10,10,.05);   /* ground guides. barely there on purpose. */
  --bp-rule-dot:rgba(10,10,10,.10); /* the marker where a guide meets an edge */
  --bp-good:#00C853;

  /* ---- type: two families. never a third. ---- */
  --bp-display:Archivo,system-ui,sans-serif;
  --bp-body:Inter,system-ui,sans-serif;
  --bp-wdth:112;           /* Archivo width axis. the whole identity. */
  --bp-display-weight:800;
  --bp-track-display:-.028em;
  --bp-lbl-size:10.5px;    /* the "technical" label. replaces Space Mono. */
  --bp-lbl-track:.145em;
  --bp-lbl-weight:600;

  /* ---- motion: slow and decelerating. not .2s ease. ---- */
  --bp-ease:cubic-bezier(.12,.23,.5,1);
  --bp-dur:.5s;

  /* ---- elevation: 5-layer ramps. these replace ALL borders. ---- */
  --bp-lift-1:
    0 1px 2px rgba(10,10,10,.04),
    0 3px 8px rgba(10,10,10,.03);
  --bp-lift-2:
    5px 14px 33px rgba(10,10,10,.06),
    20px 56px 59px rgba(10,10,10,.05),
    46px 126px 80px rgba(10,10,10,.03),
    81px 223px 95px rgba(10,10,10,.01);
  --bp-lift-3:
    5px 14px 33px rgba(10,10,10,.25),
    20px 56px 59px rgba(10,10,10,.20),
    46px 126px 80px rgba(10,10,10,.12),
    81px 223px 95px rgba(10,10,10,.09),
    127px 349px 104px rgba(10,10,10,.06);
  --bp-glow:
    0 0 0 1px rgba(255,77,0,.20),
    0 2px 8px rgba(255,77,0,.24),
    0 8px 24px rgba(255,77,0,.22),
    0 18px 52px rgba(255,77,0,.16);
  --bp-glow-hover:
    0 0 0 1px rgba(255,77,0,.28),
    0 4px 14px rgba(255,77,0,.34),
    0 14px 40px rgba(255,77,0,.30),
    0 30px 80px rgba(255,77,0,.22);

  /* ---- radius: big on surfaces, full pill on controls ---- */
  --bp-r-card:24px;
  --bp-r-panel:64px;
  --bp-r-pill:200px;
  --bp-r-sm:12px;
}

/* --------------------------------------------------------------------------
   MIGRATION MAP — old token (styles.css) → new
   --paper #FAF8F5 ......... --bp-white   (cream dropped entirely)
   --cream #F0EDE8 ......... --bp-paper #F1F1F0
   --signal ................ --bp-orange  (unchanged, #FF4D00)
   --ink ................... --bp-ink     (unchanged, #0A0A0A)
   --grey #999 ............. --bp-dim  #6E7379
   --grey-light #C4C4C4 .... --bp-faint #9AA0A5
   --border-soft/medium .... DELETE. use --bp-lift-*. no borders anywhere.
   --shadow-sm/md/lg ....... --bp-lift-1 / --bp-lift-2 / --bp-lift-3
   --radius-md 12px ........ --bp-r-sm
   --radius-lg 16px ........ --bp-r-card 24px
   --radius-pill 100px ..... --bp-r-pill 200px
   --ease-out .............. --bp-ease (slower, different curve)
   'Space Grotesk' ......... var(--bp-display) Archivo / var(--bp-body) Inter
   'Space Mono' ............ DELETE. use .bp-label (case + tracking).
   'Caveat' ................ DELETE.
   -------------------------------------------------------------------------- */