/* =============================================================================
   Synapsi Design System — Foundations
   Colors, type, spacing, radii, shadows, motion
   ============================================================================= */

/* -------------------------- Webfonts: Figtree --------------------------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/figtree-300.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-400.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-400-italic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/figtree-500.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-600.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-700.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/figtree-800.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/figtree-900.ttf") format("truetype");
}

/* ---------------------- Webfont: JetBrains Mono (code) ------------------- */
/* Served from the Fontsource CDN — no local file was supplied. Drop TTF/WOFF2
   files into fonts/ and repoint these src values if you want it self-hosted. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5/files/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5/files/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5/files/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  /* ============================ COLOR PRIMITIVES ============================ */
  /* Brand — pulled directly from the logo gradient stops */
  --synapsi-teal:        #14b8a6; /* gradient start — primary */
  --synapsi-teal-700:    #0f766e;
  --synapsi-teal-300:    #5eead4;
  --synapsi-teal-100:    #ccfbf1;
  --synapsi-teal-50:     #f0fdfa;

  --synapsi-cyan:        #0891b2; /* gradient end — secondary accent */
  --synapsi-cyan-700:    #0e7490;
  --synapsi-cyan-300:    #67e8f9;
  --synapsi-cyan-100:    #cffafe;
  --synapsi-cyan-50:     #ecfeff;

  /* The signature gradient — used on logo + accent surfaces */
  --synapsi-gradient: linear-gradient(90deg, #14b8a6 0%, #0891b2 100%); /* @kind color */
  --synapsi-gradient-soft: linear-gradient(135deg, #ccfbf1 0%, #cffafe 100%); /* @kind color */
  /* Brighter gradient for use on dark surfaces (slate-900) — teal-300 → cyan-300.
     Use whenever the standard gradient (or color logo) would feel muddy on dark. */
  --synapsi-gradient-on-dark: linear-gradient(90deg, #5eead4 0%, #67e8f9 100%); /* @kind color */

  /* Neutrals — Tailwind slate scale, the site's working palette */
  --slate-950: #020617;
  --slate-900: #0f172a;  /* deep brand dark — used in nav/footer/hero overlays */
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;  /* default page background */
  --white:     #ffffff;

  /* Semantic — minimal, picked to harmonize with the brand teal/cyan */
  --success-500: #10b981;
  --success-50:  #ecfdf5;
  --warning-500: #f59e0b;
  --warning-50:  #fffbeb;
  --danger-500:  #ef4444;
  --danger-50:   #fef2f2;
  --info-500:    #0891b2; /* same as cyan — info = brand */
  --info-50:     #ecfeff;

  /* ============================ SEMANTIC TOKENS ============================ */
  /* Surfaces */
  --bg:           var(--slate-50);    /* page */
  --bg-elevated:  var(--white);       /* cards, sheets */
  --bg-sunken:    var(--slate-100);   /* inputs, code blocks */
  --bg-inverse:   var(--slate-900);   /* dark sections, footers */

  /* Foreground (text) */
  --fg-1: var(--slate-900); /* primary text */
  --fg-2: var(--slate-600); /* secondary text, body copy */
  --fg-3: var(--slate-500); /* tertiary — captions, meta */
  --fg-4: var(--slate-400); /* placeholders, disabled */
  --fg-inverse: var(--white);
  --fg-brand: var(--synapsi-cyan-700);

  /* Borders */
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-subtle: var(--slate-100);
  --border-focus:  var(--synapsi-teal);

  /* Brand surface */
  --brand:        var(--synapsi-teal);
  --brand-hover:  var(--synapsi-teal-700);
  --brand-soft:   var(--synapsi-teal-50);
  --brand-on:     var(--white);  /* foreground on brand-colored surface */

  /* ============================ TYPOGRAPHY ============================ */
  --font-sans:   "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  /* The wordmark in the logo is set in Quantify (paths in SVG — no live font needed).
     For all UI typography, use Figtree. */

  /* Type scale — modular, generous, calm */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */
  --text-7xl:  4.5rem;      /* 72px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ============================ SPACING ============================ */
  /* 4px base unit */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ============================ RADII ============================ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ============================ SHADOWS ============================ */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 56px -12px rgba(15, 23, 42, 0.18);
  --shadow-brand: 0 12px 32px -8px rgba(20, 184, 166, 0.35);
  --ring-focus: 0 0 0 3px rgba(20, 184, 166, 0.30);

  /* ============================ MOTION ============================ */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-med:    220ms; /* @kind other */
  --dur-slow:   380ms; /* @kind other */

  /* ============================ LAYOUT ============================ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1320px;
}

/* ============================ SEMANTIC ELEMENT STYLES ============================ */
/* Element baselines — apply when no class is set. */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5vw, var(--text-6xl)); font-weight: 800; letter-spacing: var(--tracking-tighter); }
h2 { font-size: clamp(2rem, 3.5vw, var(--text-5xl)); font-weight: 800; letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  margin: 0;
  color: var(--fg-2);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--synapsi-teal-700); }

small { font-size: var(--text-sm); color: var(--fg-3); }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code:not(pre code) {
  background: var(--bg-sunken);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

/* Eyebrow / overline — small uppercase label seen on the site */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-brand);
}

/* Brand-gradient text — used sparingly for hero accent words */
.text-gradient {
  background: var(--synapsi-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Brighter gradient text — for use on dark surfaces only */
.text-gradient.on-dark,
.text-gradient-on-dark {
  background: var(--synapsi-gradient-on-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Print/PDF: background-clip:text prints as a solid block (browser limitation) —
   fall back to solid brand color. */
@media print {
  .text-gradient { background: none !important; color: var(--synapsi-teal) !important; }
  .text-gradient.on-dark,
  .text-gradient-on-dark { background: none !important; color: var(--synapsi-teal-300) !important; }
}

/* Focus ring — universal */
*:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}