/* =====================================================================
   Studio XD — Design Tokens
   Faithfully reproduced from the Studio XD design system.
   Black and white carry the system. Purple is rare and intentional.
   Neutrals are warm, never blue-gray. Typography-first, lots of air.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Webfonts — Geist (Vercel) via the Fontsource CDN.
   Geist is the Swiss-grotesque workhorse; Geist Mono is for eyebrows,
   labels, metadata and code.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.2.6/files/geist-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.2.6/files/geist-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  /* =================================================================
     COLOR
     ================================================================= */

  /* ---- Brand primitives ---- */
  --black: #000000;
  --white: #ffffff;

  /* Studio XD Purple (sampled from the mark) + functional shades */
  --purple-50:  #faf4ff;
  --purple-100: #f1e3ff;
  --purple-200: #e2c6ff;
  --purple-400: #ad55f9;
  --purple-500: #951cf7;  /* brand accent */
  --purple-600: #7d12d6;  /* hover */
  --purple-700: #6310ad;  /* press / on-light text */

  /* ---- Warm neutral scale (warm, low-chroma) ---- */
  --warm-0:   #ffffff;
  --warm-50:  #faf9f7;  /* warm off-white — default page background */
  --warm-100: #f4f3ef;
  --warm-150: #ecebe6;
  --warm-200: #e4e2dc;  /* soft divider */
  --warm-300: #d2d0c8;
  --warm-400: #aeaca3;
  --warm-500: #84827a;
  --warm-600: #63615a;  /* muted text */
  --warm-700: #46443e;
  --warm-800: #2a2825;
  --warm-900: #16150f;  /* near-black ink, warmer than pure */

  /* ---- Semantic aliases ---- */
  --bg-page:        var(--warm-50);
  --bg-page-alt:    var(--white);
  --bg-inverse:     var(--black);
  --surface-card:   var(--white);
  --surface-sunken: var(--warm-100);
  --surface-wash:   var(--purple-50);

  --text-strong:    var(--warm-900);
  --text-body:      var(--warm-800);
  --text-muted:     var(--warm-600);
  --text-faint:     var(--warm-500);
  --text-inverse:   var(--white);
  --text-accent:    var(--purple-600);
  --text-on-accent: var(--white);

  --border-subtle:  var(--warm-200);
  --border-default: var(--warm-300);
  --border-strong:  var(--warm-900);

  --accent:         var(--purple-500);
  --accent-hover:   var(--purple-600);
  --accent-press:   var(--purple-700);
  --accent-wash:    var(--purple-50);

  --focus-ring:     var(--purple-500);

  /* =================================================================
     TYPOGRAPHY
     ================================================================= */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
  --font-display: var(--font-sans);

  /* ---- Type scale (px) ---- */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base: 16px;
  --text-md:  18px;
  --text-lg:  21px;
  --text-xl:  26px;
  --text-2xl: 33px;
  --text-3xl: 44px;
  --text-4xl: 58px;
  --text-5xl: 80px;
  --text-6xl: 108px;

  /* Fluid display sizes for hero/editorial moments */
  --display-sm: clamp(2.25rem, 1.4rem + 4.2vw, 3.6rem);
  --display-md: clamp(2.8rem, 1.2rem + 7vw, 5rem);
  --display-lg: clamp(3.4rem, 0.6rem + 10vw, 6.75rem);

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Line heights ---- */
  --leading-none: 1;
  --leading-display: 1.02;
  --leading-tight: 1.08;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.62;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.04em;  /* large display */
  --tracking-tight: -0.025em;   /* headlines */
  --tracking-snug: -0.012em;    /* subheads / large body */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;   /* uppercase mono eyebrows */

  /* =================================================================
     SPACING & LAYOUT
     ================================================================= */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* Section rhythm — the studio breathes between blocks */
  --section-y: clamp(96px, 12vw, 200px);
  --section-y-tight: clamp(64px, 8vw, 120px);

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 760px;   /* prose / editorial column */
  --gutter: clamp(20px, 5vw, 80px);
  --grid-cols: 12;
  --grid-gap: clamp(16px, 2vw, 32px);

  /* =================================================================
     RADII, BORDERS, SHADOWS, MOTION
     ================================================================= */

  /* ---- Radii ---- */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-hairline: 1px solid var(--border-subtle);
  --border-line: 1px solid var(--border-default);

  /* ---- Shadows (soft, neutral, rarely used) ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(22, 21, 15, 0.04);
  --shadow-sm: 0 1px 3px rgba(22, 21, 15, 0.05), 0 1px 2px rgba(22, 21, 15, 0.04);
  --shadow-md: 0 4px 16px rgba(22, 21, 15, 0.06), 0 1px 3px rgba(22, 21, 15, 0.04);
  --shadow-lg: 0 18px 48px rgba(22, 21, 15, 0.10), 0 2px 8px rgba(22, 21, 15, 0.05);
  /* purple focus glow — used sparingly on the accent */
  --shadow-focus: 0 0 0 3px rgba(149, 28, 247, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);   /* gentle ease-out */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --dur-reveal: 720ms;
}

/* =====================================================================
   BASE ELEMENT DEFAULTS
   Applied globally so the page inherits the editorial baseline.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--bg-page);
  font-feature-settings: "cv01", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--purple-500); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Reusable editorial primitives */
.sx-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sx-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}