/* ===========================================================================
 * borgnames.com — Brand design tokens (Story 1.2)
 * ---------------------------------------------------------------------------
 * THE SINGLE SOURCE OF TRUTH for the site's visual brand. Every later page
 * (Story 2.1 chrome, 2.6 generator/result screen, pillar, supplies, etc.)
 * consumes THESE custom properties and MUST NOT redefine them. No other
 * stylesheet may declare brand color / type / spacing / radius values — they
 * reference the var(--bn-*) tokens defined here.
 *
 * ZERO BUILD. Plain CSS custom properties on :root. No preprocessor syntax,
 * no @import, no external font request. Drop it in with one <link>:
 *
 *     <link rel="stylesheet" href="/brand/tokens.css">
 *
 * Works from file:// and any static host. See docs/BRAND.md for the full
 * handoff contract (every token described + wordmark/jug usage).
 *
 * AESTHETIC: late-night basement-rager / blacklight. Deep ink-violet ground,
 * acid-lime "jug juice" primary, hot-magenta loud highlight for result names,
 * cyan secondary pop. Heavy, chunky, hand-scrawled display type. Deliberately
 * NOT blue/white SaaS. A generated name should look at home in a group chat.
 * Size budget for this file: <= 8 KB (heavily commented for handoff; the
 * actual token payload is tiny). Measured size recorded in docs/BRAND.md.
 * ===========================================================================*/

:root {
  color-scheme: dark;

  /* --- PALETTE -------------------------------------------------------------
   * Contrast vs --bn-bg / --bn-surface verified to WCAG AA (see docs/BRAND.md).
   */
  --bn-bg:            #120d22;  /* page background — deep ink violet           */
  --bn-bg-deep:       #0c081a;  /* darker pit, for footers / recessed areas    */
  --bn-surface:       #1d1636;  /* raised cards / inputs / result panels       */
  --bn-surface-2:     #2a2150;  /* hover / nested surface                      */
  --bn-line:          #3a2f63;  /* hairline borders on the dark ground         */

  --bn-primary:       #c6ff3e;  /* acid lime — primary action / accent / jug   */
  --bn-primary-deep:  #9fd400;  /* pressed / shadow tint of primary            */
  --bn-accent:        #3ef0ff;  /* electric cyan — secondary pop / links       */

  --bn-loud:          #ff3ea5;  /* HOT MAGENTA — the loud result highlight     */
  --bn-loud-2:        #ffd23e;  /* warning-tape yellow — second loud accent    */

  --bn-text:          #ece8ff;  /* body text — near-white violet               */
  --bn-muted:         #a59ccb;  /* muted / secondary text, captions, labels    */
  --bn-on-primary:    #120d22;  /* text/icon ON a lime fill (= --bn-bg)        */
  --bn-on-loud:       #120d22;  /* text/icon ON a magenta fill                 */

  /* --- TYPE SCALE ----------------------------------------------------------
   * System stack only (no web-font request -> never blocks first render).
   * --bn-font-display reaches for the heaviest grotesque a device ships.
   */
  --bn-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bn-font-display: "Arial Black", "Helvetica Neue", system-ui, -apple-system, Roboto, sans-serif;

  --bn-fw-regular: 400;
  --bn-fw-bold:    700;
  --bn-fw-black:   900;   /* display weight                                   */

  /* fluid steps: clamp(min, vw, max) — readable at 390px, grand on desktop.  */
  --bn-text-xs:   0.75rem;                              /* 12px — fine print  */
  --bn-text-sm:   0.875rem;                             /* 14px — captions    */
  --bn-text-base: 1rem;                                 /* 16px — body        */
  --bn-text-lg:   1.125rem;                             /* 18px — lead body   */
  --bn-text-xl:   clamp(1.375rem, 1rem + 1.6vw, 1.75rem);   /* section head   */
  --bn-text-2xl:  clamp(1.75rem, 1.1rem + 2.8vw, 2.5rem);   /* page head      */

  /* DISPLAY — the loud treatment for generated borg names. Large + heavy +   */
  /* tight, legible at 390px (min 2.4rem ~= 38px), huge on the result screen. */
  --bn-display:        clamp(2.4rem, 1.1rem + 7vw, 5rem);
  --bn-display-hero:   clamp(3rem, 1rem + 11vw, 7rem);
  --bn-display-weight: var(--bn-fw-black);
  --bn-display-tracking: -0.03em;
  --bn-display-leading: 0.92;

  --bn-leading-tight: 1.1;
  --bn-leading-body:  1.55;

  /* --- SPACING (4px base step) -------------------------------------------- */
  --bn-space-1:  0.25rem;   /*  4px */
  --bn-space-2:  0.5rem;    /*  8px */
  --bn-space-3:  0.75rem;   /* 12px */
  --bn-space-4:  1rem;      /* 16px */
  --bn-space-5:  1.5rem;    /* 24px */
  --bn-space-6:  2rem;      /* 32px */
  --bn-space-7:  3rem;      /* 48px */
  --bn-space-8:  4rem;      /* 64px */

  /* --- RADII --------------------------------------------------------------- */
  --bn-radius-sm:   6px;    /* chips, small controls          */
  --bn-radius-md:   12px;   /* inputs, cards                  */
  --bn-radius-lg:   20px;   /* result panels, hero surfaces   */
  --bn-radius-pill: 999px;  /* badges, the generate button    */

  /* --- ELEVATION / EFFECTS ------------------------------------------------- */
  --bn-shadow-card: 0 10px 30px -12px rgba(0,0,0,0.7);
  --bn-glow-primary: 0 0 0 2px var(--bn-primary), 0 6px 28px -6px rgba(198,255,62,0.45);
  --bn-glow-loud:    0 6px 30px -6px rgba(255,62,165,0.55);

  /* --- JUG THEMING HOOKS (consumed by an inline brand/jug.svg) -------------
   * Inline the SVG and it picks up these so pages restyle it with CSS alone.
   */
  --bn-jug-body:   var(--bn-primary);
  --bn-jug-line:   var(--bn-primary-deep);
  --bn-jug-cap:    var(--bn-loud);
  --bn-jug-fill:   var(--bn-accent);
}