/* Design tokens — "BRICK".
   Matte black candy-bar feature phone with a warm amber backlit LCD.
   Inspired by the Nokia 5110 / 8210 era but a fictional model called WN-3310.
   Aesthetic priorities: heavy plastic, amber glow, tactile rubber keys.

   Fonts (Google Fonts in index.html): Silkscreen (pixel headers),
   VT323 (LCD body), IBM Plex Mono (small labels, chassis stamp). Explicit
   deviation from CLAUDE.md §2's "no runtime deps" rule. */

:root {
    /* ── LCD: warm amber backlight, dark brown ink ───────────────────── */
    --lcd-bg:           #e89540;   /* honey amber backlight */
    --lcd-bg-light:     #f4ad60;
    --lcd-bg-bright:    #ffc079;   /* backlit moments */
    --lcd-bg-dark:      #b06a18;
    --lcd-pixel:        #1a0d04;   /* near-black brown ink */
    --lcd-pixel-dim:    #4a2a0c;
    --lcd-glow:         #ffd896;
    --phosphor-bright:  #ffe4b3;   /* warm amber-glow accent for focus rings + phosphor text */
    --lcd-status-bg:    #0a0a0a;
    --lcd-status-fg:    #f4f4f4;

    /* ── Chassis: matte black with cool grey accents ─────────────────── */
    --chassis:           #16161a;
    --chassis-light:     #24242a;
    --chassis-dark:      #08080a;
    --chassis-rim:       #3a3a42;   /* satin chrome chamfer */
    --chassis-rim-light: #6a6a72;

    /* Front face — slightly glossier than the chassis edge */
    --front:        #1c1c22;
    --front-light:  #2a2a32;
    --front-shadow: #0c0c10;

    /* ── Bezel — deep black around the LCD ───────────────────────────── */
    --bezel:       #060608;
    --bezel-edge:  #1a1a1e;

    /* ── Keys: dark rubber membrane with cream labels ────────────────── */
    --key:         #28282e;
    --key-light:   #36363c;
    --key-shadow:  #0c0c10;
    --key-text:    #e8e6df;        /* warm off-white, like ivory rubber */
    --key-text-dim:#8a8884;
    --key-divider: #050505;

    /* Call/end accents — high-saturation, the only colored UI */
    --key-call:    #5cd96b;
    --key-call-bright: #8aff95;
    --key-end:     #ff4a3d;
    --key-end-bright:  #ff7a6e;

    /* ── Surface (the desk the phone sits on) ────────────────────────── */
    --desk:           #0e0a08;
    --desk-light:     #1a120c;
    --desk-shadow:    #060403;
    --desk-warm:      #221512;     /* warm vignette */

    /* ── Semantic ────────────────────────────────────────────────────── */
    --danger:  #ff4a3d;
    --ok:      #5cd96b;

    /* ── Type ────────────────────────────────────────────────────────── */
    --font-display: "VT323", ui-monospace, "Cascadia Mono", "Courier New", monospace;
    --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Courier New", monospace;
    --font-lcd:     "Silkscreen", "VT323", ui-monospace, monospace;
    --font-brand:   "Helvetica Neue", "Arial", sans-serif;

    /* ── Spacing ─────────────────────────────────────────────────────── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;

    /* ── Timing ──────────────────────────────────────────────────────── */
    --t-fast: 60ms;
    --t-mid:  180ms;
    --t-slow: 320ms;
    --t-warmup: 800ms;

    /* ── Phone size — the LCD is the play surface, give it room. ────── */
    --phone-w:   380px;
    --screen-h:  360px;
}