/* waffle — shared design tokens for Aisu.Studio projects. GENERATED by build-tokens.mjs from tokens.json — do not edit by hand. tokens.json is the source and follows the Design Tokens Community Group format (tr.designtokens.org). Run: node build-tokens.mjs */ @font-face { font-family: "Public Sans"; src: url("fonts/PublicSans/PublicSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("fonts/PublicSans/PublicSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("fonts/PublicSans/PublicSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("fonts/PublicSans/PublicSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "iA Writer Mono S"; src: url("fonts/iA-Writer-Mono/ia-writer-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "iA Writer Mono S"; src: url("fonts/iA-Writer-Mono/ia-writer-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "iA Writer Mono S"; src: url("fonts/iA-Writer-Mono/ia-writer-mono-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Stoke"; src: url("fonts/Stoke/Stoke-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Stoke"; src: url("fonts/Stoke/Stoke-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Raw swatches. These never repoint between modes — only the semantic layer does. */ --color-blueberry: #1f1934; /* ink */ --color-grape: #5100ff; /* accent, links */ --color-lemon: #d8ff01; /* highlight */ --color-hazelnut: #9e9c95; /* muted secondary text — 2.6:1 on vanilla, do not use for body copy; see cortado */ --color-cappuccino: #d9d7ce; /* card / container background */ --color-vanilla: #eae8e0; /* page background */ --color-galao: #f2f1eb; /* a step lighter than cappuccino, for surface-on-surface */ --color-cortado: #66655f; /* secondary text; hazelnut darkened to clear 4.5:1 */ /* Flavor ramps, the TERTIARY colour tier: five flavors x five juicyness levels. Level 5 = full juice (most saturated / darkest), level 1 = most diluted. The swatches above are primary (blueberry/grape/lemon — brand and interaction) and secondary (hazelnut/cappuccino/vanilla — surfaces). These are neither: they carry no brand and claim no interaction state, they only encode meaning in content — sequential scales, heatmaps, intensity and priority coding, categorical series. Never reach for a flavor to style chrome (a button, a link, a border); that is what the tiers above are for. For a categorical series take one level across flavors (4 or 5 reads strongest); for a sequential scale walk one flavor 1 to 5. Like the core swatches these are raw values and do NOT repoint in dark mode. */ --color-pistachio-1: #c4ddb6; --color-pistachio-2: #a6cd93; --color-pistachio-3: #92c982; --color-pistachio-4: #57a03a; --color-pistachio-5: #3e7c1f; --color-pistachio: var(--color-pistachio-5); --color-mango-1: #f0d9a3; --color-mango-2: #efcc81; --color-mango-3: #f2b63c; --color-mango-4: #f0921a; --color-mango-5: #ec6608; --color-mango: var(--color-mango-5); --color-strawberry-1: #f0aaa0; --color-strawberry-2: #e9887b; --color-strawberry-3: #e9634f; --color-strawberry-4: #ee3d28; --color-strawberry-5: #d80b0b; --color-strawberry: var(--color-strawberry-5); --color-raspberry-1: #f5b3d6; --color-raspberry-2: #f192c7; --color-raspberry-3: #ee72b6; --color-raspberry-4: #ea4e9f; --color-raspberry-5: #e6187c; --color-raspberry: var(--color-raspberry-5); /* TEXT ON A FLAVOR FILL — measured against blueberry (ink) and vanilla. AA body text needs 4.5:1, large text (>=24px, or >=18.7px bold) needs 3:1. ink on: pistachio 1-4, mango 1-5, strawberry 1-3, raspberry 1-4, chocolate 1-2. vanilla on: chocolate 3-5. Four levels clear 3:1 but miss 4.5:1 — pistachio 5 (vanilla, 4.17), strawberry 4 (ink, 4.28), strawberry 5 (vanilla, 4.31), raspberry 5 (ink, 3.84). Large text or non-text fills only; for body copy step one level down, or put the label outside the fill. */ --color-chocolate-1: #c2b3a5; --color-chocolate-2: #9f8c7c; --color-chocolate-3: #7a6250; --color-chocolate-4: #4b3225; --color-chocolate-5: #2b1611; --color-chocolate: var(--color-chocolate-5); /* Roles. Only this tier repoints per mode; the dark value rides in $extensions because DTCG has no standard mode mechanism yet. Dark-mode values are the ones proven in production by AisuStudio/spiritsprint, not a new invention. */ --color-bg: var(--color-vanilla); --color-surface: var(--color-cappuccino); --color-surface-2: var(--color-galao); --color-text: var(--color-blueberry); --color-muted: var(--color-cortado); /* hazelnut on vanilla is only 2.6:1 — cortado is that colour darkened to clear 4.5:1 */ --color-accent: var(--color-grape); /* lighter violet in dark mode — grape 1:1 is too dark on a dark bg */ --color-highlight: var(--color-lemon); --color-on-accent: var(--color-blueberry); /* for text on a HIGHLIGHT (lemon) surface — 14.6:1. Not for accent fills; that is on-accent-solid. */ --color-on-accent-solid: var(--color-vanilla); /* For text on a SOLID accent fill — primary buttons, active tab chips. It repoints because the fill under it repoints: vanilla clears AA on light-mode grape (6.13:1) but collapses to 1.94:1 on the dark-mode accent, where blueberry reads (7.08:1). Why a token instead of pinning the button to fixed grape/vanilla: a pinned grape fill only reaches 2.49:1 against the dark page — under the 3:1 WCAG 1.4.11 asks of a control's own edge, and that low fill contrast is why accent repoints at all. Letting the fill follow the theme and repointing its label with it keeps both ends passing (7.08:1 label on a 7.86:1 fill). */ --color-border: rgba(31,25,52,.14); /* Three priority slots, deliberately numbered rather than named. A name like 'sans' or 'headline' promises an appearance or a use, and either can change; a priority cannot. Which face sits in which slot is the decision — the slot itself stays. */ --font-primary: "Public Sans", system-ui, sans-serif; /* Paragraphs, buttons, tabs, nav — anything sentence-like or interactive. When in doubt: primary. */ --font-secondary: Stoke, Georgia, serif; /* Display titles and headings. A characterful serif, only in Light 300 / Regular 400 — never body copy, never small sizes. */ --font-tertiary: "iA Writer Mono S", ui-monospace, "SF Mono", Menlo, monospace; /* Small data and label accents: eyebrows, tags, indices, KPI values, code. Not headlines. */ --sp-xs: 0.25rem; --sp-sm: 0.5rem; --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4rem; --sp-4xl: 6rem; --radius-xs: 3px; /* tags, badges, progress */ --radius-sm: 6px; /* buttons, inputs, modals */ --radius-md: 10px; /* cards, rails, export cards */ --radius-lg: 16px; /* glass cards, hero panels */ --radius-full: 999px; /* pills */ /* Neutral, no horizontal shift — drop straight down. Dark mode raises opacity because a black shadow barely reads on a dark surface; offsets and blur stay. */ --shadow-sm: 0px 2px 6px rgba(20,16,31,.1); --shadow-md: 0px 8px 20px rgba(20,16,31,.14); --shadow-lg: 0px 16px 36px rgba(20,16,31,.18); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --container-max: 1200px; --gutter: 24px; /* Reference values only. CSS custom properties cannot be read inside an @media condition, so these are not functional tokens — copy the rem value into your own media query and keep it in sync by hand. */ --bp-sm: 30rem; /* 480px */ --bp-md: 48rem; /* 768px */ --bp-lg: 64rem; /* 1024px */ --bp-xl: 80rem; /* 1280px */ } /* Dark mode. Raw swatches above stay fixed; only the semantic layer and the shadows repoint. */ @media (prefers-color-scheme: dark) { :root { --color-bg: #14101f; --color-surface: #221c33; --color-surface-2: #1b1628; --color-text: #f1efe8; --color-muted: #b3aec4; --color-accent: #b298ff; --color-highlight: var(--color-lemon); --color-on-accent: var(--color-blueberry); --color-on-accent-solid: var(--color-blueberry); --color-border: rgba(241,239,232,.14); --shadow-sm: 0px 2px 6px rgba(0,0,0,.35); --shadow-md: 0px 8px 20px rgba(0,0,0,.45); --shadow-lg: 0px 16px 36px rgba(0,0,0,.55); } } :root[data-theme="dark"] { --color-bg: #14101f; --color-surface: #221c33; --color-surface-2: #1b1628; --color-text: #f1efe8; --color-muted: #b3aec4; --color-accent: #b298ff; --color-highlight: var(--color-lemon); --color-on-accent: var(--color-blueberry); --color-on-accent-solid: var(--color-blueberry); --color-border: rgba(241,239,232,.14); --shadow-sm: 0px 2px 6px rgba(0,0,0,.35); --shadow-md: 0px 8px 20px rgba(0,0,0,.45); --shadow-lg: 0px 16px 36px rgba(0,0,0,.55); } :root[data-theme="light"] { /* Roles. Only this tier repoints per mode; the dark value rides in $extensions because DTCG has no standard mode mechanism yet. Dark-mode values are the ones proven in production by AisuStudio/spiritsprint, not a new invention. */ --color-bg: var(--color-vanilla); --color-surface: var(--color-cappuccino); --color-surface-2: var(--color-galao); --color-text: var(--color-blueberry); --color-muted: var(--color-cortado); /* hazelnut on vanilla is only 2.6:1 — cortado is that colour darkened to clear 4.5:1 */ --color-accent: var(--color-grape); /* lighter violet in dark mode — grape 1:1 is too dark on a dark bg */ --color-highlight: var(--color-lemon); --color-on-accent: var(--color-blueberry); /* for text on a HIGHLIGHT (lemon) surface — 14.6:1. Not for accent fills; that is on-accent-solid. */ --color-on-accent-solid: var(--color-vanilla); /* For text on a SOLID accent fill — primary buttons, active tab chips. It repoints because the fill under it repoints: vanilla clears AA on light-mode grape (6.13:1) but collapses to 1.94:1 on the dark-mode accent, where blueberry reads (7.08:1). Why a token instead of pinning the button to fixed grape/vanilla: a pinned grape fill only reaches 2.49:1 against the dark page — under the 3:1 WCAG 1.4.11 asks of a control's own edge, and that low fill contrast is why accent repoints at all. Letting the fill follow the theme and repointing its label with it keeps both ends passing (7.08:1 label on a 7.86:1 fill). */ --color-border: rgba(31,25,52,.14); /* Neutral, no horizontal shift — drop straight down. Dark mode raises opacity because a black shadow barely reads on a dark surface; offsets and blur stay. */ --shadow-sm: 0px 2px 6px rgba(20,16,31,.1); --shadow-md: 0px 8px 20px rgba(20,16,31,.14); --shadow-lg: 0px 16px 36px rgba(20,16,31,.18); }