:root {
  /* ReadyMode Official Brand Colors */
  --riq-color-primary: #00D1DD;           /* Ready Teal */
  --riq-color-primary-hover: #00BBC6;     /* Ready Teal Light */
  --riq-color-primary-active: #00959E;    /* Ready Teal Links */
  --riq-color-secondary: #04123F;         /* Ready Navy */
  --riq-color-info: #00D1DD;
  --riq-color-success: #10b981;
  --riq-color-warning: #f59e0b;
  --riq-color-error: #ef4444;

  /* Neutral palette (adjusted for ReadyMode) */
  --riq-gray-50: #F5F7F7;                 /* Ready Light Gray */
  --riq-gray-100: #E0E4E4;
  --riq-gray-200: #C5CBCB;
  --riq-gray-300: #A8B0B0;
  --riq-gray-400: #8A9494;
  --riq-gray-500: #6B7878;
  --riq-gray-600: #475569;
  --riq-gray-700: #334155;
  --riq-gray-800: #1E293B;
  --riq-gray-900: #021D39;                /* Ready Dark */

  /* Surfaces - Light Mode */
  --riq-surface-background: #F5F7F7;      /* Ready Light Gray */
  --riq-surface-default: #FFFFFF;         /* Ready White */
  --riq-surface-raised: #FFFFFF;
  --riq-surface-border: #E0E4E4;

  /* Typography */
  --riq-font-family-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --riq-font-family-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --riq-font-weight-normal: 400;
  --riq-font-weight-medium: 500;
  --riq-font-weight-semibold: 600;
  --riq-font-weight-bold: 700;

  /* Sizing & spacing */
  --riq-space-1: 0.25rem;
  --riq-space-2: 0.5rem;
  --riq-space-3: 0.75rem;
  --riq-space-4: 1rem;
  --riq-space-5: 1.25rem;
  --riq-space-6: 1.5rem;
  --riq-space-8: 2rem;
  --riq-space-10: 2.5rem;
  --riq-space-12: 3rem;
  --riq-space-16: 4rem;

  /* Radii */
  --riq-radius-sm: 4px;
  --riq-radius-md: 6px;
  --riq-radius-lg: 8px;
  --riq-radius-xl: 12px;

  /* Shadows */
  --riq-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --riq-shadow-md: 0 8px 16px rgba(15, 23, 42, 0.08);
  --riq-shadow-lg: 0 16px 24px rgba(15, 23, 42, 0.12);

  /* Legacy variable aliases (kept for routeiq.ui.css compatibility) */
  --black: #000000;
  --white: var(--riq-surface-default);

  --success: var(--riq-color-success);
  --warning: var(--riq-color-warning);
  --error: var(--riq-color-error);
  --info: var(--riq-color-info);

  --font-sans: var(--riq-font-family-sans);
  --font-mono: var(--riq-font-family-mono);
  --font-normal: var(--riq-font-weight-normal);
  --font-medium: var(--riq-font-weight-medium);
  --font-semibold: var(--riq-font-weight-semibold);
  --font-bold: var(--riq-font-weight-bold);

  --space-1: var(--riq-space-1);
  --space-2: var(--riq-space-2);
  --space-3: var(--riq-space-3);
  --space-4: var(--riq-space-4);
  --space-5: var(--riq-space-5);
  --space-6: var(--riq-space-6);
  --space-8: var(--riq-space-8);
  --space-10: var(--riq-space-10);
  --space-12: var(--riq-space-12);
  --space-16: var(--riq-space-16);

  --radius-sm: var(--riq-radius-sm);
  --radius-md: var(--riq-radius-md);
  --radius-lg: var(--riq-radius-lg);
  --radius-xl: var(--riq-radius-xl);

  --shadow-sm: var(--riq-shadow-sm);
  --shadow: var(--riq-shadow-sm);
  --shadow-md: var(--riq-shadow-md);
  --shadow-lg: var(--riq-shadow-lg);
  --shadow-xl: var(--riq-shadow-lg);
}

[data-theme='dark'] {
  /* Dark Mode: ReadyMode Navy base */
  --riq-color-secondary: #64748B;

  --riq-surface-background: #04123F;      /* Ready Navy */
  --riq-surface-default: #0A1F54;         /* Lighter Navy */
  --riq-surface-raised: #0F2763;          /* Even lighter Navy */
  --riq-surface-border: #1A3266;

  --riq-gray-50: #F5F7F7;                 /* Inverted for dark mode */
  --riq-gray-100: #E0E4E4;
  --riq-gray-200: #C5CBCB;
  --riq-gray-300: #A8B0B0;
  --riq-gray-400: #8A9494;
  --riq-gray-500: #94A3B8;
  --riq-gray-600: #64748B;
  --riq-gray-700: #475569;
  --riq-gray-800: #334155;
  --riq-gray-900: #1E293B;

  --white: var(--riq-surface-default);
  --shadow-sm: 0 1px 2px rgba(4, 18, 63, 0.3);
  --shadow: 0 1px 2px rgba(4, 18, 63, 0.3);
  --shadow-md: 0 8px 16px rgba(4, 18, 63, 0.4);
  --shadow-lg: 0 20px 40px rgba(4, 18, 63, 0.5);
  --shadow-xl: 0 20px 40px rgba(4, 18, 63, 0.5);
}