/*
 * Bare-named NSYD design tokens (verbatim from the NSYD Design System's
 * tokens/*.css), kept alongside the Tailwind theme in
 * app/assets/tailwind/application.css. The Tailwind theme prefixes color
 * vars with --color-* per Tailwind's own convention (--color-brand, etc);
 * views built from the design's source markup reference the original bare
 * names directly (var(--brand), var(--container-max), var(--weight-bold)),
 * so both forms are kept available rather than rewriting every view style.
 */
:root {
  --teal-50: #effaf8;
  --teal-100: #ddf4f0;
  --teal-200: #b5e7df;
  --teal-300: #7ad4c6;
  --teal-400: #2bbca6;
  --teal-500: #00a992;
  --teal-600: #008f7d;
  --teal-700: #007a6a;
  --teal-800: #005d51;
  --teal-900: #00453c;

  --ink-900: #2b2b2b;
  --ink-700: #404040;
  --ink-500: #6b6b6b;
  --ink-400: #8a8a8a;
  --ink-300: #b3b3b3;
  --ink-200: #d6d6d6;
  --ink-100: #ececec;
  --ink-50: #f7f7f7;

  --red-500: #ea0000;
  --red-100: #fde8e8;
  --amber-500: #d98a06;
  --amber-100: #fbf1dd;

  --brand: var(--teal-500);
  --brand-strong: var(--teal-600);
  --brand-pressed: var(--teal-700);
  --brand-soft: var(--teal-100);
  --brand-faint: var(--teal-50);

  --text-heading: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-brand: #ffffff;
  --text-link: var(--teal-600);

  --surface-page: #ffffff;
  --surface-card: #ffffff;
  --surface-tint: var(--teal-50);
  --surface-inset: var(--ink-50);

  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand: var(--teal-300);

  --focus-ring: var(--teal-400);

  --danger: var(--red-500);
  --danger-soft: var(--red-100);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-100);
  --success: var(--teal-600);
  --success-soft: var(--teal-100);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --container-max: 1120px;
}