/* ==========================================================================
   Twelve design system — design tokens
   Ported verbatim from _ds/twelve-design-system/tokens/*.css
   ========================================================================== */

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

  /* --- semantic aliases -------------------------------------------------- */
  --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-inverse: var(--cream);
  --text-inverse-muted: rgba(245, 242, 232, .85);
  --accent-primary: var(--lav);
  --accent-secondary: var(--pink);
  --accent-tertiary: var(--blue);
  --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: 1200px;
  --grid-gap: 24px;

  /* --- 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;
}