/* todo.academy design tokens · generated from the approved 2.0 system.
   Foundational tokens first; COMPONENT ALIASES at the end reference them.
   Load before components.css. */

:root {

  /* FOUNDATION · FONTS */
  --ta-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --ta-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* FOUNDATION · PAPER SURFACES (light reading) */
  --ta-paper: #F4F1E9;
  --ta-paper-raised: #FBF9F3;
  --ta-paper-recessed: #ECE8DC;
  --ta-paper-border: #DCD6C6;
  --ta-paper-border-strong: #928B7B;

  /* FOUNDATION · BENCH SURFACES (dark workbench) */
  --ta-bench: #101613;
  --ta-bench-2: #17201B;
  --ta-bench-3: #202B24;
  --ta-bench-border: #2C3A31;
  --ta-bench-guide: #233029;

  /* FOUNDATION · TEXT */
  --ta-ink: #20281F;
  --ta-ink-2: #4E5850;
  --ta-ink-3: #626961;
  --ta-bench-text: #E6EDE5;
  --ta-bench-text-2: #A3B0A4;
  --ta-bench-text-3: #7C897D;

  /* FOUNDATION · ACTION */
  --ta-action: #232E26;
  --ta-action-hover: #16201A;
  --ta-action-text: #F6F4EC;
  --ta-action-on-bench: #F1EEE4;
  --ta-link: #1C6B45;
  --ta-link-hover: #14522F;
  --ta-focus-ring: #1C6B45;
  --ta-focus-ring-bench: #9EDFA8;
  --ta-brand-seed: #9EDFA8;

  /* FOUNDATION · SEMANTIC (state colors, never decoration) */
  --ta-ok: #1E6E42;
  --ta-ok-tint: #DEEEDD;
  --ta-ok-border: #B9DBBC;
  --ta-ok-deep: #1E4230;
  --ta-ok-bench: #9EDFA8;
  --ta-info: #2F5A75;
  --ta-info-tint: #E1EAF1;
  --ta-info-border: #B9CFDF;
  --ta-info-deep: #24455A;
  --ta-warn: #8A5A14;
  --ta-warn-tint: #F5EAD2;
  --ta-warn-border: #E0C892;
  --ta-warn-deep: #5F430E;
  --ta-warn-bench: #E3C27C;
  --ta-fail: #A03B24;
  --ta-fail-tint: #F6E3DC;
  --ta-fail-border: #E4B7A8;
  --ta-fail-deep: #6E2818;
  --ta-fail-bench: #E89377;
  --ta-locked-text: #626961;
  --ta-locked-border: #928B7B;

  /* FOUNDATION · TYPE SCALE (size/line-height/weight) */
  --ta-type-display-size: 44px;
  --ta-type-display-lh: 1.08;
  --ta-type-title-1-size: 32px;
  --ta-type-title-1-lh: 1.15;
  --ta-type-title-2-size: 24px;
  --ta-type-title-2-lh: 1.2;
  --ta-type-title-3-size: 19px;
  --ta-type-title-3-lh: 1.3;
  --ta-type-reading-size: 17px;
  --ta-type-reading-lh: 1.65;
  --ta-type-ui-size: 15px;
  --ta-type-ui-lh: 1.45;
  --ta-type-ui-small-size: 14px;
  --ta-type-meta-size: 12.5px;
  --ta-type-code-size: 14.5px;
  --ta-type-terminal-size: 14px;
  --ta-type-terminal-lh: 1.7;

  /* FOUNDATION · SPACE AND WIDTHS */
  --ta-s-1: 4px;
  --ta-s-2: 8px;
  --ta-s-3: 12px;
  --ta-s-4: 16px;
  --ta-s-5: 20px;
  --ta-s-6: 24px;
  --ta-s-8: 32px;
  --ta-s-10: 40px;
  --ta-s-12: 48px;
  --ta-s-16: 64px;
  --ta-s-20: 80px;
  --ta-s-24: 96px;
  --ta-page-max: 1104px;
  --ta-reading-max: 680px;
  --ta-reader-min: 480px;
  --ta-bench-min: 430px;

  /* FOUNDATION · SHAPE, ELEVATION, FOCUS, MOTION */
  --ta-r-1: 3px;
  --ta-r-2: 6px;
  --ta-r-3: 10px;
  --ta-r-4: 14px;
  --ta-shadow-1: 0 1px 2px rgba(24, 28, 23, 0.06);
  --ta-shadow-modal: 0 16px 48px rgba(18, 22, 17, 0.28);
  --ta-focus-width: 2px;
  --ta-focus-offset: 2px;
  --ta-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ta-t-reveal: 160ms;
  --ta-t-drawer: 220ms;
  --ta-t-proof: 240ms;

  /* COMPONENT ALIASES */
  --ta-btn-primary-bg: var(--ta-action);
  --ta-btn-primary-text: var(--ta-action-text);
  --ta-btn-primary-bg-hover: var(--ta-action-hover);
  --ta-btn-secondary-border: var(--ta-paper-border-strong);
  --ta-btn-destructive: var(--ta-fail);
  --ta-card-bg: var(--ta-paper-raised);
  --ta-card-border: var(--ta-paper-border);
  --ta-input-border: var(--ta-paper-border-strong);
  --ta-terminal-bg: var(--ta-bench);
  --ta-terminal-prompt: var(--ta-brand-seed);
  --ta-terminal-output: var(--ta-bench-text-2);
  --ta-terminal-error: var(--ta-fail-bench);
  --ta-progress-fill: var(--ta-ok);
}

/*
 * Temporary compatibility bridge for the current application. New code must
 * consume the namespaced --ta-* tokens directly. The bridge can be removed
 * after the legacy stylesheet has been retired.
 */
:root {
  --font-sans: var(--ta-font-sans);
  --font-mono: var(--ta-font-mono);
  --paper: var(--ta-paper);
  --paper-raised: var(--ta-paper-raised);
  --paper-recessed: var(--ta-paper-recessed);
  --paper-border: var(--ta-paper-border);
  --paper-border-strong: var(--ta-paper-border-strong);
  --bench: var(--ta-bench);
  --bench-2: var(--ta-bench-2);
  --bench-3: var(--ta-bench-3);
  --bench-border: var(--ta-bench-border);
  --bench-guide: var(--ta-bench-guide);
  --ink: var(--ta-ink);
  --ink-2: var(--ta-ink-2);
  --ink-3: var(--ta-ink-3);
  --bench-text: var(--ta-bench-text);
  --bench-text-2: var(--ta-bench-text-2);
  --bench-text-3: var(--ta-bench-text-3);
  --action: var(--ta-action);
  --action-hover: var(--ta-action-hover);
  --action-text: var(--ta-action-text);
  --action-on-bench: var(--ta-action-on-bench);
  --link: var(--ta-link);
  --link-hover: var(--ta-link-hover);
  --focus-ring: var(--ta-focus-ring);
  --focus-ring-bench: var(--ta-focus-ring-bench);
  --brand-seed: var(--ta-brand-seed);
  --ok: var(--ta-ok);
  --ok-tint: var(--ta-ok-tint);
  --ok-border: var(--ta-ok-border);
  --ok-deep: var(--ta-ok-deep);
  --ok-bench: var(--ta-ok-bench);
  --info: var(--ta-info);
  --info-tint: var(--ta-info-tint);
  --info-border: var(--ta-info-border);
  --info-deep: var(--ta-info-deep);
  --warn: var(--ta-warn);
  --warn-tint: var(--ta-warn-tint);
  --warn-border: var(--ta-warn-border);
  --warn-deep: var(--ta-warn-deep);
  --warn-bench: var(--ta-warn-bench);
  --fail: var(--ta-fail);
  --fail-tint: var(--ta-fail-tint);
  --fail-border: var(--ta-fail-border);
  --fail-deep: var(--ta-fail-deep);
  --fail-bench: var(--ta-fail-bench);
  --locked-text: var(--ta-locked-text);
  --locked-border: var(--ta-locked-border);
  --type-display-size: var(--ta-type-display-size);
  --type-display-lh: var(--ta-type-display-lh);
  --type-title-1-size: var(--ta-type-title-1-size);
  --type-title-1-lh: var(--ta-type-title-1-lh);
  --type-title-2-size: var(--ta-type-title-2-size);
  --type-title-2-lh: var(--ta-type-title-2-lh);
  --type-title-3-size: var(--ta-type-title-3-size);
  --type-title-3-lh: var(--ta-type-title-3-lh);
  --type-reading-size: var(--ta-type-reading-size);
  --type-reading-lh: var(--ta-type-reading-lh);
  --type-ui-size: var(--ta-type-ui-size);
  --type-ui-lh: var(--ta-type-ui-lh);
  --type-ui-small-size: var(--ta-type-ui-small-size);
  --type-meta-size: var(--ta-type-meta-size);
  --type-code-size: var(--ta-type-code-size);
  --type-terminal-size: var(--ta-type-terminal-size);
  --type-terminal-lh: var(--ta-type-terminal-lh);
  --s-1: var(--ta-s-1);
  --s-2: var(--ta-s-2);
  --s-3: var(--ta-s-3);
  --s-4: var(--ta-s-4);
  --s-5: var(--ta-s-5);
  --s-6: var(--ta-s-6);
  --s-8: var(--ta-s-8);
  --s-10: var(--ta-s-10);
  --s-12: var(--ta-s-12);
  --s-16: var(--ta-s-16);
  --s-20: var(--ta-s-20);
  --s-24: var(--ta-s-24);
  --page-max: var(--ta-page-max);
  --reading-max: var(--ta-reading-max);
  --reader-min: var(--ta-reader-min);
  --bench-min: var(--ta-bench-min);
  --r-1: var(--ta-r-1);
  --r-2: var(--ta-r-2);
  --r-3: var(--ta-r-3);
  --r-4: var(--ta-r-4);
  --shadow-1: var(--ta-shadow-1);
  --shadow-modal: var(--ta-shadow-modal);
  --focus-width: var(--ta-focus-width);
  --focus-offset: var(--ta-focus-offset);
  --ease-out: var(--ta-ease-out);
  --t-reveal: var(--ta-t-reveal);
  --t-drawer: var(--ta-t-drawer);
  --t-proof: var(--ta-t-proof);
  --btn-primary-bg: var(--ta-btn-primary-bg);
  --btn-primary-text: var(--ta-btn-primary-text);
  --btn-primary-bg-hover: var(--ta-btn-primary-bg-hover);
  --btn-secondary-border: var(--ta-btn-secondary-border);
  --btn-destructive: var(--ta-btn-destructive);
  --card-bg: var(--ta-card-bg);
  --card-border: var(--ta-card-border);
  --input-border: var(--ta-input-border);
  --terminal-bg: var(--ta-terminal-bg);
  --terminal-prompt: var(--ta-terminal-prompt);
  --terminal-output: var(--ta-terminal-output);
  --terminal-error: var(--ta-terminal-error);
  --progress-fill: var(--ta-progress-fill);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ta-t-reveal: 0ms; --ta-t-drawer: 0ms; --ta-t-proof: 0ms; }
}