/* Transportation Discipline design system.
   Canonical visual tokens live here. Feature/page styles should consume these
   variables rather than introducing new one-off colors, spacing, or radii. */

:root {
  /* Brand */
  --color-brand-plum: #5a314d;
  --color-brand-plum-dark: #342a32;
  --color-brand-coral: #c5634f;
  --color-brand-coral-dark: #9d493b;
  --color-brand-gold: #f5b51b;

  /* Application palette */
  --color-primary: #173a6b;
  --color-primary-hover: #102f5a;
  --color-primary-active: #0d294f;
  --color-primary-soft: #eef4fb;
  --color-background: #f3f6fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f8fafc;
  --color-text: #162338;
  --color-text-strong: #17243a;
  --color-text-muted: #65768a;
  --color-border: #dde5f0;
  --color-border-strong: #cfd9e6;
  --color-success: #21613b;
  --color-success-soft: #ecf8f0;
  --color-warning: #875f00;
  --color-warning-soft: #fff6df;
  --color-danger: #aa2b2b;
  --color-danger-hover: #8f2020;
  --color-danger-soft: #fff6f6;

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: .75rem;
  --font-size-sm: .82rem;
  --font-size-md: .92rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.05rem;
  --font-weight-medium: 650;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --line-height-base: 1.5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Controls */
  --control-height: 44px;
  --control-height-compact: 34px;
  --control-padding-x: 17px;

  /* Layout */
  --page-max-width: 1320px;
  --content-max-width: 1120px;
  --drawer-width: 320px;
  --header-z: 80;
  --drawer-backdrop-z: 98;
  --drawer-z: 99;
  --popover-z: 1400;

  /* Effects */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .12);
  --shadow-md: 0 10px 24px rgba(20, 55, 95, .08);
  --shadow-lg: 0 18px 45px rgba(15, 23, 42, .18);
  --focus-ring: 0 0 0 3px rgba(23, 58, 107, .22);
  --transition-fast: 150ms ease;

  /* Compatibility aliases used by older feature styles while migration is in progress. */
  --brand-plum: var(--color-brand-plum);
  --brand-plum-dark: var(--color-brand-plum-dark);
  --brand-coral: var(--color-brand-coral);
  --brand-coral-dark: var(--color-brand-coral-dark);
  --tdm-navy: var(--color-primary);
  --tdm-navy-2: #0b477f;
  --tdm-gold: var(--color-brand-gold);
  --tdm-line: var(--color-border);
  --app-blue: var(--color-primary);
  --app-header: var(--color-brand-plum-dark);

  /* Button aliases retained for existing selectors. */
  --btn-primary: var(--color-primary);
  --btn-primary-hover: var(--color-primary-hover);
  --btn-primary-active: var(--color-primary-active);
  --btn-secondary-bg: var(--color-surface);
  --btn-secondary-text: var(--color-primary);
  --btn-secondary-border: #b8c7d9;
  --btn-secondary-hover: #f3f6fa;
  --btn-danger: var(--color-danger);
  --btn-danger-hover: var(--color-danger-hover);
  --btn-danger-soft: var(--color-danger-soft);
  --btn-focus: rgba(23, 58, 107, .22);
  --btn-height: var(--control-height);
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--font-size-md);
  --btn-padding-x: var(--control-padding-x);
}