/* Reverb design tokens — House skin (black + Iowa Hawkeye gold)
 *
 * Direct port of reverb_brand_house.py from the wireframes repo.
 * Source of truth for visual identity. Components MUST NOT hard-code colors;
 * use these custom properties.
 *
 * Customer skins (Walmart, Target, ...) override only the brand-* properties
 * and the header foreground. Status semantics and persistent gold never swap.
 *
 * Reference: ~/Documents/Ready Wireless AI/reverb-wireframes/
 *            2026-05-29-house-v0.3-for-prototype/02-REVERB-BRAND-STANDARDS.md
 */

:root {
  /* ------------------------------------------------------------------ */
  /* Brand chrome — House (default)                                     */
  /* Override in skin files for Walmart, Target, etc.                   */
  /* ------------------------------------------------------------------ */
  --brand-primary:  #0A0A0A;   /* header, primary chrome */
  --brand-deep:     #000000;   /* extreme contrast */
  --brand-surface:  #161617;   /* trip strip, layered dark surfaces */
  --brand-rule:     #2A2A2D;   /* hairlines on dark */
  --brand-soft:     #FFF1A8;   /* tint chips (House: gold-soft) */

  /* ------------------------------------------------------------------ */
  /* Persistent gold — Hawkeye gold #FFCD00                             */
  /* Survives every skin swap. Wordmark dot, header rule, camera        */
  /* reticle + shutter, NEW badges, new-session left-edge, radio check. */
  /* ------------------------------------------------------------------ */
  --gold:           #FFCD00;
  --gold-deep:      #B8860B;
  --gold-soft:      #FFF1A8;
  --gold-dark-text: #3F2F00;

  /* Header foreground — gold in House, white in Walmart, etc. */
  --header-fg:      var(--gold);
  --header-sub-fg:  #D6CFB8;

  /* ------------------------------------------------------------------ */
  /* Status semantics — NEVER swap across skins                         */
  /* Encode meaning, not brand. Always paired with a text label.        */
  /* ------------------------------------------------------------------ */
  --green:          #00A85A;
  --green-deep:     #007A41;
  --green-soft:     #D9F3E5;

  --amber:          #FFB300;
  --amber-deep:     #7A4E00;
  --amber-soft:     #FFF1D6;

  --red:            #D62828;
  --red-deep:       #791414;
  --red-soft:       #FBE0E0;

  --blue:           #1E88E5;
  --blue-deep:      #0F4A8B;
  --blue-soft:      #E1F4FF;

  --neutral:        #E0DCE8;

  /* ------------------------------------------------------------------ */
  /* Text                                                                */
  /* ------------------------------------------------------------------ */
  --ink:            #0F0F14;   /* primary */
  --ink-2:          #454552;   /* secondary */
  --ink-3:          #7A7A85;   /* tertiary / hints */

  /* ------------------------------------------------------------------ */
  /* Paper — warm-tinted to harmonize with gold (House)                 */
  /* Customer skins re-tint per §2.3 of brand standards.                */
  /* ------------------------------------------------------------------ */
  --paper:          #FFFFFF;
  --paper-2:        #F4F2F0;   /* canvas behind device */
  --paper-3:        #E6E3DE;   /* dividers, borders */

  /* ------------------------------------------------------------------ */
  /* Spacing — 4pt base unit                                            */
  /* ------------------------------------------------------------------ */
  --s1:  4px;    /* hairline gaps */
  --s2:  8px;    /* tight stacks */
  --s3:  12px;   /* default within-component gap */
  --s4:  16px;   /* between components */
  --s5:  24px;   /* section padding */
  --s6:  32px;   /* major section breaks */
  --s7:  48px;   /* above primary CTAs */

  /* ------------------------------------------------------------------ */
  /* Typography                                                         */
  /* SF Pro on iOS, Roboto on Android (via system-sans), Inter for web. */
  /* Two weights only: 400 + 700. No mid-weights.                       */
  /* ------------------------------------------------------------------ */
  --font-family:    'SF Pro Text', 'Helvetica Neue', 'Inter', Arial, sans-serif;
  --font-mono:      'SF Mono', 'Courier New', monospace;

  /* Sizes (pt ≈ px at 1x) — per brand standards §4.2 */
  --type-page-title:    28px;
  --type-section:       18px;
  --type-body:          14px;   /* floor — outdoor readability */
  --type-caption:       12px;
  --type-microcopy:     11px;
  --type-button:        18px;
  --type-button-big:    20px;
  --type-kpi:           28px;

  /* Line heights */
  --lh-body:    1.45;
  --lh-heading: 1.15;
  --lh-button:  1.05;

  /* ------------------------------------------------------------------ */
  /* Tap targets — gloved-hand friendly                                 */
  /* ------------------------------------------------------------------ */
  --tap-min:        44px;   /* Apple floor */
  --tap-primary:    56px;   /* navigation buttons */
  --tap-commit:     64px;   /* writes-an-event buttons */
  --tap-disposition: 70px;  /* the 2x2 grid cells */
  --tap-fab:        50px;

  /* ------------------------------------------------------------------ */
  /* Radii                                                              */
  /* ------------------------------------------------------------------ */
  --r-chip:         999px;  /* fully rounded */
  --r-card:         12px;
  --r-button:       12px;
  --r-button-commit: 14px;
  --r-input:        10px;
  --r-sheet:        20px;
  --r-phone-screen: 34px;   /* inner phone screen rounding */
  --r-phone-bezel:  46px;   /* outer device rounding */

  /* ------------------------------------------------------------------ */
  /* Phone canvas — iPhone 14/15 Pro scale                              */
  /* Mockups use 460x920 outer / 428x892 inner. We mirror.              */
  /* ------------------------------------------------------------------ */
  --phone-w:        430px;
  --phone-h:        920px;
  --phone-screen-w: 398px;
  --phone-screen-h: 892px;

  /* ------------------------------------------------------------------ */
  /* Motion                                                             */
  /* ------------------------------------------------------------------ */
  --ease-snap:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --t-instant:      120ms;
  --t-quick:        200ms;
  --t-deliberate:   320ms;
}

/* Respect reduced motion — pulse animations must check this */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-instant:     0ms;
    --t-quick:       0ms;
    --t-deliberate:  0ms;
  }
}