/*
 * tokens.css — Call Center Manager design tokens (Phase 2).
 * "Corporate cool" 16-bit office: blue-grey carpet, steel desks, white walls,
 * one LCD-blue accent; phosphor green / amber / red are reserved for state.
 * Pixel unit is 4px. No border-radius anywhere; frames are stepped box-shadows.
 * Single deliberate theme — the game commits to one look.
 */
:root {
  /* ── palette ── */
  --carpet:        #2B3646;   /* floor / app ground */
  --carpet-dark:   #1F2835;   /* drawers, overlays */
  --partition:     #6E7F93;   /* cubicle walls, frame edges */
  --partition-lt:  #9AAABB;   /* frame highlight */
  --wall:          #E4E9EE;   /* panel paper */
  --wall-dim:      #CFD7DF;   /* panel alt rows, disabled */
  --steel:         #B7C1CB;   /* desks, dividers */
  --steel-dark:    #5C6B7A;   /* desk shadow, muted text on paper */
  --ink:           #111821;   /* text on paper */
  --ink-muted:     #4A5566;
  --paper-text:    #F4F6F8;   /* text on carpet */
  --paper-muted:   #A9B4C0;

  --lcd:           #3FA9F5;   /* THE accent: focus, selected, links, dialing */
  --lcd-deep:      #1D6FB8;   /* pressed / dark-ground accent */
  --lcd-glow:      #BFE3FF;

  /* semantic (never used as decoration) */
  --ok:            #4AD66D;
  --ok-dim:        #2E8F47;
  --warn:          #F2B441;
  --bad:           #E5484D;
  --bad-dim:       #9E2F33;
  --gold:          #F5CE5A;   /* rare named hires — nothing else */
  --gold-deep:     #A87C1E;

  /* ── orb states (floor view) ── */
  --orb-idle:      #8E9AA8;
  --orb-dialing:   #3FA9F5;
  --orb-oncall:    #4AD66D;
  --orb-transfer:  #5CE1E6;
  --orb-sale:      #F2B441;
  --orb-break:     #A78BFA;
  --orb-absent:    #4A5566;
  --orb-quit:      #E5484D;
  --orb-manager:   #F4F6F8;   /* ring color for multiplier roles */
  --orb-legend:    #F5CE5A;   /* ring color for a named hire */

  /* ── type ── */
  --font-pixel: "Silkscreen", "Press Start 2P", monospace;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px;  --fs-sm: 12px;  --fs-md: 14px;  --fs-lg: 18px;  --fs-xl: 24px;  --fs-hero: 32px;
  --pixel-xs: 8px; --pixel-sm: 10px; --pixel-md: 12px; --pixel-lg: 16px; --pixel-xl: 24px;

  /* ── spacing (4px unit) ── */
  --u: 4px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;

  /* ── frames ── */
  --frame:   0 0 0 2px var(--partition), 0 0 0 4px var(--carpet-dark);
  --frame-lt: 0 0 0 2px var(--partition-lt), 0 0 0 4px var(--partition);
  --frame-focus: 0 0 0 2px var(--lcd), 0 0 0 4px var(--lcd-deep);
  --inset: inset 2px 2px 0 var(--partition-lt), inset -2px -2px 0 var(--steel-dark);

  /* ── layout ── */
  --strip-h: 48px;
  --drawer-w: 320px;
  --floor-tile: 16px;   /* one desk cell in floor pixels before scaling */
  --floor-scale: 3;     /* canvas integer scale */
}

/* ── base ── */
.ccm { background: var(--carpet); color: var(--paper-text); font-family: var(--font-mono); font-size: var(--fs-md); line-height: 1.4; }
.ccm * { box-sizing: border-box; }
.ccm canvas, .ccm img { image-rendering: pixelated; image-rendering: crisp-edges; }
.ccm h1, .ccm h2, .ccm h3, .ccm .label { font-family: var(--font-pixel); font-weight: 400; letter-spacing: 0; text-transform: uppercase; margin: 0; }
.ccm h1 { font-size: var(--pixel-xl); } .ccm h2 { font-size: var(--pixel-lg); } .ccm h3 { font-size: var(--pixel-md); }
.ccm .label { font-size: var(--pixel-xs); color: var(--paper-muted); }
.ccm .num { font-variant-numeric: tabular-nums; text-align: right; }
.ccm .ok { color: var(--ok); } .ccm .warn { color: var(--warn); } .ccm .bad { color: var(--bad); }
.ccm .legend { color: var(--gold); }
.ccm .legend small { color: var(--gold); opacity: .72; }
.ccm .pill.legend { background: var(--gold); color: var(--ink); font-weight: 700; }

/* ── panel: paper on carpet, stepped frame ── */
.ccm .panel { background: var(--wall); color: var(--ink); box-shadow: var(--frame); padding: var(--s3) var(--s4); margin: var(--s1); }
.ccm .panel .label { color: var(--steel-dark); }
.ccm .panel-dark { background: var(--carpet-dark); color: var(--paper-text); box-shadow: var(--frame-lt); padding: var(--s3) var(--s4); margin: var(--s1); }
.ccm .panel > h2, .ccm .panel-dark > h2 { margin-bottom: var(--s2); }

/* ── buttons ── */
.ccm .btn { font-family: var(--font-pixel); font-size: var(--pixel-sm); text-transform: uppercase; background: var(--steel); color: var(--ink); border: 0; padding: var(--s2) var(--s3); box-shadow: var(--inset); cursor: pointer; }
.ccm .btn:hover { background: var(--partition-lt); }
.ccm .btn:active { box-shadow: inset 2px 2px 0 var(--steel-dark), inset -2px -2px 0 var(--partition-lt); transform: translate(1px, 1px); }
.ccm .btn:focus-visible { outline: 0; box-shadow: var(--frame-focus); }
.ccm .btn-primary { background: var(--lcd); color: var(--ink); box-shadow: inset 2px 2px 0 var(--lcd-glow), inset -2px -2px 0 var(--lcd-deep); }
.ccm .btn-danger { background: var(--bad); color: var(--paper-text); box-shadow: inset 2px 2px 0 #F08C90, inset -2px -2px 0 var(--bad-dim); }
.ccm .btn:disabled { background: var(--wall-dim); color: var(--steel-dark); box-shadow: none; cursor: default; }

/* ── tables ── */
.ccm table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.ccm th { font-family: var(--font-pixel); font-size: var(--pixel-xs); text-transform: uppercase; text-align: left; color: var(--steel-dark); border-bottom: 2px solid var(--partition); padding: var(--s1) var(--s2); }
.ccm td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--wall-dim); }
.ccm tbody tr:nth-child(even) td { background: rgba(0,0,0,.035); }
.ccm tbody tr.selected td { background: var(--lcd-glow); }
.ccm td.num, .ccm th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── stat tile (status strip) ── */
.ccm .tile { display: flex; flex-direction: column; gap: 2px; padding: var(--s1) var(--s3); border-right: 2px solid var(--partition); min-width: 112px; }
.ccm .tile .label { font-size: var(--pixel-xs); }
.ccm .tile .value { font-family: var(--font-mono); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ── pills ── */
.ccm .pill { display: inline-block; font-family: var(--font-pixel); font-size: var(--pixel-xs); text-transform: uppercase; padding: 2px 6px; background: var(--steel); color: var(--ink); }
.ccm .pill.ok { background: var(--ok); color: var(--ink); } .ccm .pill.warn { background: var(--warn); color: var(--ink); } .ccm .pill.bad { background: var(--bad); color: var(--paper-text); } .ccm .pill.lcd { background: var(--lcd); color: var(--ink); }

/* ── gauge (heat, morale, runway) ── */
.ccm .gauge { position: relative; height: 12px; background: var(--carpet-dark); box-shadow: 0 0 0 2px var(--partition); }
.ccm .gauge > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lcd); }
.ccm .gauge > b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--paper-text); }  /* threshold tick */
.ccm .gauge.heat > i { background: linear-gradient(90deg, var(--ok) 0 35%, var(--warn) 35% 65%, var(--bad) 65%); background-size: calc(100% / var(--fill, 1)) 100%; }

/* ── slider ── */
.ccm input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--carpet-dark); box-shadow: 0 0 0 2px var(--partition); outline: 0; }
.ccm input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 20px; background: var(--steel); box-shadow: var(--inset); cursor: pointer; }
.ccm input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--frame-focus); }

/* ── orb ── */
.ccm .orb { display: inline-block; width: 16px; height: 16px; background: var(--orb-idle); box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.35), 0 0 0 2px var(--carpet-dark); }
.ccm .orb.dialing { background: var(--orb-dialing); } .ccm .orb.oncall { background: var(--orb-oncall); } .ccm .orb.transfer { background: var(--orb-transfer); }
.ccm .orb.sale { background: var(--orb-sale); } .ccm .orb.break { background: var(--orb-break); } .ccm .orb.absent { background: var(--orb-absent); } .ccm .orb.quit { background: var(--orb-quit); }
.ccm .orb.manager { box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.35), 0 0 0 2px var(--orb-manager), 0 0 0 4px var(--carpet-dark); }

@media (prefers-reduced-motion: reduce) { .ccm * { animation: none !important; transition: none !important; } }