/* ==========================================================================
   IGNC — Design Tokens
   Palette derived from the I.G.N.C emblem: royal blue, violet, leaf green,
   gold. Everything downstream references these variables only.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --c-blue-900: #060c33;
  --c-blue-800: #0a1450;
  --c-blue-700: #101e78;
  --c-blue-600: #1c30a8;
  --c-blue-500: #2b49d4;
  --c-blue-400: #5b7bf0;
  --c-blue-200: #b9c7fb;

  --c-violet-600: #6d1fb0;
  --c-violet-500: #8a2be2;
  --c-violet-400: #a75cf0;

  --c-green-600: #3f9a12;
  --c-green-500: #5cb800;
  --c-green-400: #86d92e;

  --c-gold-600: #d98a00;
  --c-gold-500: #f5a623;
  --c-gold-400: #ffc356;

  /* --- Neutrals --------------------------------------------------------- */
  --c-ink: #0b1030;
  --c-ink-soft: #39406b;
  --c-muted: #6b7194;
  --c-line: #e4e7f4;
  --c-surface: #ffffff;
  --c-surface-2: #f6f7fd;
  --c-surface-3: #eef1fb;

  /* --- Semantic --------------------------------------------------------- */
  --bg: var(--c-surface);
  --bg-alt: var(--c-surface-2);
  --text: var(--c-ink);
  --text-soft: var(--c-ink-soft);
  --text-muted: var(--c-muted);
  --border: var(--c-line);
  --accent: var(--c-blue-600);

  /* --- Gradients -------------------------------------------------------- */
  --grad-brand: linear-gradient(
    115deg,
    var(--c-blue-600) 0%,
    var(--c-violet-500) 38%,
    var(--c-green-500) 72%,
    var(--c-gold-500) 100%
  );
  --grad-brand-soft: linear-gradient(
    115deg,
    rgba(28, 48, 168, 0.14),
    rgba(138, 43, 226, 0.14) 38%,
    rgba(92, 184, 0, 0.14) 72%,
    rgba(245, 166, 35, 0.14)
  );
  --grad-night: linear-gradient(165deg, #0a1450 0%, #060c33 55%, #0d0a2e 100%);
  --grad-gold: linear-gradient(100deg, #ffd98a, #f5a623 45%, #d98a00);

  /* Brand gradient, brightened so every stop stays legible on the navy
     backgrounds. The base --grad-brand runs too dark at the blue end to read
     as text on --grad-night. */
  --grad-brand-light: linear-gradient(
    115deg,
    #7f9bff 0%,
    #c08bff 36%,
    #9ae63f 70%,
    #ffc971 100%
  );

  /* Inverse: for gradient text sitting on white/light surfaces, where the
     green and gold stops of --grad-brand fall below 3:1. */
  --grad-brand-ink: linear-gradient(
    100deg,
    var(--c-blue-600) 0%,
    var(--c-violet-600) 60%,
    #a83a8c 100%
  );

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system,
    sans-serif;

  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --fs-lg: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
  --fs-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --fs-3xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --fs-hero: clamp(2.3rem, 1.6rem + 2.7vw, 3.9rem);

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.72;

  --tracking-wide: 0.16em;

  /* --- Space ------------------------------------------------------------ */
  --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;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --maxw: 1200px;
  --maxw-narrow: 760px;

  /* --- Shape ------------------------------------------------------------ */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(11, 16, 48, 0.06), 0 2px 8px rgba(11, 16, 48, 0.05);
  --sh-md: 0 4px 12px rgba(11, 16, 48, 0.07), 0 14px 32px rgba(11, 16, 48, 0.08);
  --sh-lg: 0 10px 24px rgba(11, 16, 48, 0.09), 0 30px 70px rgba(11, 16, 48, 0.13);
  --sh-glow: 0 20px 60px rgba(28, 48, 168, 0.28);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 180ms;
  --t-med: 340ms;
  --t-slow: 620ms;

  /* --- Layers ----------------------------------------------------------- */
  --z-bg: 0;
  --z-content: 1;
  --z-float: 150;
  --z-drawer: 200;
  /* Above the drawer on purpose: the burger morphs into the close button, so
     it has to stay reachable while the drawer is open. */
  --z-header: 220;
  --z-top: 300;
}

/* Header height, kept in sync by nav.js for scroll-margin + drawer offset. */
:root {
  --header-h: 76px;
}