/**
 * RST Solutions - Design Tokens & Modern CSS Variables
 * WCAG AA compliant with modern enterprise tech styling.
 */

:root {
  /* Brand Identity */
  --brand-orange: #FF8200;       /* Primary brand: CTAs, highlights, icons */
  --brand-orange-light: #FFA133; /* Light orange tint for glows */
  --brand-orange-dark: #D96E00;  /* Darker brand orange for text & hover */
  --brand-red: #E8181C;          /* Secondary accent: badges, gradient ends */
  --brand-red-light: #FF3B30;
  
  /* Cyber & Tech Accents */
  --tech-cyan: #00D2FF;          /* High-speed data, telemetry highlights */
  --tech-blue: #0284C7;          /* Network & cloud accents */
  --tech-emerald: #10B981;       /* Operational status, 99.9% uptime */
  --tech-emerald-glow: rgba(16, 185, 129, 0.25);
  
  /* Dark & Ink Surfaces */
  --ink: #0A0D14;                /* Deep luxury tech ink for hero, dark sections, footer */
  --ink-secondary: #0F131D;      /* Secondary dark layer */
  --charcoal: #151A26;           /* Tech cards, dark cards */
  --charcoal-light: #1E2536;     /* Card hover states & inner borders */
  --dark-surface-card: #121622;
  
  /* High Readability Neutrals */
  --text: #2D3748;               /* Crisp body text */
  --text-dark: #0A0D14;          /* High contrast headings */
  --muted: #64748B;              /* Meta info, subtitles, secondary labels */
  --muted-light: #94A3B8;        /* Light muted for dark themes */
  --surface: #FFFFFF;            /* Pure white */
  --surface-alt: #F8FAFC;        /* Subtle slate-tinted section background */
  --surface-card: #FFFFFF;       /* Pure white card surface */
  --orange-text: #C2410C;        /* Darker orange for text/links on white (passes 4.5:1 AA) */

  /* Borders & Dividers */
  --border-light: #E2E8F0;
  --border-subtle: #F1F5F9;
  --border-dark: rgba(255, 255, 255, 0.1);
  --border-glass: rgba(255, 255, 255, 0.15);
  --border-glow-orange: rgba(255, 130, 0, 0.35);

  /* Gradients */
  --brand-gradient: linear-gradient(135deg, #FF8200 0%, #E8181C 100%);
  --brand-gradient-hover: linear-gradient(135deg, #FF941A 0%, #F5272B 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(255, 130, 0, 0.12) 0%, rgba(232, 24, 28, 0.04) 100%);
  --dark-gradient: linear-gradient(180deg, #0A0D14 0%, #121622 100%);
  --dark-card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  --cyber-glow-gradient: radial-gradient(circle at 50% 0%, rgba(255, 130, 0, 0.18) 0%, transparent 70%);

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Typography Scale */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */

  /* Spacing Scale (8px system) */
  --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;
  --space-32: 128px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Modern Depth & Shadows */
  --shadow-xs: 0 1px 2px rgba(10, 13, 20, 0.05);
  --shadow-sm: 0 2px 8px rgba(10, 13, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 13, 20, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 13, 20, 0.12);
  --shadow-xl: 0 24px 60px -12px rgba(10, 13, 20, 0.18);
  --shadow-orange: 0 10px 30px rgba(255, 130, 0, 0.32);
  --shadow-glow-orange: 0 0 35px rgba(255, 130, 0, 0.28);
  --shadow-glow-cyan: 0 0 35px rgba(0, 210, 255, 0.22);
  --shadow-dark-card: 0 12px 36px rgba(0, 0, 0, 0.45);

  /* Layout */
  --container-max: 1280px;
  --container-pad: 24px;
  --header-height: 82px;

  /* Transitions */
  --transition-fast: 180ms ease;
  --transition-base: 280ms ease;
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(255, 130, 0, 0.45);
}

@media (max-width: 768px) {
  :root {
    --container-pad: 16px;
    --header-height: 70px;
  }
}

@media (max-width: 360px) {
  :root {
    --container-pad: 12px;
  }
}