/*
* Willow Design System — shared theme
* v1.0 · 2026-05-21
*
* Source: docs/references/willow-design-system-v2.md
*
* Usage:
*
* then optionally add to :
*
* (the picker auto-attaches via the inline script at the bottom)
*
* Fonts:
* Inter / JetBrains Mono → Google Fonts (loaded via @import)
* Eina01 → local OTF files in docs/references/fonts/ (Willow brand font, primarily for graphic design)
*
* Theme:
* Defaults to light. User picks light/dark via the theme picker (persists to localStorage).
* Apply [data-theme="dark"] to or to force dark.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ---------- Eina01 (Willow brand font, local) ---------- */
@font-face {
font-family: 'Eina01';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url('./fonts/Eina01-Light.woff2') format('woff2'), url('./fonts/Eina01-Light.otf') format('opentype');
}
@font-face {
font-family: 'Eina01';
font-weight: 300;
font-style: italic;
font-display: swap;
src: url('./fonts/Eina01-LightItalic.woff2') format('woff2'), url('./fonts/Eina01-LightItalic.otf') format('opentype');
}
@font-face {
font-family: 'Eina01';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('./fonts/Eina01-Regular.woff2') format('woff2'), url('./fonts/Eina01-Regular.otf') format('opentype');
}
@font-face {
font-family: 'Eina01';
font-weight: 400;
font-style: italic;
font-display: swap;
src: url('./fonts/Eina01-RegularItalic.woff2') format('woff2'), url('./fonts/Eina01-RegularItalic.otf') format('opentype');
}
@font-face {
font-family: 'Eina01';
font-weight: 600;
font-style: normal;
font-display: swap;
src: url('./fonts/Eina01-SemiBold.woff2') format('woff2'), url('./fonts/Eina01-SemiBold.otf') format('opentype');
}
@font-face {
font-family: 'Eina01';
font-weight: 600;
font-style: italic;
font-display: swap;
src: url('./fonts/Eina01-SemiboldItalic.woff2') format('woff2'), url('./fonts/Eina01-SemiboldItalic.otf') format('opentype');
}
@font-face {
font-family: 'Eina01';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('./fonts/Eina01-Bold.woff2') format('woff2'), url('./fonts/Eina01-Bold.otf') format('opentype');
}
@font-face {
font-family: 'Eina01';
font-weight: 700;
font-style: italic;
font-display: swap;
src: url('./fonts/Eina01-BoldItalic.woff2') format('woff2'), url('./fonts/Eina01-BoldItalic.otf') format('opentype');
}
/* =====================================================
1. TOKENS — Light mode (default)
===================================================== */
:root {
/* Primary blue */
--primary-100: #0063FB;
--primary-hover: #0059E2;
--primary-focus: #004FC9;
--primary-25: #BFD8FE;
--primary-10: #E6EFFF;
/* Success */
--success-default: #009841;
--success-hover: #00893B;
--success-focus: #007A34;
/* Error */
--error-default: #FF0E0E;
--error-hover: #E60D0D;
--error-focus: #CC0B0B;
/* Highlight */
--highlight-default: #FF5F00;
--highlight-subtle: #FFDFCC;
/* Text */
--text-default: #1C1E1F;
--text-01: #646769;
--text-02: #808082;
--text-03: rgba(60, 63, 66, 0.33);
--backdrop-default: rgba(28, 30, 31, 0.40);
--backdrop-01: rgba(28, 30, 31, 0.33);
/* Backgrounds */
--bg-default: #FFFFFF;
--bg-01: rgba(96, 110, 128, 0.12);
--grey-01: #F8F9FA;
--grey-02: rgba(96, 116, 128, 0.08);
/* Buttons */
--btn-dark: #1C1E1F;
--btn-dark-hover: #252728;
--btn-dark-focus: #3C3F42;
--btn-tinted-blue: #D9F1FF;
--btn-tinted-red: #FFE7E7;
--btn-tinted-red-hover: #FFCFCF;
--btn-disabled-bg: #F3F4F5;
--btn-disabled-text: #808082;
/* Brand */
--brand-pink: #FF1957;
--brand-yellow: #FFB02B;
--brand-green: #00CC66;
--brand-cyan: #00AAFF;
--brand-dark-blue: #003399;
--brand-navy: #1A273E;
/* Surface */
--border-default: rgba(102, 119, 128, 0.16);
--surface: #FFFFFF;
--surface-hover: #FAFBFC;
/* Shadows */
--shadow-border: 0 0 0 1px rgba(102, 119, 128, 0.16);
--shadow-xs: 0 0 0 1px rgba(28,30,31,0.05), 0 3px 6px rgba(28,30,31,0.05);
--shadow-s: 0 1px 2px rgba(28,30,31,0.04), 0 4px 24px rgba(28,30,31,0.08);
--shadow-m: 0 0 0 1px rgba(28,30,31,0.05), 0 8px 16px -8px rgba(28,30,31,0.12), 0 18px 27px -5px rgba(28,30,31,0.15);
--shadow-xl: 0 0 1px rgba(0,0,0,0.08), 0 30px 60px -30px rgba(0,0,0,0.15), 0 50px 100px rgba(0,0,0,0.2);
/* Radii */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 24px;
--radius-pill: 999px;
/* Motion */
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 150ms;
--dur-normal: 300ms;
--dur-slow: 500ms;
/* Fonts */
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Eina01', 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--font-brand: 'Eina01', 'Inter', sans-serif; /* Willow brand font, primarily for graphic design */
}
/* =====================================================
2. TOKENS — Dark mode
===================================================== */
[data-theme="dark"] {
--bg-default: #0F1117;
--surface: #161B22;
--surface-hover: #1C2128;
--grey-01: #0F1117;
--grey-02: rgba(255, 255, 255, 0.03);
--bg-01: rgba(255, 255, 255, 0.06);
--text-default: #E6EDF3;
--text-01: #9BA3AD;
--text-02: #6E7681;
--text-03: rgba(255, 255, 255, 0.16);
--border-default: rgba(255, 255, 255, 0.08);
--primary-10: rgba(0, 99, 251, 0.12);
--primary-25: rgba(0, 99, 251, 0.25);
--btn-disabled-bg: #21262D;
--btn-disabled-text: #484F58;
--btn-tinted-blue: rgba(0, 99, 251, 0.18);
--btn-tinted-red: rgba(255, 14, 14, 0.15);
--btn-tinted-red-hover: rgba(255, 14, 14, 0.25);
--backdrop-default: rgba(0, 0, 0, 0.6);
--shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.06);
--shadow-xs: 0 0 0 1px rgba(255,255,255,0.04), 0 3px 8px rgba(0,0,0,0.4);
--shadow-s: 0 1px 3px rgba(0,0,0,0.2), 0 6px 24px rgba(0,0,0,0.3);
--shadow-m: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.4), 0 20px 40px rgba(0,0,0,0.3);
--shadow-xl: 0 0 2px rgba(0,0,0,0.3), 0 30px 60px rgba(0,0,0,0.5), 0 50px 100px rgba(0,0,0,0.4);
}
/* =====================================================
3. RESET + BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.4;
letter-spacing: -0.16px;
color: var(--text-default);
background: var(--bg-default);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease);
}
a { color: var(--primary-100); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
code, kbd, samp, pre, .mono { font-family: var(--font-mono); }
/* =====================================================
4. TYPOGRAPHY
===================================================== */
.display-1 { font: 700 45px/1.05 var(--font-body); letter-spacing: -1.8px; }
.display-2 { font: 600 40px/1.05 var(--font-body); letter-spacing: -1.2px; }
.h1, h1 { font: 700 32px/1.05 var(--font-body); letter-spacing: -0.96px; margin: 0; }
.h2, h2 { font: 700 24px/1.05 var(--font-body); letter-spacing: -0.36px; margin: 0; }
.h3, h3 { font: 700 18px/1.05 var(--font-body); letter-spacing: -0.09px; margin: 0; }
.h4, h4 { font: 700 16px/1.25 var(--font-body); margin: 0; }
.h5, h5 { font: 600 16px/1.25 var(--font-body); letter-spacing: -0.08px; margin: 0; }
.body-1 { font: 400 16px/1.4 var(--font-body); letter-spacing: -0.16px; }
.body-2 { font: 400 14px/1.4 var(--font-body); letter-spacing: -0.21px; }
.body-3 { font: 400 12px/1.3 var(--font-body); }
.text-muted { color: var(--text-01); }
.text-subtle { color: var(--text-02); }
.text-disabled { color: var(--text-03); }
.text-primary { color: var(--primary-100); }
.text-success { color: var(--success-default); }
.text-error { color: var(--error-default); }
.text-highlight { color: var(--highlight-default); }
.font-display { font-family: var(--font-display); }
.font-brand { font-family: var(--font-brand); }
.font-mono { font-family: var(--font-mono); }
/* =====================================================
5. LAYOUT HELPERS
===================================================== */
.container { max-width: 1600px; margin: 0 auto; padding: 32px; }
.container-sm { max-width: 960px; margin: 0 auto; padding: 32px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-tight { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
/* =====================================================
6. CARD
===================================================== */
.card {
background: var(--surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: 16px;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card:hover { box-shadow: var(--shadow-s); }
.card-elevated { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-xs); }
/*
* DESIGN RULE: no single-sided borders on rounded surfaces.
* Don't add `border-left/right/top/bottom` accents to .card or any element with
* border-radius — the stub clashes with the curved corner. Use a severity badge,
* a subtle background tint, or a full outline color instead.
*/
/* =====================================================
7. BUTTONS
===================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 40px; padding: 0 20px;
border: none; border-radius: var(--radius-pill);
font: 600 14px/1 var(--font-body); letter-spacing: -0.14px;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary-25); }
.btn:disabled, .btn[disabled] { background: var(--btn-disabled-bg) !important; color: var(--btn-disabled-text) !important; border-color: transparent !important; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 12px; border-radius: 16px; }
.btn-md { height: 36px; padding: 0 16px; font-size: 14px; border-radius: 18px; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 15px; border-radius: 24px; }
.btn-primary { background: var(--primary-100); color: #FFFFFF; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-focus); }
.btn-secondary { background: var(--btn-tinted-blue); color: var(--primary-100); }
.btn-secondary:hover { filter: brightness(0.97); }
.btn-outline { background: transparent; color: var(--primary-100); border: 1.3px solid var(--primary-100); }
.btn-outline:hover { background: var(--primary-10); }
.btn-quiet { background: transparent; color: var(--primary-100); }
.btn-quiet:hover { background: var(--primary-10); }
.btn-dark { background: var(--btn-dark); color: #FFFFFF; }
.btn-dark:hover { background: var(--btn-dark-hover); }
.btn-negative { background: var(--error-default); color: #FFFFFF; }
.btn-negative:hover { background: var(--error-hover); }
.btn-negative-tinted { background: var(--btn-tinted-red); color: var(--error-default); }
.btn-negative-tinted:hover { background: var(--btn-tinted-red-hover); }
.btn-ghost { background: transparent; color: var(--text-default); border: 1px solid var(--border-default); }
.btn-ghost:hover { background: var(--bg-01); }
/* =====================================================
8. BADGES / TAGS / CHIPS
===================================================== */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: var(--radius-pill);
font: 600 11px/1 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase;
background: var(--bg-01); color: var(--text-default);
}
.badge-primary { background: var(--primary-10); color: var(--primary-100); }
.badge-success { background: rgba(0, 152, 65, 0.12); color: var(--success-default); }
.badge-error { background: rgba(255, 14, 14, 0.12); color: var(--error-default); }
.badge-warning { background: rgba(255, 95, 0, 0.12); color: var(--highlight-default); }
.badge-muted { background: var(--bg-01); color: var(--text-01); }
.tag {
display: inline-flex; align-items: center;
padding: 3px 8px; border-radius: var(--radius-sm);
font: 500 11px/1.2 var(--font-body);
background: var(--bg-01); color: var(--text-01);
}
.tag-primary { background: var(--primary-10); color: var(--primary-100); }
.tag-success { background: rgba(0, 152, 65, 0.10); color: var(--success-default); }
.tag-error { background: rgba(255, 14, 14, 0.10); color: var(--error-default); }
.tag-warning { background: rgba(255, 95, 0, 0.12); color: var(--highlight-default); }
.tag-muted { background: var(--bg-01); color: var(--text-02); }
.chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px; border-radius: var(--radius-pill);
font: 500 13px/1 var(--font-body);
background: transparent; border: 1px solid var(--border-default); color: var(--text-01);
cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--text-default); border-color: var(--text-02); }
.chip.is-active { background: var(--primary-100); border-color: var(--primary-100); color: #FFFFFF; }
.chip .chip-count { opacity: 0.7; font-size: 11px; }
/* =====================================================
9. STAT BOX
===================================================== */
.stat {
background: var(--surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: 14px 16px;
}
.stat-label { font: 600 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-01); margin-bottom: 6px; }
.stat-value { font: 600 24px/1 var(--font-body); color: var(--text-default); }
.stat-value.is-primary { color: var(--primary-100); }
.stat-value.is-success { color: var(--success-default); }
.stat-value.is-error { color: var(--error-default); }
.stat-value.is-warning { color: var(--highlight-default); }
.stat-value.is-muted { color: var(--text-02); }
/* =====================================================
10. INPUTS
===================================================== */
.input {
width: 100%; height: 44px;
padding: 0 14px;
background: var(--surface);
border: 1.3px solid var(--border-default);
border-radius: var(--radius-md);
color: var(--text-default);
font: 400 15px/1 var(--font-body);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--text-02); }
.input:hover { border-color: var(--text-02); }
.input:focus { outline: none; border-color: var(--primary-100); box-shadow: 0 0 0 2px var(--primary-25); }
.input-sm { height: 36px; font-size: 14px; border-radius: var(--radius-sm); }
.select {
height: 36px; padding: 0 28px 0 12px;
background: var(--surface);
border: 1.3px solid var(--border-default);
border-radius: var(--radius-sm);
color: var(--text-default);
font: 500 13px/1 var(--font-body);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23808082' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.select:focus { outline: none; border-color: var(--primary-100); box-shadow: 0 0 0 2px var(--primary-25); }
/* =====================================================
10b. DROPDOWN MENU (custom listbox)
Native