/* ============================================================
   TAE Design Tokens
   Canonical source: TAE-Design-System.md v0.1
   All TAE properties consume these tokens.
   ============================================================ */

:root {
  /* Core colours */
  --tae-black: #383838;
  --tae-white: #FFFFFF;
  --tae-blue: #1DA4FF;
  --tae-blue-deep: #0047AB;
  --tae-grey-light: #F5F5F5;
  --tae-grey-soft: #FAFAFA;
  --tae-grey-mid: #999999;
  --tae-grey-border: #E5E5E5;

  /* Tier colours */
  --tae-tier-free: #383838;
  --tae-tier-2: #D5D4D2;
  --tae-tier-3: #C5A26D;
  --tae-tier-4: #A5A29D;

  /* Semantic */
  --tae-success: #4CAF50;
  --tae-warning: #F57C00;
  --tae-error: #D32F2F;
  --tae-selection-bg: #0047AB;
  --tae-selection-text: #FFFFFF;

  /* Typography */
  --tae-font-heading: "Lora", serif;
  --tae-font-body: "Inter", sans-serif;

  /* Spacing (8px grid) */
  --tae-space-1: 4px;
  --tae-space-2: 8px;
  --tae-space-3: 12px;
  --tae-space-4: 16px;
  --tae-space-6: 24px;
  --tae-space-8: 32px;
  --tae-space-10: 40px;
  --tae-space-12: 48px;
  --tae-space-16: 64px;

  /* Content widths */
  --tae-content-max: 1200px;
  --tae-content-narrow: 800px;
  --tae-content-wide: 1400px;
  --tae-content-gutter: 24px;

  /* Breakpoints (used in media queries, not as vars) */
  /* Mobile: max-width 767px */
  /* Tablet: 768px - 980px */
  /* Desktop: 981px+ */
  /* Wide: 1405px+ */
}