:root {
  /* =========================================
   * Brand colors
   * ========================================= */
  --color-brand-trust-navy: #0f294a;
  --color-brand-slate-blue: #2a4b7c;
  --color-brand-action-blue: #0056d2;
  --color-brand-compliance-green: #0e793c;
  --color-brand-warning-amber: #b25c00;
  --color-brand-critical-crimson: #d12930;
  --color-brand-white: #ffffff;


  /* =========================================
   * Neutral palette
   * ========================================= */
  --color-text-primary: #1a1c20;
  --color-text-secondary: #4a4d55;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;


  --color-border-default: #e2e4e8;
  --color-border-strong: #cfd4dc;
  --color-surface-page: #f4f5f7;
  --color-surface-base: #ffffff;
  --color-surface-subtle: #f8f9fb;
  --color-surface-muted: #eef2f7;


  /* =========================================
   * Semantic aliases
   * ========================================= */
  --color-background: var(--color-brand-white);
  --color-background-alt: var(--color-surface-page);
  --color-surface-primary: var(--color-surface-base);
  --color-surface-secondary: var(--color-surface-subtle);
  --color-surface-dark: var(--color-brand-trust-navy);


  --color-heading: var(--color-brand-trust-navy);
  --color-body: var(--color-text-primary);
  --color-body-muted: var(--color-text-secondary);
  --color-link: var(--color-brand-action-blue);
  --color-link-hover: #0047af;


  --color-primary: var(--color-brand-action-blue);
  --color-primary-hover: #0047af;
  --color-primary-active: #00398d;


  --color-secondary: var(--color-brand-slate-blue);
  --color-secondary-hover: #213d65;
  --color-secondary-active: #19304f;


  --color-success: var(--color-brand-compliance-green);
  --color-success-bg: #e6f4ea;


  --color-warning: var(--color-brand-warning-amber);
  --color-warning-bg: #fef3c7;


  --color-danger: var(--color-brand-critical-crimson);
  --color-danger-bg: #fce8e8;


  --color-info: var(--color-brand-slate-blue);
  --color-info-bg: #f0f4fa;


  --color-overlay: rgba(15, 41, 74, 0.5);


  /* =========================================
   * Typography
   * ========================================= */
  --font-heading: 'Inter', 'Roboto', sans-serif;
  --font-body: 'Inter', 'Roboto', sans-serif;
  --font-serif: 'Merriweather', 'Georgia', serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;


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


  --line-height-tight: 1.2;
  --line-height-heading: 1.3;
  --line-height-body: 1.6;
  --line-height-relaxed: 1.8;


  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;


  /* Brand guideline aligned scale */
  --font-size-display: 3rem;
  --font-size-h1: 1.5rem;
  --font-size-h2: 1.125rem;
  --font-size-h3: 1rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.9375rem;
  --font-size-caption: 0.875rem;
  --font-size-label: 0.8125rem;
  --font-size-micro: 0.75rem;


  /* =========================================
   * Spacing scale
   * ========================================= */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;


  /* =========================================
   * Layout
   * ========================================= */
  --container-xs: 36rem;
  --container-sm: 48rem;
  --container-md: 64rem;
  --container-lg: 72rem;
  --container-xl: 80rem;
  --container-2xl: 90rem;


  --section-padding-y-sm: var(--space-12);
  --section-padding-y-md: var(--space-16);
  --section-padding-y-lg: var(--space-20);
  --section-padding-x: var(--space-4);


  /* =========================================
   * Radius
   * ========================================= */
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;


  /* =========================================
   * Borders
   * ========================================= */
  --border-width-thin: 1px;
  --border-width-medium: 2px;


  /* =========================================
   * Shadows
   * ========================================= */
  --shadow-sm: 0 1px 2px rgba(15, 41, 74, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 41, 74, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 41, 74, 0.12);


  /* =========================================
   * Legacy Motion (Deprecating in favor of structured motion tokens below)
   * ========================================= */
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;
  --transition-emphasized: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);


  /* =========================================
   * Motion (New Strategy Tokens)
   * ========================================= */
  --motion-duration-fast: 200ms;
  --motion-duration-medium: 300ms;
  --motion-duration-slow: 500ms;
  
  --motion-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

  --motion-transition-interactive: var(--motion-duration-fast) var(--motion-ease-out);
  --motion-transition-reveal: var(--motion-duration-medium) var(--motion-ease-in-out);


  /* =========================================
   * Component sizing
   * ========================================= */
  --navbar-height: 4.5rem;
  --button-height-sm: 2.5rem;
  --button-height-md: 3rem;
  --button-height-lg: 3.5rem;
  --input-height: 3rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;


  /* =========================================
   * Z-index
   * ========================================= */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 500;
  --z-toast: 700;
}