/** * Yumlog design tokens — terracotta, sage, honey (revised palette). * * Light colours live on :root so the site is usable with JS disabled. * overrides for dark mode (set by inline theme script). */ /* -------------------------------------------------------------------------- */ /* Shared: shape, motion, type, icons */ /* -------------------------------------------------------------------------- */ :root { --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 28px; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); --duration-short: 150ms; --duration-medium: 250ms; --duration-long: 400ms; --font-display: "Fraunces", "Georgia", "Times New Roman", serif; --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --type-display-large: 2.5rem; --type-display-medium: 2rem; --type-headline-large: 1.75rem; --type-headline-medium: 1.5rem; --type-title-large: 1.375rem; --type-title-medium: 1.125rem; --type-body-large: 1.0625rem; --type-body-medium: 1rem; --type-label-large: 0.9375rem; --type-label-medium: 0.875rem; --type-label-small: 0.8125rem; --leading-body: 1.65; --leading-heading: 1.2; --prose-max-width: 72ch; --layout-padding-inline: 1.25rem; --icon-display: 2rem; --icon-large: 1.5rem; --icon-medium: 1.25rem; --icon-small: 1.125rem; --icon-inline: 1.125rem; --font-icon: "Material Symbols Rounded"; /* ---------- Light palette (default) ------------------------------------- */ --md-primary: #9e421a; --md-on-primary: #ffffff; --md-primary-container: #ffdbce; --md-on-primary-container: #370e00; --md-secondary: #536349; --md-on-secondary: #ffffff; --md-secondary-container: #d6e8c8; --md-on-secondary-container: #111f0b; --md-tertiary: #7c5e10; --md-on-tertiary: #ffffff; --md-tertiary-container: #fae3b8; --md-on-tertiary-container: #2a1d00; --md-surface: #fbf8f4; --md-on-surface: #1c1b1a; --md-surface-variant: #ede5dd; --md-on-surface-variant: #4a4441; --md-outline: #7c7670; --md-outline-variant: #cdc4ba; --md-surface-container: #f5efe8; --md-surface-container-high: #ede5dd; --md-surface-container-highest: #e3dcd2; --md-shadow-alpha-1: 0.09; --md-shadow-alpha-2: 0.06; --md-shadow-tint: 62 38 28; --header-bar-divider: rgb(255 255 255 / 0.12); --header-nav-hover-bg: rgb(255 255 255 / 0.12); --header-toggle-border: rgb(255 255 255 / 0.35); --header-toggle-bg: rgb(255 255 255 / 0.12); --header-toggle-bg-hover: rgb(255 255 255 / 0.2); --header-search-border: rgb(255 255 255 / 0.45); --header-search-bg: rgb(255 255 255 / 0.1); --header-search-bg-focus: rgb(255 255 255 / 0.18); --elevation-0: none; --elevation-1: 0 1px 2px rgb(var(--md-shadow-tint) / var(--md-shadow-alpha-1)), 0 1px 3px rgb(var(--md-shadow-tint) / var(--md-shadow-alpha-2)); --elevation-2: 0 2px 4px rgb(var(--md-shadow-tint) / calc(var(--md-shadow-alpha-1) + 0.02)), 0 4px 8px rgb(var(--md-shadow-tint) / var(--md-shadow-alpha-2)); --elevation-3: 0 4px 8px rgb(var(--md-shadow-tint) / calc(var(--md-shadow-alpha-1) + 0.04)), 0 8px 16px rgb(var(--md-shadow-tint) / calc(var(--md-shadow-alpha-2) + 0.02)); --elevation-4: 0 8px 16px rgb(var(--md-shadow-tint) / 0.14), 0 12px 24px rgb(var(--md-shadow-tint) / 0.1); --elevation-5: 0 12px 24px rgb(var(--md-shadow-tint) / 0.16), 0 16px 32px rgb(var(--md-shadow-tint) / 0.12); /* Legacy — ai_generator.md inline styles; track current --md-* */ --color-primary: var(--md-primary); --color-secondary: var(--md-secondary-container); --color-accent: var(--md-secondary); --color-highlight: var(--md-on-surface-variant); --bg-light: var(--md-surface); --text-light: var(--md-on-surface); --card-bg-light: var(--md-surface-container-high); --bg-dark: var(--md-surface); --text-dark: var(--md-on-surface); --card-bg-dark: var(--md-surface-container-high); --header-bg-light: var(--md-primary); --header-bg-dark: var(--md-primary); /* M3 role aliases */ --primary: var(--md-primary); --on-primary: var(--md-on-primary); --primary-container: var(--md-primary-container); --on-primary-container: var(--md-on-primary-container); --secondary: var(--md-secondary); --on-secondary: var(--md-on-secondary); --secondary-container: var(--md-secondary-container); --on-secondary-container: var(--md-on-secondary-container); --tertiary: var(--md-tertiary); --on-tertiary: var(--md-on-tertiary); --tertiary-container: var(--md-tertiary-container); --on-tertiary-container: var(--md-on-tertiary-container); --surface: var(--md-surface); --on-surface: var(--md-on-surface); --surface-container: var(--md-surface-container); --surface-container-high: var(--md-surface-container-high); --surface-container-highest: var(--md-surface-container-highest); --on-surface-variant: var(--md-on-surface-variant); --outline: var(--md-outline); --outline-variant: var(--md-outline-variant); } /* -------------------------------------------------------------------------- */ /* Dark mode */ /* -------------------------------------------------------------------------- */ [data-theme="dark"] { --md-primary: #ffb59a; --md-on-primary: #5a1b00; --md-primary-container: #7f2b03; --md-on-primary-container: #ffdbce; --md-secondary: #baccad; --md-on-secondary: #26341e; --md-secondary-container: #3c4b33; --md-on-secondary-container: #d6e8c8; --md-tertiary: #ddc88a; --md-on-tertiary: #3d2e00; --md-tertiary-container: #5a4416; --md-on-tertiary-container: #fae3b8; --md-surface: #1c1b1a; --md-on-surface: #ebe4dc; --md-surface-variant: #322f2c; --md-on-surface-variant: #d0c8be; --md-outline: #968f86; --md-outline-variant: #4a4441; --md-surface-container: #232120; --md-surface-container-high: #322f2c; --md-surface-container-highest: #3d3a36; --md-shadow-alpha-1: 0.22; --md-shadow-alpha-2: 0.14; --md-shadow-tint: 8 6 4; --header-bar-divider: rgb(255 255 255 / 0.14); --header-nav-hover-bg: rgb(255 255 255 / 0.1); --header-toggle-border: rgb(255 255 255 / 0.28); --header-toggle-bg: rgb(255 255 255 / 0.08); --header-toggle-bg-hover: rgb(255 255 255 / 0.16); --header-search-border: rgb(255 255 255 / 0.35); --header-search-bg: rgb(255 255 255 / 0.08); --header-search-bg-focus: rgb(255 255 255 / 0.14); --elevation-0: none; --elevation-1: 0 1px 3px rgb(0 0 0 / var(--md-shadow-alpha-2)), 0 1px 2px rgb(var(--md-shadow-tint) / var(--md-shadow-alpha-1)); --elevation-2: 0 2px 6px rgb(0 0 0 / 0.18), 0 4px 10px rgb(0 0 0 / 0.12); --elevation-3: 0 4px 12px rgb(0 0 0 / 0.22), 0 8px 20px rgb(0 0 0 / 0.14); --elevation-4: 0 8px 20px rgb(0 0 0 / 0.28), 0 12px 28px rgb(0 0 0 / 0.18); --elevation-5: 0 12px 28px rgb(0 0 0 / 0.32), 0 18px 40px rgb(0 0 0 / 0.22); } /* -------------------------------------------------------------------------- */ /* Material Symbols */ /* -------------------------------------------------------------------------- */ .material-symbols-rounded { font-family: var(--font-icon); font-weight: normal; font-style: normal; font-size: var(--icon-medium); line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; -webkit-font-smoothing: antialiased; } .material-symbols-rounded--filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; } .material-symbols-rounded--small { font-size: var(--icon-small); vertical-align: -0.2em; } .material-symbols-rounded--large { font-size: var(--icon-large); vertical-align: -0.25em; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }