/*
  Pens Down, look B: "Big Night"

  Rationale. The room at 8pm: a dark, photo-led stage with the real TV show inset, the way a
  venue sells a night rather than a product. Big Shoulders Display carries condensed caps for the
  headline and scoreboard numerals; Archivo carries questions, answers and body. Charcoal ground,
  white ink, amber for the one action and the countdown bulbs; violet is for objects (coins,
  icon fills, rings), never small text. Game buttons sit on a hard offset shadow that presses
  down. Replaces "Public Bar" (rejected 2026-10-03, card 07).

  Fonts (self-hosted, SIL OFL 1.1, licences in ../fonts/):
    Big Shoulders Display (wght 100-900), Archivo (wght 100-900, wdth 62-125)

  Contrast (WCAG 2.x relative luminance; AA = 4.5 body, 3.0 large):
    screen  ink      #F6F4FA on charcoal #14141B  16.79  AAA
    screen  ink      #F6F4FA on raised   #22222D  14.41  AAA
    screen  ink-dim  #B9B6C8 on charcoal #14141B   9.24  AAA
    screen  ink-dim  #B9B6C8 on raised   #22222D   7.93  AAA
    screen  amber    #FFD43B on charcoal #14141B  12.86  AAA (and charcoal on amber, buttons)
    screen  violet   #8C7AE6 on charcoal #14141B   5.27  objects only, not small text
    screen  alert    #FF6A55 on charcoal #14141B   6.50  AA
    print   ink #14141B on white 18.33 | soft #4B4566 8.97 | alert #B42318 6.57
*/

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root, [data-look="b"] {
  /* colour: page, TV and phone (dark) */
  --pd-bg: #14141B;            /* charcoal */
  --pd-bg-raised: #22222D;     /* stage panels */
  --pd-paper-sheet: #22222D;
  --pd-rule: #3A3A4A;          /* decorative only */
  --pd-ink: #F6F4FA;
  --pd-ink-dim: #B9B6C8;
  --pd-accent: #FFD43B;        /* amber: action, bulbs, current */
  --pd-on-accent: #14141B;
  --pd-highlight: #FFD43B;
  --pd-on-highlight: #14141B;
  --pd-violet: #8C7AE6;        /* objects only */
  --pd-alert: #FF6A55;
  --pd-focus: #FFD43B;
  --pd-shadow: #050508;        /* hard offset shadows */

  /* colour: venue TV (same stage as the page) */
  --pd-tv-bg: #14141B;
  --pd-tv-raised: #22222D;
  --pd-tv-ink: #F6F4FA;
  --pd-tv-dim: #B9B6C8;
  --pd-tv-accent: #FFD43B;
  --pd-tv-on-accent: #14141B;
  --pd-tv-alert: #FF6A55;
  --pd-tv-rule: #3A3A4A;

  /* colour: print (white A4, mono-laser safe, no large solid fills) */
  --pd-paper: #FFFFFF;
  --pd-print-ink: #14141B;
  --pd-print-ink-soft: #4B4566;
  --pd-print-rule: #14141B;
  --pd-print-alert: #B42318;

  /* type */
  --pd-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --pd-font-text: "Archivo", "Arial", sans-serif;
  --pd-display-weight: 900;
  --pd-display-stretch: 100%;
  --pd-display-case: uppercase;
  --pd-text-weight: 450;
  --pd-text-stretch: 100%;
  --pd-strong-weight: 700;
  --pd-question-stretch: 108%;
  --pd-display-tracking: 0.005em;   /* condensed caps want a hair of air */
  --pd-display-tracking-big: 0.005em;
  --pd-text-tracking: 0;

  /* type scale: screen UI */
  --pd-step--1: 0.875rem;
  --pd-step-0: 1rem;
  --pd-step-1: 1.25rem;
  --pd-step-2: 1.563rem;
  --pd-step-3: 2.2rem;
  --pd-step-4: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  --pd-step-5: clamp(3.5rem, 1.6rem + 8vw, 8rem);    /* 56px at 375, 128px at 1440 */

  /* type scale: big screen (1cqi = 19.2px at 1920 wide) */
  --pd-tv-meta: 2.4cqi;
  --pd-tv-question: 4.2cqi;
  --pd-tv-number: 8cqi;
  --pd-tv-small: 1.6cqi;

  /* type scale: print, A4 */
  --pd-print-title: 28pt;
  --pd-print-field: 11pt;
  --pd-print-label: 9pt;
  --pd-print-answer-row: 9.5mm;

  /* spacing (4px base) */
  --pd-space-1: 4px;
  --pd-space-2: 8px;
  --pd-space-3: 14px;
  --pd-space-4: 22px;
  --pd-space-5: 36px;
  --pd-space-6: 56px;
  --pd-space-7: 96px;

  /* shape: game-show controls */
  --pd-radius-none: 0;
  --pd-radius-tight: 6px;
  --pd-radius-control: 12px;
  --pd-button-shadow: 0 5px 0 var(--pd-shadow);
  --pd-button-case: uppercase;
  --pd-rule-weight: 2px;
  --pd-rule-heavy: 4px;

  /* motion: one stage reveal, expo out, never loops */
  --pd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pd-ease-settle: cubic-bezier(0.25, 1, 0.5, 1);
  --pd-ease-timer: linear;
  --pd-dur-quick: 90ms;
  --pd-dur-settle: 480ms;
  --pd-dur-reveal: 720ms;
  /* signature: a row of ten bulbs is the countdown. Each switches off in turn as a discrete
     state tied to the same server deadline; the last three turn alert. */
}

@media (prefers-reduced-motion: reduce) {
  :root, [data-look="b"] {
    --pd-dur-quick: 0ms;
    --pd-dur-settle: 0ms;
    --pd-dur-reveal: 0ms;
  }
}