/* ---------------------------------------------------------------------------
 * Susanna Bekker Design System — vendored tokens.
 *
 * Copied verbatim from the design system's token files, concatenated in the
 * order styles.css imports them. Two deliberate deviations, both so the site
 * makes no external requests:
 *
 *   1. The Google Fonts @import is replaced by the @font-face block below,
 *      pointing at the woff2 files in /assets/fonts/ (Rammetto One and Jost,
 *      both SIL Open Font License 1.1).
 *   2. tokens/surfaces.css's --image-night-sky is omitted; that texture is not
 *      used on this site and the asset is not shipped here.
 *
 * Do not hand-edit the token blocks. Re-copy them from the design system
 * instead: https://claude.ai/design/p/710d14dc-b34e-43a8-af33-ff208416b7d9
 * ------------------------------------------------------------------------- */

/* --- Fonts (self-hosted, replacing the design system's Google Fonts import) --- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rammetto One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/rammetto-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rammetto One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/rammetto-one-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens/colors.css --- */
:root{
/* --- Base palette: plum, solar gold and coral, taken from the wordmark slide --- */
--plum-900:#3d0a22;--plum-800:#5c0f33;--plum-700:#7a1244;--plum-600:#941651;--plum-500:#ad2062;--plum-400:#c2417f;--plum-200:#e8b6cd;--plum-100:#f5dde8;--plum-050:#fcf1f6;
--gold-700:#8a5a11;--gold-600:#b87c1c;--gold-500:#e0a634;--gold-300:#ffd579;--gold-100:#fff3d9;
--coral-700:#a33b38;--coral-600:#cc514c;--coral-500:#ef6b66;--coral-300:#ff7e79;--coral-100:#ffe3e1;
--stone-900:#1f1218;--stone-700:#4a3b41;--stone-500:#7a6a70;--stone-400:#9d8f95;--stone-300:#cbbfc4;--stone-200:#e7dee2;--stone-100:#f4eef0;--paper:#fdf8f6;--white:#ffffff;

/* --- Semantic aliases --- */
--text-strong:var(--plum-900);--text-body:var(--stone-700);--text-muted:var(--stone-500);--text-inverse:var(--white);--text-inverse-muted:var(--plum-200);
--text-link:var(--plum-700);--text-link-hover:var(--coral-700);
--surface-page:var(--paper);--surface-card:var(--white);--surface-sunken:var(--stone-100);--surface-brand:var(--plum-600);--surface-dark:var(--plum-900);--surface-dark-raised:var(--plum-800);
--accent-primary:var(--plum-600);--accent-secondary:var(--coral-500);--accent-warm:var(--gold-300);
--tint-ionosphere:var(--gold-100);--tint-flare:var(--coral-100);--tint-cosmos:var(--plum-050);--tint-earth:var(--stone-100);
--border-hairline:var(--stone-200);--border-strong:var(--plum-200);--border-dark:rgba(255,255,255,.16);
--focus-ring:var(--gold-300);

/* --- Brand surface: flat, matte, no gradients --- */
--brand-field:#941651;
--brand-frame:#ffd579;
--cream:#f6e7cd;
--on-brand-wash:rgba(255,255,255,.07);--on-brand-wash-hover:rgba(255,255,255,.12);
}

/* --- tokens/typography.css --- */
:root{
--font-display:'Rammetto One','Jost',sans-serif;
--font-sans:'Jost','Futura','Century Gothic',sans-serif;
--font-mono:ui-monospace,Menlo,monospace;

--fs-hero:clamp(52px,8.2vw,132px);--fs-display:clamp(40px,5.2vw,72px);--fs-h1:40px;--fs-h2:30px;--fs-h3:22px;--fs-h4:18px;
--fs-lead:19px;--fs-body:16px;--fs-small:14px;--fs-caption:12.5px;--fs-eyebrow:12px;

--lh-tight:1.02;--lh-snug:1.22;--lh-body:1.62;--lh-loose:1.75;
--ls-hero:0.02em;--ls-display:0.03em;--ls-heading:0;--ls-body:0;--ls-eyebrow:0.2em;

--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;

--text-hero:var(--fw-bold) var(--fs-hero)/var(--lh-tight) var(--font-display);
--text-display:var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display);
--text-h2:var(--fw-medium) var(--fs-h2)/var(--lh-snug) var(--font-display);
--text-h3:var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-display);
--text-body-font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
--text-eyebrow:var(--fw-bold) var(--fs-eyebrow)/1 var(--font-sans);
}

/* --- tokens/spacing.css --- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--gutter:var(--space-5);--section-gap:var(--space-9);
--sidebar-w:400px;--content-max:1180px;--measure:64ch;--measure-narrow:46ch;
}

/* --- tokens/surfaces.css --- */
:root{
--radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;
--border-width:1px;
--shadow-card:0 1px 2px rgba(23,18,51,.05),0 8px 24px -12px rgba(23,18,51,.16);
--shadow-card-hover:0 2px 4px rgba(23,18,51,.06),0 16px 40px -14px rgba(23,18,51,.24);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
--shadow-focus:0 0 0 3px rgba(42,167,187,.4);
}

/* --- tokens/motion.css --- */
:root{
--ease-standard:cubic-bezier(.2,.6,.3,1);--ease-out:cubic-bezier(.16,1,.3,1);
--dur-fast:120ms;--dur-base:200ms;--dur-slow:420ms;
--transition-hover:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out);
}

/* --- tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--text-body-font);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{color:var(--text-strong);margin:0;font-family:var(--font-display);letter-spacing:var(--ls-heading);font-weight:var(--fw-medium)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:var(--transition-hover)}
a:hover{color:var(--text-link-hover);text-decoration-color:var(--gold-500)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
.eyebrow{font:var(--text-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}