/* RevenueOS Design System Tokens */
:root {
  /* Color Palette - Design System */
  --color-primary: #5862FF;       /* Rocket Blue */
  --color-accent: #8D94FF;        /* Soft Periwinkle */
  --color-primary-dark: #434BDB;   /* Darker Blue for hover */
  --color-primary-light: #EEF0FF;  /* Subtle tint background */
  
  --color-surface: #FFFFFF;       /* Pure White */
  --color-bg-subtle: #F8F9FD;     /* Soft Background */
  --color-bg-alt: #F3F4FB;        /* Alternate section background */
  
  --color-text: #0B081C;          /* Deep Navy Text */
  --color-text-muted: #525866;    /* Medium Neutral Body */
  --color-text-light: #868C98;    /* Caption & Meta Text */
  
  --color-border: #E2E4E9;        /* Card & Divider Border */
  --color-border-hover: #C5C9D3;  /* Hover Border */
  --color-border-accent: #8D94FF; /* Accent Border */

  /* Status / Indicator Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #3B82F6;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Font Sizes */
  --font-size-display: clamp(2.5rem, 5vw, 3.5rem); /* 40px to 56px */
  --font-size-h1: clamp(2rem, 4vw, 2.75rem);       /* 32px to 44px */
  --font-size-h2: clamp(1.5rem, 3vw, 2.25rem);      /* 24px to 36px */
  --font-size-h3: clamp(1.25rem, 2vw, 1.5rem);      /* 20px to 24px */
  --font-size-h4: 1.125rem;                        /* 18px */
  --font-size-body-lg: 1.125rem;                   /* 18px */
  --font-size-body: 1rem;                          /* 16px */
  --font-size-sm: 0.875rem;                        /* 14px */
  --font-size-xs: 0.75rem;                         /* 12px */

  /* Spacing System (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* Shadows (Restrained & Flat per design rules) */
  --shadow-sm: 0 1px 3px rgba(11, 8, 28, 0.05);
  --shadow-md: 0 4px 16px rgba(11, 8, 28, 0.06);
  --shadow-lg: 0 12px 32px rgba(88, 98, 255, 0.12);

  /* Layout Constants */
  --container-max: 1240px;
  --nav-height: 76px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}