/* ============================================================
   HEETU K-PACK — DESIGN SYSTEM / DESIGN TOKENS
   Brand colours extracted directly from the official logo:
     Navy  #323956  (primary)
     Orange #F34F24 (accent)
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --navy-900: #10182e;
  --navy-800: #172140;
  --navy-700: #1e2b4d;
  --navy-600: #26355c;   /* deep brand navy */
  --navy-500: #323956;   /* logo navy */
  --navy-400: #45507a;
  --navy-300: #6b76a0;
  --navy-200: #a6adc7;
  --navy-100: #d7dbe8;
  --navy-050: #eef0f6;

  --orange-700: #c23c15;
  --orange-600: #e14a1e;
  --orange-500: #f34f24;  /* logo orange */
  --orange-400: #ff6a3d;
  --orange-300: #ff8a63;
  --orange-200: #ffb49b;
  --orange-100: #ffe1d6;
  --orange-050: #fff2ec;

  /* ---- Semantic roles ---- */
  --color-primary: var(--navy-600);
  --color-primary-deep: var(--navy-800);
  --color-accent: var(--orange-500);
  --color-accent-hover: var(--orange-400);

  --color-heading: var(--navy-600);
  --color-body: #414b63;
  --color-muted: #737d96;
  --color-faint: #9aa2b6;

  --color-surface: #ffffff;
  --color-surface-2: #f6f8fc;
  --color-surface-3: #eef2f9;
  --color-border: #e2e7f1;
  --color-border-strong: #cdd4e4;

  --color-success: #1f9d6b;
  --color-warning: #e8a417;
  --color-error: #e0483b;
  --color-info: #2f7fe0;

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-400) 55%, #ff7d4f 100%);
  --grad-navy: linear-gradient(150deg, var(--navy-700) 0%, var(--navy-600) 45%, var(--navy-800) 100%);
  --grad-hero: linear-gradient(150deg, #101a33 0%, #1c2c52 48%, #24365f 100%);
  --grad-accent-soft: linear-gradient(135deg, var(--orange-050), var(--navy-050));
  --grad-text: linear-gradient(100deg, var(--orange-500), var(--orange-300));
  --grad-line: linear-gradient(90deg, transparent, var(--orange-500), transparent);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.6rem, 5.4vw, 4.6rem);
  --fs-h1: clamp(2.1rem, 4vw, 3.3rem);
  --fs-h2: clamp(1.7rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.7rem);
  --fs-h4: clamp(1.1rem, 1.4vw, 1.28rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.28rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-normal: 1.65;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(3.5rem, 7vw, 7rem);
  --container: 1220px;
  --container-narrow: 900px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-xs: 0 1px 2px rgba(16, 24, 46, .06);
  --sh-sm: 0 4px 14px rgba(24, 33, 64, .07);
  --sh-md: 0 12px 34px rgba(24, 33, 64, .10);
  --sh-lg: 0 26px 60px rgba(20, 28, 55, .16);
  --sh-accent: 0 14px 34px rgba(243, 79, 36, .32);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 200ms;
  --t-mid: 300ms;
  --t-slow: 500ms;

  /* ---- Layout chrome ---- */
  --header-h: 84px;
  --header-h-shrunk: 66px;
  --z-header: 1000;
  --z-drawer: 1100;
  --z-loader: 1300;
  --z-cursor: 1500;
  --z-toast: 1400;

  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .5);
  --glass-blur: saturate(160%) blur(16px);
}