/* ==========================================================================
   Director's Chair - tokens.css (R1, 11/03/26). Derived from Consilience Core Design
   Tokens v1 (R5) / Design System tokens.css. Light and dark via light-dark();
   <html data-theme="light|dark"> overrides. Needs Safari 17.5+.
   Modes: default (Pro/attorney, 44px targets), [data-mode="trudy"] (90px targets,
   large type, maximum contrast).
   ========================================================================== */
:root{
  color-scheme: light dark;
  --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type: large by default; R5 scale stepped up for reading on a tablet */
  --t-caption: 16px; --t-body: 20px; --t-headline: 24px; --t-title: 32px; --t-hero: 44px;
  --t-button: 22px;
  --w-regular: 400; --w-semibold: 600; --w-bold: 700;
  --lh-body: 1.5; --lh-tight: 1.2;

  /* space: 8-point grid */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px;
  --r-control: 14px; --r-card: 20px; --r-pill: 999px;

  /* targets */
  --target: 44px;          /* Pro, attorney (Apple HIG minimum) */
  --target-trudy: 90px;    /* Trudy mode minimum */

  /* palette (R5) */
  --bg:        light-dark(#F5F5F7, #0F1218);
  --surface:   light-dark(#FFFFFF, #171B23);
  --surface-2: light-dark(#FAFAFC, #1E2430);
  --line:      light-dark(#E3E4E8, #2A3140);
  --control-line: light-dark(#86868B, #6E7891);
  --text:      light-dark(#1D1D1F, #E9EDF3);
  --muted:     light-dark(#58585D, #A8B2C3);
  --accent:        light-dark(#1F3864, #8FB0E8);
  --accent-soft:   light-dark(#E8EDF6, #1B2638);
  --on-accent:     light-dark(#FFFFFF, #0F1218);
  --pass: light-dark(#0F7A66, #4FC49E);  --pass-soft: light-dark(#E5F3EC, #15291F);
  --warn: light-dark(#9A6200, #E3B05A);  --warn-soft: light-dark(#FBF1DE, #2B2213);
  --block: light-dark(#A8322D, #EE817B); --block-soft: light-dark(#F8E6E5, #2E1716);
  --focus: light-dark(#0A5BD3, #7FB2FF);
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus);
  --shadow-card: 0 1px 2px light-dark(rgba(0,0,0,.04), transparent), 0 4px 16px light-dark(rgba(0,0,0,.04), transparent);
  --ease: cubic-bezier(.25,.1,.25,1); --dur: 120ms;
  --ce-paper: var(--surface);
}
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{ color-scheme: dark; }

/* Trudy mode: biggest type, fewest words, maximum contrast, 90px+ targets */
[data-mode="trudy"]{
  --t-body: 28px; --t-headline: 34px; --t-title: 44px; --t-hero: 56px; --t-button: 34px; --t-caption: 24px;
  --target: var(--target-trudy);
  --text:  light-dark(#000000, #FFFFFF);
  --muted: light-dark(#3A3A3C, #D1D5DB);
  --bg:    light-dark(#FFFFFF, #000000);
  --surface: light-dark(#FFFFFF, #000000);
  --control-line: light-dark(#1D1D1F, #FFFFFF);
  --accent: light-dark(#14284A, #B9D0F5);
  --pass: light-dark(#0B5E4E, #6BE0B5);
  --warn: light-dark(#7A4D00, #F0C070);
  --block: light-dark(#8E211C, #FF9C96);
  --s-2: 24px; --s-3: 32px;
}
@media (prefers-contrast: more){ :root{ --control-line: light-dark(#1D1D1F, #FFFFFF); --muted: var(--text); } }
@media (prefers-reduced-motion: reduce){ :root{ --dur: 0ms; } }

body{ margin:0; background: var(--bg); color: var(--text); font: var(--w-regular) var(--t-body)/var(--lh-body) var(--f-ui); -webkit-text-size-adjust: 100%; }
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; }

/* Buttons: icon above or beside a word. Never icon alone. */
.dc-btn{ font: inherit; font-size: var(--t-button); font-weight: var(--w-bold); min-height: var(--target); min-width: var(--target);
  padding: 0 var(--s-3); border-radius: var(--r-control); border: 3px solid var(--control-line); background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); cursor: pointer; touch-action: manipulation;
  transition: transform var(--dur) var(--ease); }
.dc-btn:active{ transform: scale(.98); }
.dc-btn svg{ width: 1.6em; height: 1.6em; flex: none; }
.dc-btn--primary{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dc-btn--good{ border-color: var(--pass); background: var(--pass-soft); }
.dc-btn--unsure{ border-color: var(--warn); background: var(--warn-soft); }
.dc-btn--fix{ border-color: var(--block); background: var(--block-soft); }
[data-mode="trudy"] .dc-btn{ min-height: var(--target-trudy); width: 100%; }
.dc-chip{ display:inline-flex; align-items:center; gap:8px; min-height: 36px; padding: 0 var(--s-2); border-radius: var(--r-pill); border: 2px solid var(--control-line); font-size: var(--t-caption); font-weight: var(--w-semibold); background: var(--surface-2); }
.dc-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-3); box-shadow: var(--shadow-card); }
.dc-lamp{ display:flex; gap: var(--s-2); align-items:flex-start; padding: var(--s-2); border-radius: var(--r-control); border: 2px solid var(--control-line); }
.dc-lamp--pass{ border-color: var(--pass); background: var(--pass-soft); }
.dc-lamp--block{ border-color: var(--block); background: var(--block-soft); }
.dc-icon{ width: 48px; height: 48px; color: var(--text); --area-general: var(--accent); }