:root {
  /* Brand */
  --color-primary: #050579;
  --color-primary-hover: #07079A;
  --color-primary-dark: #03034F;

  /* Accent */
  --color-accent-orange: #F97316;
  --color-accent-orange-hover: #EA580C;

  /* Support */
  --color-support-green: #84CC16;
  --color-support-green-hover: #65A30D;

  /* Background / Surface */
  --color-bg-main: #EEF0FF;
  --color-bg-alt: #F6F8FF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #E8ECFF;

  /* Border / Divider */
  --color-border: #D9E1F2;
  --color-border-default: var(--color-border);
  --color-border-soft: var(--color-border);
  --color-divider: #C7D2E5;

  /* Text */
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-text-on-dark: #FFFFFF;

  /* Semantic */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
  --color-info: #2563EB;

  /* Interaction */
  --color-focus-ring: rgba(5, 5, 121, 0.35); /* verify 3:1 non-text contrast against --color-bg-main */

  /* CTA Button — accessible orange (4.63:1 on white, WCAG AA) */
  --color-accent-orange-cta: #EA580C;
  --color-accent-orange-cta-hover: #D9440A;

  /* Support Green — text-safe dark variant (7.1:1 on white) */
  --color-support-green-text: #3D6C07;

  /* Disabled */
  --color-disabled-bg: #E2E8F0;
  --color-disabled-text: #94A3B8;
  --color-disabled-border: #CBD5E1;

  /* Skeleton / Loading shimmer */
  --color-skeleton-base: #E8ECFF;
  --color-skeleton-highlight: #F6F8FF;

  /* Modal overlay */
  --color-overlay: rgba(15, 23, 42, 0.55);

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  --font-heading: "DM Serif Display", Georgia, serif;
  --font-body: "DM Sans", "Noto Sans Thai", sans-serif;
  --font-mono: "DM Mono", "IBM Plex Mono", monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;

  /* font-weight: unitless per CSS spec */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.1);
}