/* ═══════════════════════════════════════════════════════════
   NORTHERN UI KIT — DESIGN TOKENS
   Single source of truth. Import into every module & partial.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand Primaries ──────────────────────────────────── */
  --pink:       #e6007e;
  --blue:       #009fe3;
  --teal:       #27cfc3;
  --pink-light: #ff4aa7;
  --blue-light: #33b8f0;
  --pink-dark:  #b3005f;
  --blue-dark:  #007ab5;

  /* ─── Gradients ────────────────────────────────────────── */
  --grad:          linear-gradient(135deg, #e6007e 0%, #009fe3 100%);
  --grad-reverse:  linear-gradient(135deg, #009fe3 0%, #e6007e 100%);
  --grad-v:        linear-gradient(180deg, #e6007e 0%, #009fe3 100%);
  --grad-teal:     linear-gradient(135deg, #27cfc3 0%, #009fe3 100%);
  --grad-subtle:   linear-gradient(135deg, rgba(230,0,126,0.12) 0%, rgba(0,159,227,0.12) 100%);
  --grad-dark:     linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%);

  /* ─── Dark Neutrals ────────────────────────────────────── */
  --dark-900: #07080c;
  --dark-800: #0d0d0d;
  --dark-700: #111111;
  --dark-600: #1a1a1a;
  --dark-500: #242424;
  --dark-400: #2e2e2e;
  --dark-300: #3a3a3a;

  /* ─── Grey Scale ───────────────────────────────────────── */
  --grey-600: #555555;
  --grey-500: #676767;
  --grey-400: #888888;
  --grey-300: #aaaaaa;
  --grey-200: #cccccc;
  --grey-100: #e0e0e0;

  /* ─── White Alphas ─────────────────────────────────────── */
  --white:     #ffffff;
  --white-90:  rgba(255,255,255,0.9);
  --white-70:  rgba(255,255,255,0.7);
  --white-40:  rgba(255,255,255,0.4);
  --white-10:  rgba(255,255,255,0.1);
  --white-05:  rgba(255,255,255,0.05);

  /* ─── Semantic States ──────────────────────────────────── */
  --success: #27cfc3;
  --warning: #f5a623;
  --error:   #e6007e;
  --info:    #009fe3;

  /* ─── Typography ───────────────────────────────────────── */
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-serif:   'EB Garamond', Georgia, serif;
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* ─── Type Scale ───────────────────────────────────────── */
  --text-xxs: 0.625rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-md:  1.125rem;
  --text-lg:  1.25rem;
  --text-xl:  1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;
  --text-6xl: 4.5rem;
  --text-7xl: 6rem;
  --text-8xl: 8rem;

  /* ─── Spacing (4px grid) ───────────────────────────────── */
  --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;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* ─── Layout ───────────────────────────────────────────── */
  --margin:        10%;
  --margin-sm:     5%;
  --max-width:     1400px;
  --content-width: 900px;
  --gutter:        32px;

  /* ─── Border Radius ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 100px;

  /* ─── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.4);
  --shadow-xl:   0 24px 80px rgba(0,0,0,0.5);
  --shadow-pink: 0 8px 32px rgba(230,0,126,0.28);
  --shadow-blue: 0 8px 32px rgba(0,159,227,0.28);
  --shadow-glow: 0 0 60px rgba(230,0,126,0.15), 0 0 120px rgba(0,159,227,0.1);

  /* ─── Motion ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-slower:  700ms;
  --dur-scene:   1200ms;

  /* ─── Z-Index ──────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-nav:     1000;
  --z-overlay: 2000;
  --z-modal:   3000;
  --z-toast:   4000;

  /* ─── Shell ────────────────────────────────────────────── */
  --sidebar-w: 248px;
}

/* Production: prevent carousels/marquees from expanding body width */
html, body { overflow-x: hidden; }

/* Headings always use Bebas Neue — never Poppins */
h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Emphasis inside headings uses Garamond — smaller, italic, elegant */
h1 em, h2 em, h3 em {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.55em;
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.6);
  text-transform: none;
  letter-spacing: 0;
}