/* TBB — design tokens (broadsheet direction, dark-first).
   Drop-in replacement for the :root block of static/tbb/style.css.
   Dark is the primary mode; light is the opt-out. */

:root {
  /* ---- color: ground & ink ---- */
  --bg:            #17150f;   /* page */
  --surface:       #201d16;   /* cards, header bar, footer */
  --surface-sunk:  #1b1812;   /* shame ledger, panels */
  --ink:           #f2ece0;   /* primary text, masthead rule */
  --ink-2:         #ded6c6;   /* body copy */
  --muted:         #a39b8a;   /* labels, secondary text */
  --rule:          #3a3528;   /* 1px section rules, card borders */
  --rule-soft:     #26221a;   /* table row rules */
  --rule-shame:    #4a4436;   /* dashed borders on shame */

  /* ---- color: meaning ---- */
  --accent:        #c9452f;   /* newsprint red: season, active, danger */
  --honour:        #e7b34a;   /* badges, badge points, champion */
  --good:          #8fae7a;   /* positive luck, wins, odds up */
  --bad:           #d9705c;   /* negative luck, low efficiency */
  --shame:         #8e8677;   /* shame badges — never scores points */

  /* ---- color: derived surfaces the prototype hard-coded (tokenised so light mode holds) ---- */
  --surface-top:   #1d1a13;   /* rank-1 row */
  --surface-open:  #231f14;   /* an unfolded dynasty row */
  --live-bg:       #241f10;   /* the live banner */
  --live-border:   #6b4f18;
  --live-ink:      #e7d9b4;
  --shame-ink:     #cfc6b4;   /* team names on shame cards */
  --pending:       #3f3a2d;   /* the empty medallion of a badge not yet struck */
  --dim:           #6b6456;   /* future weeks, timestamps, the h2h diagonal */
  --zero:          #4a4436;   /* a zero in the badge matrix */
  --rule-dash:     #2e2a20;   /* future week chips, odds tracks, the shame shelf rule */
  --plate-bg:      #1d1a12;   /* trophy plate */
  --plate-border:  #6b5a2c;   /* trophy plate, tuned weights, podium chips */
  --plate-top:     #221e15;   /* top of the plate gradient */
  --admin-border:  #4a3128;   /* the ADMIN role chip */

  /* chart series (Chart.js dataset borderColor/backgroundColor, in order) */
  --series-1: #c9452f; --series-2: #e7b34a; --series-3: #8fae7a;
  --series-4: #7f9fc4; --series-5: #b98cc0; --series-6: #8e8677;
  --series-7: #c9723f; --series-8: #6f9f9a; --series-9: #a8a15c; --series-10: #6b6456;

  /* ---- type ---- */
  --font-display: Oswald, 'Arial Narrow', sans-serif;      /* 300 / 500 / 700 */
  --font-body:    'Source Serif 4', Georgia, serif;         /* 400 / 600 + italic */
  --font-num:     'IBM Plex Mono', ui-monospace, monospace; /* 400 / 500 / 600 */

  --display-xl: 700 32px/1.04 var(--font-display);
  --display-l:  700 27px/1.05 var(--font-display);
  --display-m:  700 22px/1.1  var(--font-display);
  --section:    500 13px/1    var(--font-display);  /* + letter-spacing .16em, uppercase */
  --nav:        500 12px/1    var(--font-display);  /* + letter-spacing .1em, uppercase */
  --body:       400 14.5px/1.58 var(--font-body);
  --body-s:     400 13.5px/1.5  var(--font-body);
  --num-xl:     600 24px/1.1 var(--font-num);
  --num-l:      600 17px/1.2 var(--font-num);
  --num:        400 13px/1.3 var(--font-num);
  --label:      400 12px/1.2 var(--font-num);       /* + letter-spacing .1em — 12px is the FLOOR */

  --track-label: .1em;
  --track-section: .16em;
  --track-eyebrow: .24em;

  /* ---- space, geometry, motion ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --gutter: 16px;          /* phone side gutter */
  --gutter-lg: 32px;       /* desktop side gutter */
  --measure: 1120px;       /* max page width */
  --radius: 0;             /* broadsheet: square. 2px on inputs only */
  --radius-input: 2px;
  --tap: 40px;             /* minimum hit target */
  --elev-panel: 0 -18px 40px rgba(0, 0, 0, .5);  /* the only shadows in the system */
  --elev-drawer: -18px 0 40px rgba(0, 0, 0, .45);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 160ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:           #f4efe4;
    --surface:      #fbf8f1;
    --surface-sunk: #efe9dc;
    --ink:          #17150f;
    --ink-2:        #3a352b;
    --muted:        #6f675a;
    --rule:         #d8d0bf;
    --rule-soft:    #e6dfd0;
    --rule-shame:   #b8ad97;
    --accent:       #b03a24;
    --honour:       #9a6b12;
    --good:         #3f6b34;
    --bad:          #a33b2a;
    --shame:        #8a8275;
    --surface-top:  #ece5d3;
    --surface-open: #e9e1cd;
    --live-bg:      #f6ecd0;
    --live-border:  #c9a75a;
    --live-ink:     #4a3a10;
    --shame-ink:    #5a5346;
    --pending:      #cfc6b4;
    --dim:          #8a8275;
    --zero:         #b8ad97;
    --rule-dash:    #ddd4c2;
    --plate-bg:     #f8f2e3;
    --plate-border: #b89a4a;
    --plate-top:    #efe7d4;
    --admin-border: #d9a596;
  }
}