/* ==========================================================================
   Radhe Computer Design Tokens
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --navy-900: #0B1B3F;   /* Dark background, headings, footer */
  --navy-800: #0E2250;
  --navy-700: #12296B;   /* Deep brand blue */
  --navy-600: #163B8C;   /* Primary royal blue (flyer background) */
  --navy-500: #2450B8;   /* Interactive blue */
  --navy-100: #EBF1FF;   /* Soft blue tint */
  --navy-50:  #F4F7FF;   /* Light blue surface */

  --orange-600: #D95314;
  --orange-500: #F26722; /* Primary accent / CTA (logo orange) */
  --orange-400: #FF8A3D; /* Signal pulse highlight */
  --orange-100: #FFECE2; /* Soft orange tint */

  /* Neutral Surface & Text Colors */
  --paper:     #F7F9FC;  /* Page background */
  --card:      #FFFFFF;  /* Card surface */
  --line:      #E4EAF3;  /* Subtle borders */
  --line-dark: #1E315F;  /* Dark section dividers */

  --slate-900: #0F172A;
  --slate-700: #1E293B;
  --slate-600: #334155;  /* Primary body text */
  --slate-500: #475569;
  --slate-400: #64748B;  /* Muted captions */
  --slate-300: #94A3B8;
  --slate-100: #F1F5F9;

  --success:   #16A34A;  /* WhatsApp green / Success indicator */
  --success-bg:#DCFCE7;

  /* Fonts */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Typography Scale (Fluid clamp) */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm:   clamp(0.85rem, 0.8rem + 0.25vw, 0.9375rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
  --text-lg:   clamp(1.1rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl:   clamp(1.3rem, 1.2rem + 0.6vw, 1.5625rem);
  --text-2xl:  clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --text-3xl:  clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --text-4xl:  clamp(2.5rem, 2.1rem + 2vw, 3.5rem);

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 3px rgba(11, 27, 63, 0.06), 0 1px 2px rgba(11, 27, 63, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 27, 63, 0.08), 0 2px 4px rgba(11, 27, 63, 0.04);
  --shadow-lg: 0 12px 28px rgba(11, 27, 63, 0.12), 0 4px 10px rgba(11, 27, 63, 0.06);
  --shadow-orange: 0 8px 24px rgba(242, 103, 34, 0.35);
  --shadow-glow: 0 0 20px rgba(255, 138, 61, 0.4);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Container */
  --container-max: 1240px;
  --header-height: 80px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}