/* TNAADO tokens: copied verbatim from tools.tnaado.ca css/base/variables.css (:root block). Do not add new values here. */
:root {
  /* Brand */
  --ink:           #0a0a0a;
  --red:           #c8102e;
  --red-deep:      #8a0a1f;
  --red-soft:      rgba(200, 16, 46, 0.15);
  --red-mist:      rgba(200, 16, 46, 0.06);
  --bone:          #faf8f3;
  --ivory:         #f1ede4;
  --linen:         #ebe5d8;
  --rule:          rgba(10, 10, 10, 0.12);
  --rule-strong:   rgba(10, 10, 10, 0.22);
  --rule-on-black: rgba(245, 241, 232, 0.10);   /* refined hairline on dark canvas */
  --on-black:      #f5f1e8;
  --on-black-mute: rgba(245, 241, 232, 0.65);

  /* Backwards-compat aliases (so other CSS files don't break before refactor) */
  --cobalt:        var(--red);     /* old token mapped to red */
  --hairline:      var(--rule);
  --whisper:       var(--red-mist);
  --ink-muted:     rgba(10, 10, 10, 0.65);
  --white:         var(--bone);
  --black:         var(--ink);
  --gray-50:       var(--bone);
  --gray-100:      var(--ivory);
  --gray-200:      var(--rule);
  --gray-300:      var(--rule);
  --gray-400:      var(--ink-muted);
  --gray-500:      var(--ink-muted);
  --gray-600:      var(--ink-muted);
  --gray-700:      var(--ink);
  --gray-800:      var(--ink);
  --gray-900:      var(--ink);

  /* Semantic (re-tinted on red palette) */
  --color-success:        #4a7a3a;
  --color-success-light:  rgba(74, 122, 58, 0.1);
  --color-warning:        #8a6a00;
  --color-warning-light:  rgba(138, 106, 0, 0.1);
  --color-error:          var(--red);
  --color-error-light:    var(--red-soft);
  --color-info:           var(--ink);
  --color-info-light:     rgba(10, 10, 10, 0.08);

  /* Typography (TIGHTER — see DESIGN §2) */
  --font-display:  'Fraunces', 'Times New Roman', serif;
  --font-body:     'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'Consolas', monospace;
  --font-primary:  var(--font-body);

  --text-xs:    0.6875rem;   /* 11px — mono caps, eyebrows */
  --text-sm:    0.8125rem;   /* 13px — secondary body */
  --text-base:  1rem;        /* 16px — primary body (PRESERVE) */
  --text-lg:    1.1875rem;   /* 19px — lead */
  --text-xl:    1.375rem;    /* 22px — H4 */
  --text-2xl:   1.625rem;    /* 26px — H3 */
  --text-3xl:   2rem;        /* 32px — H2 (was 40 — TOO BIG) */
  --text-4xl:   2.75rem;     /* 44px — H1 standard */
  --text-5xl:   3.75rem;     /* 60px — hero only (was 72-88 — TOO BIG) */
  --text-6xl:   3.75rem;     /* alias */
  --text-7xl:   3.75rem;
  --text-8xl:   3.75rem;

  --font-light:     300;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 700;
  --font-black:     700;

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.375;
  --leading-normal:  1.55;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* ==================== Spacing ==================== */
  --spacing-0: 0;
  --spacing-1: 0.25rem;    /* 4px */
  --spacing-2: 0.5rem;     /* 8px */
  --spacing-3: 0.75rem;    /* 12px */
  --spacing-4: 1rem;       /* 16px */
  --spacing-5: 1.25rem;    /* 20px */
  --spacing-6: 1.5rem;     /* 24px */
  --spacing-8: 2rem;       /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px */
  --spacing-16: 4rem;      /* 64px */
  --spacing-20: 5rem;      /* 80px */
  --spacing-24: 6rem;      /* 96px */

  /* ==================== Layout ==================== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1180px;   /* per DESIGN.md §3 — max content width */
  --container-2xl: 1400px;

  /* ==================== Border Radius ==================== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ==================== Shadows ==================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ==================== Transitions ==================== */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-slower: 700ms ease;

  /* ==================== Z-Index Scale ==================== */
  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-header: 1000;
  --z-dropdown: 1050;
  --z-modal: 1100;
  --z-tooltip: 1150;
  --z-toast: 1200;

  /* ==================== Breakpoints (for reference) ==================== */
  /*
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  */
}