/* =========================================================
   VARIABLES.CSS — Design Tokens & Theme System
   Noisy Pixel Studios | www/nps-2
   ========================================================= */

/* ── Brand Colors (constant, never change between themes) ─ */
:root {
  --clr-magenta:     #FF2E97;
  --clr-magenta-dk:  #D91B7A;
  --clr-magenta-glow:rgba(255, 46, 151, 0.25);
  --clr-blue:        #0066DD;
  --clr-blue-dk:     #004EB0;
  --clr-blue-glow:   rgba(0, 102, 221, 0.2);
  --clr-orange:      #FF6644;
  --clr-cyan:        #00BBEE;
  --clr-navy:        #0A0E27;
  --clr-navy-mid:    #131736;
  --clr-purple:      #5533BB;

  /* ── Hero section is always forced-dark ─────────────── */
  --hero-bg-start:   #0A0E27;
  --hero-bg-end:     #131736;
  --hero-text:       #F4F4F6;
  --hero-subtext:    #A8AABE;
  --hero-border:     rgba(255, 255, 255, 0.12);

  /* ── Typography ─────────────────────────────────────── */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

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

  /* ── Spacing ─────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

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

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-theme:  background-color 300ms ease,
                       color 300ms ease,
                       border-color 300ms ease,
                       box-shadow 300ms ease;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-modal:   1000;
  --z-top:     9999;

  /* ── Container ───────────────────────────────────────── */
  --container-max:  1280px;
  --container-pad:  clamp(1.25rem, 5vw, 3rem);
}

/* ─────────────────────────────────────────────────────────
   LIGHT MODE (default)
   ───────────────────────────────────────────────────────── */
:root {
  --bg-primary:   #FAFAF8;
  --bg-secondary: #FFFFFF;
  --bg-elevated:  #F2F2F4;
  --bg-inset:     #EBEBED;

  --text-primary:   #1A1A1C;
  --text-secondary: #5A5A5E;
  --text-muted:     #9A9A9E;

  --border:        #E2E2E4;
  --border-strong: #C8C8CA;

  --nav-bg: rgba(250, 250, 248, 0.92);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);

  --card-hover-border: var(--clr-magenta);
  --card-hover-shadow: 0 12px 40px rgba(255,46,151,0.12);

  /* Industries strip */
  --industries-bg: #FFFFFF;
  --industries-border: var(--border);

  /* Testimonial */
  --testimonial-bg: var(--clr-blue);
}

/* ─────────────────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:   #121219;
  --bg-secondary: #1A1A24;
  --bg-elevated:  #22222E;
  --bg-inset:     #2A2A38;

  --text-primary:   #F0F0F2;
  --text-secondary: #A0A0AA;
  --text-muted:     #606068;

  --border:        #2E2E3A;
  --border-strong: #3E3E4E;

  --nav-bg: rgba(18, 18, 25, 0.92);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.60), 0 8px 24px rgba(0,0,0,0.35);

  --card-hover-border: var(--clr-magenta);
  --card-hover-shadow: 0 12px 40px rgba(255,46,151,0.18);

  --industries-bg: var(--bg-secondary);
  --industries-border: var(--border);

  --testimonial-bg: var(--clr-blue);
}