/* ==========================================================================
   DESIGN TOKENS — the design system in one place.
   Change a value here and it updates everywhere on the site.
   Source: docs/DESIGN_SYSTEM.md
   ========================================================================== */

/* Fonts (self-hosted, variable) */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-italic-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Ink */
  --ink-900: #17141F;
  --ink-700: #3B3350;
  --ink-600: #57506A;
  --ink-500: #77708A;
  --ink-400: #8E8799;
  --ink-on-dark: #ABA4B8;
  --ink-on-dark-strong: #D5D0DE;

  /* Violet — the single accent */
  --violet-900: #2A0B57;
  --violet-700: #5B18AC;
  --violet-500: #7C2CDD;
  --violet-300: #C6A5F5;
  --violet-100: #EDE7FA;
  --violet-050: #E4D6FA;

  /* Surfaces */
  --surface-page: #F7F5F2;
  --surface-hero: #F6F2FB;
  --surface-card: #FFFFFF;
  --surface-tint: #EDE7FA;
  --surface-dark: #17141F;

  /* Lines */
  --line-warm: #E6E1D9;
  --line-cool: #E2DAEE;
  --line-violet: #ECE4F6;
  --line-strong: #D6CFC4;
  --line-dark: #3A3446;

  /* Semantic */
  --text-heading: var(--ink-900);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-500);
  --accent: var(--violet-500);
  --accent-hover: var(--violet-700);

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
  --size-name: clamp(46px, 11.2vw, 176px);
  --size-h2: clamp(34px, 4vw, 50px);
  --size-h3: 21px;
  --size-lead: 18px;
  --size-body: 17px;
  --size-body-sm: 15.5px;
  --size-meta: 14px;
  --size-eyebrow: 12.5px;
  --size-nav: 12px;
  --leading-name: 0.92;
  --leading-heading: 1.08;
  --leading-quote: 1.45;
  --leading-body: 1.62;
  --tracking-name: -0.045em;
  --tracking-heading: -0.015em;
  --tracking-eyebrow: 0.1em;
  --tracking-nav: 0.08em;

  /* Spacing & layout */
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(56px, 8vw, 88px);
  --measure: 1440px;
  --nav-height: 80px;

  /* Radii & shadows */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --shadow-float: 0 12px 34px rgba(23, 20, 31, 0.14);
  --shadow-card: 0 26px 60px rgba(42, 11, 87, 0.22);
  --shadow-panel: 0 26px 50px rgba(42, 11, 87, 0.14);

  /* Motion — one easing curve */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur-menu: 220ms;
  --dur-shift: 280ms;
  --dur-stage: 620ms;
  --dur-drift: 26s;
  --dur-marquee: 34s;
}