/* ZimSaaS design tokens — single source of truth.
   Colours pulled directly from the brand kit. Zero-radius is a hard rule. */

:root {
  /* Core brand palette */
  --cream: #FDFCF9;
  --deep-navy: #0A0A0F;
  --ocean-blue: #162C3D;
  --bright-blue: #588FDC;
  --bright-blue-hover: #6ba0ea;
  --bright-blue-pressed: #3a72c4;
  --charcoal: #1A1A1A;
  --text: #2A2A2A;
  --text-light: #6B6B6B;

  /* Extended palette in current use */
  --ember: #C45C26;
  --dark-1: #081019;
  --dark-2: #0d1722;
  --steel: #274a73;
  --steel-hi: #3d77cf;

  /* Surfaces */
  --surface-cream: var(--cream);
  --surface-navy: var(--deep-navy);
  --surface-navy-raised: #10101a;
  --surface-ocean: var(--ocean-blue);

  /* Lines & glows */
  --line-dark: rgba(255, 255, 255, 0.08);
  --line-dark-strong: rgba(255, 255, 255, 0.16);
  --line-light: rgba(10, 10, 15, 0.1);
  --line-light-strong: rgba(10, 10, 15, 0.22);
  --glow: rgba(88, 143, 220, 0.35);
  --glow-soft: rgba(88, 143, 220, 0.18);

  /* Typography */
  --font-sans: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --fs-eyebrow: 0.75rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-body-sm: 0.875rem;
  --fs-h1: clamp(2.375rem, 6.2vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 4.2vw, 2.875rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.625rem);
  --fs-display: clamp(3rem, 8vw, 5.5rem);

  --lh-tight: 1.02;
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --ls-eyebrow: 0.18em;
  --ls-heading: -0.02em;
  --ls-display: -0.03em;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(4rem, 9vw, 7.5rem);
  --container: 1200px;
  --container-narrow: 880px;

  /* Structure */
  --radius: 0;
  --border: 1px;
  --border-strong: 2px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* Shadow (used sparingly — brutalist offset on light cards only) */
  --shadow-hard: 6px 6px 0 var(--deep-navy);
  --shadow-hard-sm: 4px 4px 0 var(--deep-navy);

  /* Z-index */
  --z-sticky: 50;
  --z-header: 60;
  --z-overlay: 80;
}

/* Dark surface tokens scoped per section rather than a blanket body override.
   This lets us alternate light/dark without class gymnastics. */
.on-dark {
  --fg: var(--cream);
  --fg-dim: rgba(253, 252, 249, 0.72);
  --fg-muted: rgba(253, 252, 249, 0.52);
  --surface: var(--surface-navy);
  --surface-raised: var(--surface-navy-raised);
  --line: var(--line-dark);
  --line-strong: var(--line-dark-strong);
  --accent: var(--bright-blue);
}

.on-light {
  --fg: var(--text);
  --fg-dim: var(--text-light);
  --fg-muted: #8a8a8a;
  --surface: var(--surface-cream);
  --surface-raised: #ffffff;
  --line: var(--line-light);
  --line-strong: var(--line-light-strong);
  --accent: var(--steel-hi);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}