/* ==========================================================================
   MAHAR MUZAMIL — DIGITAL HEADQUARTERS
   Design Tokens & CSS Variables
   Strict Light-Mode, Solid Fills Only (Zero Gradients), 8px Grid Base
   ========================================================================== */

:root {
  /* Surfaces & Canvas (Solid Fills Only) */
  --surface-canvas:         #FFFFFF; /* Pure white page background */
  --surface-alt:            #F8FAFC; /* Slate-50: Alternating section background */
  --surface-card:           #FFFFFF; /* White card surface */
  --surface-card-subtle:    #F0F5FA; /* Pale blue-gray container */
  --surface-accent-pale:    #EBF3FC; /* 10% electric blue tint for pills & backdrops */
  --surface-backdrop-shape: #0878E8; /* Solid electric blue curved hero accent */

  /* Inks & Typography */
  --ink-primary:            #0A1128; /* Midnight Navy: Primary headlines & body */
  --ink-secondary:          #475467; /* Slate-600: Subtitles, leads & descriptions */
  --ink-muted:              #64748B; /* Slate-500: Captions, dates, meta & counts */
  --ink-white:              #FFFFFF; /* Pure white for text on blue/dark buttons */

  /* Primary Brand Blue Palette */
  --blue-primary:           #0878E8; /* Signature Electric Blue */
  --blue-secondary:         #005FCC; /* Secondary interactive hover blue */
  --blue-hover:             #005FCC; /* Interactive hover state */
  --blue-dark:              #004BB3; /* Deeper blue for active/hover */
  --blue-pressed:           #004BB3; /* Active touch/click state */
  --blue-light:             #EBF3FC; /* Pale blue container fill */
  --blue-ring:              #93C5FD; /* Focus ring outer glow */

  /* Status Colors (Solid Fills Only — Zero Gradients) */
  --status-live-bg:         #FEE2E2;
  --status-live-text:       #DC2626;
  --status-hot-bg:          #FEF3C7;
  --status-hot-text:        #D97706;
  --status-new-bg:          #DCFCE7;
  --status-new-text:        #16A34A;
  --status-featured-bg:     #E0E7FF;
  --status-featured-text:   #4F46E5;
  --status-growth-bg:       #DCFCE7;
  --status-growth-text:     #15803D;

  /* Borders, Dividers & Hairlines */
  --line-subtle:            #E2E8F0; /* Slate-200: Default card borders & dividers */
  --line-strong:            #CBD5E1; /* Slate-300: Active cards & form inputs */
  --line-blue:              #93C5FD; /* Focus borders */

  /* Shadows (Restrained, Natural, Non-Neon) */
  --shadow-xs:              0 1px 2px 0 rgba(10, 17, 40, 0.04);
  --shadow-card:            0 4px 12px 0 rgba(10, 17, 40, 0.05), 0 1px 3px 0 rgba(10, 17, 40, 0.03);
  --shadow-floating:        0 12px 24px -4px rgba(10, 17, 40, 0.08), 0 4px 8px -2px rgba(10, 17, 40, 0.04);
  --shadow-modal:           0 20px 40px -8px rgba(10, 17, 40, 0.14);

  /* Font Stacks */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hand:    'Caveat', 'Kalam', cursive;
  --font-mono:    'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-urdu:    'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Urdu Typesetting', Tahoma, serif;

  /* Font Sizes */
  --text-hero:    clamp(2.5rem, 5vw, 3.5rem);   /* 40px to 56px / 1.1 */
  --text-h1:      clamp(2.0rem, 3.5vw, 2.5rem); /* 32px to 40px / 1.2 */
  --text-h2:      clamp(1.6rem, 2.8vw, 2.0rem); /* 26px to 32px / 1.25 */
  --text-h3:      clamp(1.3rem, 2.0vw, 1.5rem); /* 20px to 24px / 1.3 */
  --text-h4:      1.25rem;                      /* 20px / 1.35 */
  --text-lead:    1.125rem;                     /* 18px / 1.6 */
  --text-body:    1.0rem;                       /* 16px / 1.6 */
  --text-sm:      0.875rem;                     /* 14px / 1.5 */
  --text-xs:      0.75rem;                      /* 12px / 1.4 */
  --text-stat:    1.75rem;                      /* 28px / 1.1 */
  --text-hand:    1.375rem;                     /* 22px / 1.2 */

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Spacing (8px Grid Foundation) */
  --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;

  /* Layout Containers */
  --container-max:  1280px;
  --container-pad:  clamp(1rem, 4vw, 2.5rem);
  --section-gap:    clamp(4rem, 6vw, 6.5rem);

  /* Border Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Borders */
  --border-hairline: 1px solid var(--line-subtle);
  --border-card:     1.5px solid var(--line-subtle);
  --border-active:   1.5px solid var(--blue-primary);
  --border-focus:    2px solid var(--blue-primary);

  /* Motion & Easing */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}