/* ============================================================
   SPARZAN — Design Tokens
   The single source of truth for color, type, spacing, etc.
   Change a value here and it updates everywhere on the site.
   ============================================================ */

:root {
  /* ---- Brand ---------------------------------------------- */
  /* Sparzan primary flipped to Autopilot-inspired sky cyan. The
     previous indigo-violet #533afd stays as --violet-500 for
     gradient stops and secondary accents. */
  --brand-50:  #e6f5fe;
  --brand-100: #c2e6fc;
  --brand-200: #8ed4f9;
  --brand-300: #5abff5;
  --brand-400: #2ba9ef;
  --brand-500: #0a97f0; /* primary — sky cyan */
  --brand-600: #0578c8;
  --brand-700: #06609e;
  --accent-400: #7cd8ff;
  --accent-500: #22c7ff; /* light sky accent */
  --accent-warm: #ff7a5c; /* coral — used sparingly for pull-quotes */
  --violet-500: #533afd; /* the old Sparzan primary, now secondary */
  --violet-600: #4329e0;
  --violet-400: #8466fe;

  /* ---- Ink / Neutrals ------------------------------------- */
  --ink-900: #0a0b1a; /* headings */
  --ink-800: #14162b;
  --ink-700: #1f2238;
  --ink-600: #353a57;
  --ink-500: #4a5072; /* body text */
  --ink-400: #6b7194;
  --ink-300: #9aa0bf;
  --ink-200: #c9cde2;
  --ink-100: #e7e9f4;

  --paper:        #ffffff;
  --paper-soft:   #f7f8fc; /* section background */
  --paper-softer: #eef0f8;

  /* ---- Signature gradients -------------------------------- */
  /* Sky-cyan primary + soft violet secondary, closer to Autopilot's
     rounded card gradient and the pale-sky hero backdrop. */
  --gradient-brand:      linear-gradient(135deg, var(--brand-500) 0%, var(--accent-500) 60%, var(--brand-300) 100%);
  --gradient-hero-card:  linear-gradient(150deg, #e6f5fe 0%, #8ed4f9 55%, #22c7ff 100%);
  --gradient-hero-wash:  linear-gradient(180deg, #eff8ff 0%, #f7f8fc 100%);
  --gradient-text:       linear-gradient(120deg, var(--brand-600), var(--brand-500) 60%, var(--violet-500));
  --gradient-warm:       linear-gradient(120deg, var(--accent-warm), var(--brand-500));
  --gradient-footer:     linear-gradient(180deg, var(--brand-500) 0%, var(--violet-500) 100%);

  /* ---- Typography ----------------------------------------- */
  /* Two families from the same designer (Rasmus Andersson):
     - Inter Tight: optical-display cut for headlines (~64px+).
     - Inter: body cut, optimized for screen reading sizes.
     Pairing them gives the Stripe/Clay-style "two-optical-sizes"
     feel without buying a paid foundry face. */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Editorial italic serif for accent phrases inside sans-serif
     headlines. Instrument Serif's italic pairs beautifully with
     Inter Tight — same visual weight, opposite personality. */
  --font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;

  /* Fluid type scale (clamp = min, preferred, max) */
  --fs-xs:   0.8125rem;                          /* 13px */
  --fs-sm:   0.9375rem;                          /* 15px */
  --fs-base: 1rem;                               /* 16px */
  --fs-lg:   1.125rem;                           /* 18px */
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-2xl:  clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  --fs-3xl:  clamp(2.1rem, 1.6rem + 2.5vw, 3.25rem);
  --fs-4xl:  clamp(2.6rem, 1.9rem + 3.6vw, 4.5rem);

  /* Line-heights — display gets a tighter cut than the rest */
  --lh-display: 1.05;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-base:    1.65;

  /* Letter-spacing — tight-display vs loose-eyebrow contrast
     is doing ~30% of the "confident editorial site" feel. */
  --ls-display-tight: -0.03em;  /* hero H1 */
  --ls-display:       -0.022em; /* section H2 */
  --ls-display-sub:   -0.012em; /* H3, H4 */
  --ls-body:           0;
  --ls-eyebrow:        0.06em;  /* mono uppercase chips */
  --ls-button:         0.005em;

  --fw-regular: 400;
  --fw-medium:  500;        /* default display weight — Stripe-style restraint */
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Spacing scale (4px base) --------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Section rhythm ------------------------------------- */
  /* Two fluid tokens that govern the cadence of the whole page.
     Apply --section-y to .section padding-block and --block-y to
     the gap between a section head and its content. Holding to
     these two values is what separates "designed site" from
     "Wix template" more than any color choice. */
  --section-y:    clamp(96px,  10vw, 144px);  /* between major sections */
  --section-y-lg: clamp(112px, 12vw, 176px);  /* hero / oversized sections */
  --block-y:      clamp(48px,   5vw,  80px);  /* sub-block gap, e.g. head → content */

  /* ---- Layout --------------------------------------------- */
  --container:    1160px;
  --container-sm: 760px;
  --gutter:       clamp(1.25rem, 5vw, 2.5rem);

  /* ---- Radius --------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows -------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 18, 45, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 18, 45, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 18, 45, 0.08);
  --shadow-lg: 0 18px 48px rgba(16, 18, 45, 0.12);
  --shadow-brand: 0 12px 32px rgba(83, 58, 253, 0.32);

  /* ---- Motion --------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---- Z-index -------------------------------------------- */
  --z-nav: 100;
  --z-overlay: 200;
}