/* =============================================
   RAM Solutions — Design Tokens
   ============================================= */

:root {
  /* --- Primary Blue Palette --- */
  --primary-900: #001133;
  --primary-800: #001a4d;
  --primary-700: #002266;
  --primary-600: #003380;
  --primary-500: #0044aa;
  --primary-400: #2979ff;
  --primary-300: #5c9cff;
  --primary-200: #a3c4ff;
  --primary-100: #dce8ff;
  --primary-50: #eef4ff;

  /* --- Accent Colors --- */
  --accent-cyan: #00bcd4;
  --accent-cyan-light: #4dd0e1;
  --accent-cyan-glow: rgba(0, 188, 212, 0.25);
  --accent-orange: #ff8f00;
  --accent-orange-light: #ffb74d;
  --accent-green: #25d366;

  /* --- Surface & Background --- */
  --surface-50: #f8fafd;
  --surface-100: #f1f5f9;
  --surface-200: #e2e8f0;
  --surface-300: #cbd5e1;
  --surface-white: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.65);
  --surface-glass-strong: rgba(255, 255, 255, 0.85);
  --surface-glass-border: rgba(255, 255, 255, 0.35);
  --surface-glass-border-strong: rgba(255, 255, 255, 0.5);

  /* --- Text Colors --- */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-on-dark: #e2e8f0;
  --text-on-primary: #ffffff;

  /* --- Shadows (progressive depth) --- */
  --shadow-xs: 0 1px 2px rgba(0, 17, 51, 0.03);
  --shadow-sm: 0 2px 6px rgba(0, 17, 51, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 17, 51, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 17, 51, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 17, 51, 0.12);
  --shadow-glow-blue: 0 0 30px rgba(41, 121, 255, 0.15);
  --shadow-glow-cyan: 0 0 30px rgba(0, 188, 212, 0.2);

  /* --- Typography --- */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --fs-display: clamp(2.5rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.1rem, 1.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  /* --- Spacing --- */
  --section-py: clamp(4rem, 8vw, 7rem);
  --section-px: clamp(1.25rem, 5vw, 5%);
  --container-max: 1200px;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4rem;

  /* --- Border Radius --- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.35s var(--ease-out);
  --transition-slow: 0.6s var(--ease-out);

  /* --- Z-index layers --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-header: 500;
  --z-overlay: 900;
  --z-promo: 1000;
  --z-whatsapp: 800;
}