/* ============================================================
   TACTILE MODERNIST - DESIGN TOKENS
   Single source of truth. Components read these variables;
   rebrand by editing tokens, not components.
   ============================================================ */

:root {
  /* Warm, quiet chassis colors */
  --tm-canvas: #f4f3ef;
  --tm-shell: #e7e5df;
  --tm-panel: #d9d8d2;
  --tm-panel-hi: #efeee9;
  --tm-panel-lo: #c7c6c0;
  --tm-ink: #2d2f2e;
  --tm-muted: #74766f;
  --tm-line: rgba(44, 46, 44, 0.28);

  /* Functional accents: orange acts, blue selects, cyan confirms, red records */
  --tm-orange: #f25a1c;
  --tm-orange-dark: #c84413;
  --tm-cyan: #13e0c3;
  --tm-blue: #0797e8;
  --tm-red: #c92e2e;

  /* Displays: LCD well and oscilloscope well, both green phosphor */
  --tm-display: #19372e;
  --tm-display-text: #8bf08d;
  --tm-scope: #0c120d;
  --tm-scope-line: #52f77f;

  /* Shape and spacing */
  --tm-radius-xs: 6px;
  --tm-radius-sm: 10px;
  --tm-radius-md: 16px;
  --tm-radius-lg: 24px;
  --tm-space-1: 4px;
  --tm-space-2: 8px;
  --tm-space-3: 12px;
  --tm-space-4: 16px;
  --tm-space-5: 24px;
  --tm-space-6: 32px;
  --tm-space-7: 48px;
  --tm-space-8: 72px;

  /* Typography */
  --tm-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --tm-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
  --tm-font-lcd: 'VT323', 'IBM Plex Mono', ui-monospace, monospace;

  /* Optical construction - one light source, from above.
     Raised = contact shadow + short penumbra + faint ambient. */
  --tm-border: 1px solid rgba(35, 37, 35, 0.24);
  --tm-shadow-raised:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 -1px 0 rgba(20, 22, 20, 0.08) inset,
    0 1px 1px rgba(34, 35, 32, 0.12),
    0 3px 6px rgba(34, 35, 32, 0.09),
    0 14px 24px rgba(34, 35, 32, 0.08);
  --tm-shadow-recessed:
    inset 0 2px 4px rgba(32, 33, 30, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.60);
  --tm-shadow-key:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(32, 33, 30, 0.14),
    0 1px 1px rgba(32, 33, 30, 0.2),
    0 3px 4px rgba(32, 33, 30, 0.12);
  --tm-focus: 0 0 0 3px rgba(7, 151, 232, 0.32);

  /* Motion: fast and mechanical, never ambient */
  --tm-fast: 120ms;
  --tm-normal: 180ms;
  --tm-slow: 320ms;
  --tm-ease-mechanical: cubic-bezier(0.2, 0.8, 0.2, 1);
}