/* Muffadal Saylawala: generated from tokens.json (copied from the design system, comment dash replaced) */
:root, [data-theme="seed"] { --surface: #f7eee9; --surface-raised: #efe3dc; --ink: #1c1a24; --ink-muted: #5c5864; --line: #e2d6cf; --line-strong: #807888; --indigo: #4b44d0; --pine: #08402b; --marigold: #eaa21c; --marigold-ink: #8a5a00; --spark: #b8336f; --focus: #4b44d0; --night-pine: #0f2c22; --indigo-field: #4b44d0; --pine-field: #08402b; --night-ink: #1c1a24; --marigold-field: #eaa21c; --seed-paper: #f7eee9; --cotton: #f3ede4; --marigold-light: #f2b33d; --indigo-light: #aeaaf5; --spark-light: #f29bbb; --on-marigold: #1c1a24; --shadow-paper: 0 1px 2px rgba(28,26,36,0.08), 0 8px 24px rgba(28,26,36,0.08); --shadow-lift: 0 2px 4px rgba(28,26,36,0.10), 0 18px 44px rgba(28,26,36,0.16); }
[data-theme="night"] { --surface: #0f2c22; --surface-raised: #163a2d; --ink: #f3ede4; --ink-muted: #b7c2b9; --line: #24493b; --line-strong: #5f8f79; --indigo: #aeaaf5; --pine: #8fd0ac; --marigold: #f2b33d; --marigold-ink: #f2b33d; --spark: #f29bbb; --focus: #f2b33d; --shadow-paper: 0 1px 2px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.30); --shadow-lift: 0 2px 4px rgba(0,0,0,0.36), 0 18px 44px rgba(0,0,0,0.44); }
:root { --space-3: 3px; --space-5: 5px; --space-8: 8px; --space-13: 13px; --space-21: 21px; --space-34: 34px; --space-55: 55px; --space-89: 89px; --space-144: 144px; --radius-0: 0px; --radius-sm: 3px; --radius-circle: 50%; --page-max: 1200px; --measure: 680px; --split-major: 61.8%; --split-minor: 38.2%; --golden-angle: 137.508; --font-display: Besley, "Clarendon", Georgia, serif; --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --font-figures: "Martian Mono", ui-monospace, Menlo, monospace; }
.display-xl { font-family: var(--font-display); font-size: 97px; line-height: 0.94; font-weight: 800; letter-spacing: -0.025em; }
.display-l { font-family: var(--font-display); font-size: 76px; line-height: 0.96; font-weight: 800; letter-spacing: -0.02em; }
.display-m { font-family: var(--font-display); font-size: 47px; line-height: 1.02; font-weight: 700; letter-spacing: -0.015em; }
.heading { font-family: var(--font-display); font-size: 29px; line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; }
.quote { font-family: var(--font-display); font-size: 29px; line-height: 1.25; font-weight: 500; font-style: italic; }
.lede { font-family: var(--font-text); font-size: 23px; line-height: 1.45; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 18px; line-height: 1.62; font-weight: 400; }
.body-small { font-family: var(--font-text); font-size: 16px; line-height: 1.55; font-weight: 400; }
.name { font-family: var(--font-text); font-size: 18px; line-height: 1; font-weight: 700; }
.label { font-family: var(--font-text); font-size: 14px; line-height: 1.3; font-weight: 600; }
.caption { font-family: var(--font-text); font-size: 14px; line-height: 1.45; font-weight: 400; }
.caption-14 { font-family: var(--font-text); font-size: 14px; line-height: 1.45; font-weight: 400; }
.small-12 { font-family: var(--font-text); font-size: 12px; line-height: 1.4; font-weight: 400; }
.figure { font-family: var(--font-figures); font-size: 13px; line-height: 1.4; font-weight: 400; }
@font-face { font-family: "Besley"; src: url("fonts/Besley.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("fonts/Besley-Italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/MartianMono.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }