@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/unbounded-latin-v12.woff2') format('woff2');
}

@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anonymous-pro-regular-latin-v22.woff2') format('woff2');
}

@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/anonymous-pro-bold-latin-v22.woff2') format('woff2');
}

@font-face {
  font-family: 'Anonymous Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anonymous-pro-italic-latin-v22.woff2') format('woff2');
}

/* twelve. studio — design tokens
   Imported from the "Twelve website redesign" Claude Design project. */

:root {
  /* ---- color: base hues ---- */
  --cream: #F5F2E8;
  --lav: #B8A9E0;
  --plum-deep: #2A1F45;
  --plum-mid: #3D2E5E;
  --pink: #E8A8C0;
  --blue: #A8C8E8;
  --ink: #231933;
  --green-status: #2e7d32;

  /* ---- color: semantic roles ---- */
  --surface-page: var(--cream);
  --surface-inverse: var(--plum-deep);
  --surface-inverse-mid: var(--plum-mid);
  --text-primary: var(--ink);
  --text-heading: var(--plum-deep);
  --text-muted: #6D6572;
  --text-inverse: var(--cream);
  --text-inverse-muted: rgba(245, 242, 232, .85);
  --accent-primary: var(--lav);
  --accent-secondary: var(--pink);
  --accent-tertiary: var(--blue);
  --text-accent-secondary-on-light: #89506A;
  --text-accent-tertiary-on-light: #38688E;
  --border-subtle: rgba(42, 31, 69, .15);
  --border-strong: rgba(42, 31, 69, .25);
  --border-inverse: rgba(245, 242, 232, .3);
  --surface-pill-inverse: rgba(42, 31, 69, .08);

  /* ---- typography ---- */
  --font-display: 'Unbounded', sans-serif;
  --font-mono: 'Anonymous Pro', monospace;
  --text-hero: clamp(3.2rem, 13vw, 10rem);
  --text-h1: clamp(2rem, 5vw, 3.6rem);
  --text-h2: 1.4rem;
  --text-body-lg: 1.05rem;
  --text-body: .9rem;
  --text-small: .85rem;
  --text-tag: .7rem;
  --text-kicker: .8rem;
  --tracking-tight: -.03em;
  --tracking-normal: -.02em;
  --tracking-kicker: .2em;
  --tracking-wide: .08em;
  --leading-tight: .9;
  --leading-heading: 1.05;
  --leading-body: 1.75;
  --leading-body-sm: 1.6;

  /* ---- spacing ---- */
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 36px;
  --space-8: 48px;
  --space-9: 60px;
  --space-10: 120px;
  --section-padding-x: 48px;
  --section-padding-y: 168px;
  --section-max-width: 1296px;
  --grid-gap: 24px;
  --anchor-offset: 132px;   /* ≈ desktop nav height + ~48px breathing room; drives anchor landings */

  /* ---- effects ---- */
  --radius-pill: 100px;
  --radius-card: 16px;
  --radius-card-lg: 18px;
  --radius-sm: 4px;
  --border-w-hairline: 1px;
  --border-w-sticker: 1.5px;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --duration-fast: .25s;
  --duration-med: .3s;
  --duration-slow: .8s;
  --noise-opacity: .035;
}