/* Fonts load here so any file importing this stylesheet gets them automatically. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..600&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');
/* Note: this project's icons are inline SVG (js/icons.js), not the Material Symbols web font,
so that font is intentionally not imported here — one less network dependency. */
/* ============================================================================
Museli — Colors & Type
Brand-exact tokens ported from the museli_ui Flutter design system
(lib/src/theme/*). Warm oat-dark surfaces · jade primary · brass accent.
Three themes: dark (default) · light (warm oat paper) · hc (high contrast).
Display/headings: Lora (warm serif) · UI text: Hanken Grotesk · numerals: Bricolage Grotesque.
Fonts are loaded via the @import above; a manual link is optional:
============================================================================ */
/* ---------------------------------------------------------------------------
DARK — the default Museli look (deep teal-ink, jade, brass)
--------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
color-scheme: dark;
/* — Surfaces — dark jade-charcoal (cooled off brass/espresso, jade-forward) — */
--mu-app-bg: #12160E;
--mu-surface-sunken: #181F15;
--mu-surface: #1F291C;
--mu-surface-raised: #293626;
--mu-surface-active: #364630;
--mu-hairline: rgba(210, 230, 210, 0.10);
--mu-hairline-strong: rgba(210, 230, 210, 0.18);
/* — Primary (jade) — */
--mu-primary: #28A878;
--mu-primary-bright: #45C293;
--mu-primary-pressed: #16785A;
--mu-on-primary: #EAFAF3;
--mu-primary-text: #74D9B1;
--mu-primary-soft-bg: rgba(40, 168, 120, 0.14); /* #2428A878 */
--mu-primary-soft-border: rgba(69, 194, 147, 0.35); /* #5945C293 */
/* — Accent (brass / premium) — */
--mu-accent: #D3A23F;
--mu-accent-bright: #E6BF63;
--mu-on-accent: #2A1E05;
--mu-accent-text: #E6BF63;
--mu-accent-soft-bg: rgba(211, 162, 63, 0.10); /* #1AD3A23F */
--mu-accent-soft-border: rgba(211, 162, 63, 0.45); /* #73D3A23F */
/* — Text — warm cream neutrals — */
--mu-text-hi: #F7F1E6;
--mu-text-mid: #C8BCA6;
--mu-text-lo: #998C76;
--mu-text-disabled: #5E5340;
--mu-on-color: #06231A;
/* — Status — */
--mu-success: #45C293;
--mu-warning: #E6BF63;
--mu-danger: #D76B82;
--mu-info: #7FA8BD;
/* — Gradients (top → bottom) — */
--mu-gradient-primary: linear-gradient(180deg, #28A878 0%, #16785A 100%);
--mu-gradient-accent: linear-gradient(180deg, #ECC877 0%, #CF9F3D 100%);
--mu-background-glow: #17352A; /* jade radial tint over --mu-app-bg */
/* — Neutral fills — theme-aware ink tints (warm cream in dark) — */
--mu-fill-faint: rgba(247, 241, 230, 0.03); /* neutral chip / unselected pill */
--mu-fill-ghost: rgba(247, 241, 230, 0.05); /* ghost button · pressed row */
--mu-track: rgba(247, 241, 230, 0.10); /* progress + segment track */
/* — Misc — */
--mu-overlay-scrim: rgba(0, 0, 0, 0.70);
--mu-focus-ring: #45C293;
--mu-shimmer-base: rgba(255, 255, 255, 0.08);
--mu-shimmer-highlight: rgba(255, 255, 255, 0.20);
/* — Domain — */
--mu-completed: #FFCC40;
--mu-recording: #D55244;
/* — Elevation (neutral drop shadows) — */
--mu-e0: none;
--mu-e1: 0 8px 18px rgba(0, 0, 0, 0.32);
--mu-e2: 0 12px 30px rgba(0, 0, 0, 0.38);
--mu-e3: 0 18px 44px rgba(0, 0, 0, 0.46);
--mu-e4: 0 26px 60px rgba(0, 0, 0, 0.55);
/* — Brand glows / button lifts — */
--mu-glow-primary: 0 8px 30px rgba(40, 168, 120, 0.28);
--mu-glow-accent: 0 8px 30px rgba(211, 162, 63, 0.26);
--mu-button-primary-shadow: 0 8px 24px rgba(40, 168, 120, 0.30);
--mu-button-accent-shadow: 0 8px 24px rgba(211, 162, 63, 0.28);
/* — Card top inner highlight (dark only) — */
--mu-card-sheen: rgba(210, 235, 220, 0.055);
}
/* ---------------------------------------------------------------------------
LIGHT — warm oat-paper with warm ink (the inviting default for Museli)
--------------------------------------------------------------------------- */
:root[data-theme="light"] {
color-scheme: light;
--mu-app-bg: #F6F0E4;
--mu-surface-sunken: #EFE7D7;
--mu-surface: #FFFCF6;
--mu-surface-raised: #FFFEFA;
--mu-surface-active: #F2EADB;
--mu-hairline: rgba(74, 56, 30, 0.10);
--mu-hairline-strong: rgba(74, 56, 30, 0.18);
--mu-primary: #1B8A63;
--mu-primary-bright: #28A878;
--mu-primary-pressed: #13694B;
--mu-on-primary: #FFFFFF;
--mu-primary-text: #137254;
--mu-primary-soft-bg: rgba(27, 138, 99, 0.10);
--mu-primary-soft-border: rgba(27, 138, 99, 0.24);
--mu-accent: #B1842A;
--mu-accent-bright: #CB9A34;
--mu-on-accent: #FFFFFF;
--mu-accent-text: #8A6716;
--mu-accent-soft-bg: rgba(177, 132, 42, 0.12);
--mu-accent-soft-border: rgba(177, 132, 42, 0.32);
--mu-text-hi: #2A2118;
--mu-text-mid: #5A4F40;
--mu-text-lo: #8A7E6C;
--mu-text-disabled: #C2B6A2;
--mu-on-color: #FFFFFF;
--mu-success: #1B8A63;
--mu-warning: #B07D14;
--mu-danger: #C0455F;
--mu-info: #3F7E99;
--mu-gradient-primary: linear-gradient(180deg, #28A878 0%, #158A62 100%);
--mu-gradient-accent: linear-gradient(180deg, #E0AE48 0%, #C18E2E 100%);
--mu-background-glow: #FFFDF8;
/* — Neutral fills — warm ink tints (light) — */
--mu-fill-faint: rgba(42, 33, 24, 0.035);
--mu-fill-ghost: rgba(42, 33, 24, 0.06);
--mu-track: rgba(42, 33, 24, 0.10);
--mu-overlay-scrim: rgba(43, 33, 24, 0.40);
--mu-focus-ring: #1B8A63;
--mu-shimmer-base: rgba(42, 33, 24, 0.06);
--mu-shimmer-highlight: rgba(42, 33, 24, 0.10);
--mu-completed: #D4A017;
--mu-recording: #C0455F;
--mu-e1: 0 8px 18px rgba(74, 56, 30, 0.07);
--mu-e2: 0 12px 30px rgba(74, 56, 30, 0.11);
--mu-e3: 0 18px 44px rgba(74, 56, 30, 0.14);
--mu-e4: 0 26px 60px rgba(74, 56, 30, 0.20);
--mu-glow-primary: 0 8px 30px rgba(27, 138, 99, 0.26);
--mu-glow-accent: 0 8px 30px rgba(193, 142, 46, 0.28);
--mu-button-primary-shadow: 0 8px 24px rgba(27, 138, 99, 0.28);
--mu-button-accent-shadow: 0 8px 24px rgba(193, 142, 46, 0.30);
--mu-card-sheen: rgba(255, 255, 255, 0.0);
}
/* ---------------------------------------------------------------------------
HIGH CONTRAST — warm pure-black, AAA-leaning. Cream ink, brighter jade/brass,
thick focus rings. (Warmed to match the brand — never cold blue-black.)
--------------------------------------------------------------------------- */
:root[data-theme="hc"] {
color-scheme: dark;
--mu-app-bg: #000000;
--mu-surface-sunken: #0A0805;
--mu-surface: #151009;
--mu-surface-raised: #1F1810;
--mu-surface-active: #2A2114;
--mu-hairline: rgba(247, 241, 230, 0.50);
--mu-hairline-strong: rgba(247, 241, 230, 0.80);
--mu-primary: #4FE3A8;
--mu-primary-bright: #7CF0C2;
--mu-primary-pressed: #2BC489;
--mu-on-primary: #00130C;
--mu-primary-text: #7CF0C2;
--mu-primary-soft-bg: rgba(79, 227, 168, 0.20);
--mu-primary-soft-border: rgba(79, 227, 168, 0.80);
--mu-accent: #FFD54A;
--mu-accent-bright: #FFE38A;
--mu-on-accent: #1A1300;
--mu-accent-text: #FFE38A;
--mu-accent-soft-bg: rgba(255, 213, 74, 0.20);
--mu-accent-soft-border: rgba(255, 213, 74, 0.80);
--mu-text-hi: #FFFBF2;
--mu-text-mid: #ECE3D3;
--mu-text-lo: #C6BBA6;
--mu-text-disabled: #8A8071;
--mu-on-color: #000000;
--mu-success: #4FE3A8;
--mu-warning: #FFD54A;
--mu-danger: #FF8095;
--mu-info: #8FD0E6;
--mu-gradient-primary: linear-gradient(180deg, #4FE3A8 0%, #2BC489 100%);
--mu-gradient-accent: linear-gradient(180deg, #FFE38A 0%, #FFD54A 100%);
--mu-background-glow: #1A1206;
--mu-fill-faint: rgba(255, 255, 255, 0.06);
--mu-fill-ghost: rgba(255, 255, 255, 0.10);
--mu-track: rgba(255, 255, 255, 0.18);
--mu-overlay-scrim: rgba(0, 0, 0, 0.80);
--mu-focus-ring: #FFD54A;
--mu-shimmer-base: rgba(255, 255, 255, 0.14);
--mu-shimmer-highlight: rgba(255, 255, 255, 0.30);
--mu-completed: #FFE38A;
--mu-recording: #FF8095;
--mu-e1: 0 8px 18px rgba(0, 0, 0, 0.60);
--mu-e2: 0 12px 30px rgba(0, 0, 0, 0.66);
--mu-e3: 0 18px 44px rgba(0, 0, 0, 0.72);
--mu-e4: 0 26px 60px rgba(0, 0, 0, 0.80);
--mu-glow-primary: 0 0 0 2px rgba(79, 227, 168, 0.55);
--mu-glow-accent: 0 0 0 2px rgba(255, 213, 74, 0.55);
--mu-button-primary-shadow: none;
--mu-button-accent-shadow: none;
--mu-card-sheen: rgba(255, 255, 255, 0.0);
}
/* ---------------------------------------------------------------------------
STATIC SCALES — theme-independent
--------------------------------------------------------------------------- */
:root {
/* — Brand (social) — */
--mu-google: #EA4335;
--mu-facebook: #1873EB;
--mu-apple: #000000;
/* — Guitar fingering dots — */
--mu-finger-open: #FFFFFF;
--mu-finger-1: #F1C933; /* index */
--mu-finger-2: #6B48FA; /* middle */
--mu-finger-3: #4FA872; /* ring */
--mu-finger-4: #EF6177; /* pinky */
--mu-finger-thumb: #4790F7;
/* — Categorical data palette (dark) — */
--mu-data-1: #D76B82; /* rose */
--mu-data-2: #D9A24A; /* amber */
--mu-data-3: #7FA8BD; /* slate blue */
--mu-data-4: #B58FD6; /* violet */
--mu-data-5: #C7B653; /* chartreuse */
--mu-data-6: #5FB5A6; /* teal */
/* — Spacing — 4-pt rhythm — */
--mu-space-none: 0px;
--mu-space-xxs: 2px;
--mu-space-xs: 4px;
--mu-space-sm: 8px;
--mu-space-md: 12px;
--mu-space-lg: 16px;
--mu-space-xl: 20px;
--mu-space-xxl: 24px;
--mu-space-3xl: 32px;
--mu-space-4xl: 40px;
--mu-space-5xl: 56px;
--mu-space-6xl: 72px;
--mu-space-7xl: 96px;
--mu-space-screen: 20px; /* default page gutter */
/* — Radii — */
--mu-radius-xs: 10px;
--mu-radius-sm: 14px;
--mu-radius-md: 18px;
--mu-radius-lg: 24px;
--mu-radius-xl: 30px;
--mu-radius-pill: 999px;
/* — Motion — */
--mu-dur-instant: 80ms;
--mu-dur-fast: 140ms;
--mu-dur-base: 220ms;
--mu-dur-slow: 320ms;
--mu-dur-slower: 480ms;
--mu-ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
--mu-ease-emphasized: cubic-bezier(0.3, 0.0, 0.0, 1.0);
--mu-ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0);
--mu-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1.0);
/* — Font families — */
--mu-font-display: "Lora", Georgia, "Times New Roman", serif; /* warm serif — display & headings */
--mu-font-ui: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
--mu-font-mono: "Bricolage Grotesque", system-ui, sans-serif; /* tabular numerals */
/* — Breakpoints (window classes) — */
--mu-bp-compact: 600px;
--mu-bp-medium: 840px;
--mu-bp-expanded: 1200px;
}
/* ============================================================================
TYPE RAMP — semantic text styles.
Apply a class, or copy the declarations into your own selectors.
Sizes/weights/tracking are 1:1 with MuTypography.from().
============================================================================ */
.mu-display {
font-family: var(--mu-font-display);
font-size: 44px; font-weight: 700; line-height: 1.06;
letter-spacing: -0.01em; color: var(--mu-text-hi);
}
.mu-h1 {
font-family: var(--mu-font-display);
font-size: 28px; font-weight: 700; line-height: 1.12;
letter-spacing: -0.01em; color: var(--mu-text-hi);
}
.mu-h2 {
font-family: var(--mu-font-display);
font-size: 22px; font-weight: 600; line-height: 1.15;
letter-spacing: -0.005em; color: var(--mu-text-hi);
}
.mu-h3 {
font-family: var(--mu-font-display);
font-size: 19px; font-weight: 600; line-height: 1.25;
letter-spacing: 0; color: var(--mu-text-hi);
}
.mu-title {
font-family: var(--mu-font-ui);
font-size: 19px; font-weight: 700; line-height: 1.2;
letter-spacing: -0.2px; color: var(--mu-text-hi);
}
.mu-body-lg {
font-family: var(--mu-font-ui);
font-size: 17px; font-weight: 500; line-height: 1.45;
color: var(--mu-text-hi);
}
.mu-body {
font-family: var(--mu-font-ui);
font-size: 16px; font-weight: 500; line-height: 1.45;
color: var(--mu-text-mid);
}
.mu-body-sm {
font-family: var(--mu-font-ui);
font-size: 14px; font-weight: 500; line-height: 1.4;
color: var(--mu-text-mid);
}
.mu-label {
font-family: var(--mu-font-ui);
font-size: 12px; font-weight: 700; line-height: 1.1;
letter-spacing: 0.96px; text-transform: uppercase;
color: var(--mu-text-lo);
}
.mu-eyebrow {
font-family: var(--mu-font-ui);
font-size: 12.5px; font-weight: 700; line-height: 1.1;
letter-spacing: 1.25px; text-transform: uppercase;
color: var(--mu-text-lo);
}
.mu-caption {
font-family: var(--mu-font-ui);
font-size: 11.5px; font-weight: 600; line-height: 1.3;
color: var(--mu-text-lo);
}
.mu-button-text {
font-family: var(--mu-font-ui);
font-size: 17px; font-weight: 700; letter-spacing: -0.2px;
}
.mu-mono {
font-family: var(--mu-font-mono);
font-size: 18px; font-weight: 700;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
color: var(--mu-text-hi);
}
/* Eyebrows + section labels are commonly tinted jade */
.mu-eyebrow.mu-on-primary-tint,
.mu-label.mu-on-primary-tint { color: var(--mu-primary-text); }
/* ============================================================================
Material Symbols helper classes. The combined @import above loads the
@font-face rules but not Google's per-family helper class, so we define it
here — this guarantees the icon family + ligatures apply anywhere this
stylesheet is imported (cards, UI kit) without a separate .
============================================================================ */
.material-symbols-rounded,
.material-symbols-outlined {
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-symbols-rounded { font-family: 'Material Symbols Rounded'; }
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; }