/* 
 * -----------------------------------------------------------------------------
 * DESIGN TOKENS
 * ----------------------------------------------------------------------------- 
 */
:root {
  /* Colors */
  --jro-bg: #0B0D10;
  --jro-bg-secondary: #111419;
  --jro-card: #202329;
  --jro-surface-elevated: #282C32;
  --jro-border: #343840;
  
  --jro-maroon: #9E1735;
  --jro-maroon-hover: #B51D3D;
  --jro-maroon-dark: #651024;
  
  --jro-text-primary: #F7F7F7;
  --jro-text-secondary: #B8BBC2;
  --jro-text-muted: #858A93;
  
  --jro-success: #2FA85F;
  --jro-warning: #F2C94C;
  --jro-error: #D64545;

  /* Typography */
  --jro-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  /* Sizing and Layout */
  --jro-max-width: 1280px;
  --jro-gutter-desktop: 24px;
  --jro-gutter-mobile: 16px;
  --jro-control-min-height: 44px;
  
  /* Radii */
  --jro-border-radius: 8px;
  --jro-border-radius-lg: 12px;
  --jro-border-radius-pill: 9999px;
  
  /* Spacing */
  --jro-spacing-xs: 4px;
  --jro-spacing-sm: 8px;
  --jro-spacing-md: 16px;
  --jro-spacing-lg: 24px;
  --jro-spacing-xl: 32px;
  --jro-spacing-2xl: 48px;
  --jro-spacing-3xl: 64px;
}