/* ==========================================================================
   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 */
  --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 ---- */
  --paper:     #F6F8FC;  /* Page background */
  --card:      #FFFFFF;  /* Card surface */
  --line:      #E5EAF2;  /* Subtle borders */
  --line-soft: #EFF2F7;
  --line-dark: #1E315F;  /* Dark section dividers */

  --slate-900: #0F172A;
  --slate-700: #1E293B;
  --slate-600: #3D4A5C;  /* Primary body text */
  --slate-500: #56637A;
  --slate-400: #6B7789;  /* Muted captions */
  --slate-300: #94A3B8;
  --slate-100: #F1F5F9;

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

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

  /* ---- Typography Scale ----
     Compact, professional scale. Roughly 15–16px body with a restrained
     heading ramp so long service/blog headlines never overpower a card. */
  --text-2xs:  0.6875rem;                                          /* 11px  */
  --text-xs:   0.75rem;                                            /* 12px  */
  --text-sm:   0.8125rem;                                          /* 13px  */
  --text-base: clamp(0.9063rem, 0.88rem + 0.12vw, 0.9688rem);      /* 14.5–15.5px */
  --text-md:   clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);           /* 15–16px */
  --text-lg:   clamp(1rem, 0.96rem + 0.18vw, 1.0938rem);           /* 16–17.5px */
  --text-xl:   clamp(1.0938rem, 1.05rem + 0.22vw, 1.1875rem);      /* 17.5–19px */
  --text-2xl:  clamp(1.25rem, 1.18rem + 0.34vw, 1.4375rem);        /* 20–23px */
  --text-3xl:  clamp(1.5rem, 1.36rem + 0.62vw, 1.9375rem);         /* 24–31px */
  --text-4xl:  clamp(1.875rem, 1.62rem + 1.06vw, 2.625rem);        /* 30–42px */
  --text-5xl:  clamp(2.125rem, 1.76rem + 1.5vw, 3.125rem);         /* 34–50px */

  /* ---- Line Heights ---- */
  --lh-tight: 1.16;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(11, 27, 63, 0.05);
  --shadow-sm: 0 1px 3px rgba(11, 27, 63, 0.06), 0 1px 2px rgba(11, 27, 63, 0.03);
  --shadow-md: 0 6px 16px rgba(11, 27, 63, 0.07), 0 2px 4px rgba(11, 27, 63, 0.04);
  --shadow-lg: 0 16px 40px rgba(11, 27, 63, 0.10), 0 4px 12px rgba(11, 27, 63, 0.05);
  --shadow-xl: 0 28px 64px rgba(11, 27, 63, 0.16), 0 8px 20px rgba(11, 27, 63, 0.07);
  --shadow-orange: 0 6px 18px rgba(242, 103, 34, 0.28);
  --shadow-glow: 0 8px 24px rgba(242, 103, 34, 0.38);

  /* ---- Spacing (4px grid) ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --section-y: clamp(3.25rem, 5.5vw, 5rem);
  --section-y-sm: clamp(2.25rem, 4vw, 3.25rem);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-full: 9999px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-height: 68px;

  /* ---- Motion ---- */
  --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);
}

@media (min-width: 993px) {
  :root { --header-height: 76px; }
}