/* ==========================================================================
   INNOVANATEC — Design Tokens
   Single source of truth for colour, type, space, radius, shadow, motion.
   Change a value here and it propagates across the whole site.
   ========================================================================== */

:root {
  /* ---------- Brand (sampled from the supplied logo) ---------- */
  --brand-orange: #f1592a;
  --brand-orange-600: #d94a1e;
  --brand-orange-300: #ff8a4c;
  --brand-blue: #0e76bc;
  --brand-blue-300: #4fa8e8; /* accessible blue for text — 8:1 on --ink-900 */
  --brand-grey: #58585a; /* logo grey — light backgrounds only */

  /* ---------- Surfaces ---------- */
  --ink-950: #0a0c10;
  --ink-900: #101319;
  --ink-850: #13161d;
  --ink-800: #171b23;
  --ink-750: #1d222c;
  --ink-700: #232833;
  --ink-600: #2e3542;

  /* ---------- Text ---------- */
  --text-hi: #f2f4f8; /* 16.9:1 */
  --text-mid: #a8afbd; /* 8.4:1  */
  --text-low: #6c7484; /* 3.9:1 — large/bold labels only, never body copy */

  /* ---------- Effects ---------- */
  --grad-primary: linear-gradient(135deg, #f1592a 0%, #ff8a4c 100%);
  --grad-blue: linear-gradient(135deg, #0e76bc 0%, #4fa8e8 100%);
  --grad-mesh:
    radial-gradient(circle at 18% 12%, rgba(14, 118, 188, 0.3), transparent 55%),
    radial-gradient(circle at 82% 58%, rgba(241, 89, 42, 0.22), transparent 52%);
  --grad-line: linear-gradient(90deg, transparent, var(--ink-600) 20%, var(--ink-600) 80%, transparent);

  --ring: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--brand-orange);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 56px -16px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 18px 48px -18px rgba(241, 89, 42, 0.55);

  /* ---------- Type ---------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-display: clamp(2.5rem, 6.4vw, 5rem);
  --fs-h1: clamp(2.1rem, 5vw, 3.6rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.55rem);
  --fs-h4: clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body-lg: clamp(1.03rem, 1.35vw, 1.18rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.06;
  --lh-snug: 1.25;
  --lh-body: 1.68;
  --ls-eyebrow: 0.18em;

  /* ---------- Space ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --section-y: clamp(64px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 48px);
  --maxw: 1280px;
  --maxw-prose: 68ch;

  /* ---------- Radius ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- 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: 160ms;
  --t-base: 280ms;
  --t-slow: 560ms;
  --t-reveal: 700ms;

  /* ---------- Layers ---------- */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-top: 300;

  --header-h: 76px;
}

@media (max-width: 1023px) {
  :root {
    --header-h: 64px;
  }
}