/* ================================
The Good Years Project (formerly Make Good Years) - Design Tokens
The foundation of the MGY visual system.
Drop this file into any project to get the brand palette,
typography, spacing, and dark mode - as CSS custom properties.
Override any token per-product:
:root { --mgy-brand: #2E7D32; }
---- Mobile Browser Chrome ----
Add these meta tags to so the status bar and browser
UI match --mgy-bg-page in both light and dark mode:
If the app supports a manual theme toggle (data-theme), sync
the meta tag in JS when the theme changes:
var isDark = theme === 'dark' ||
(theme === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
document.querySelectorAll('meta[name="theme-color"]')
.forEach(m => m.content = isDark ? '#47322A' : '#FAF6F1');
If a product overrides --mgy-bg-page, update the hex values
in the meta tags to match.
================================ */
:root {
/* ---- Brand ---- */
--mgy-brand: #FF7019;
--mgy-brand-hover: #E56010;
--mgy-brand-light: #FFF3EC;
/* ---- Text ---- */
--mgy-text-heading: #2A2220;
--mgy-text-body: #3D3331;
--mgy-text-light: #6B5E58;
--mgy-text-muted: #8C7B72;
--mgy-text-faint: #A8998F;
/* ---- Backgrounds ---- */
--mgy-bg-page: #FAF6F1;
--mgy-bg-card: #FFFFFF;
--mgy-bg-warm-dark: #dad4ce;
--mgy-bg-warm: #F3EDE6;
--mgy-bg-warm-light: #FDFBF9;
/* ---- Borders ---- */
--mgy-border-light: #E8E0D6;
--mgy-border-medium: #DDD4CC;
--mgy-border-dark: #D4C8BC;
/* ---- Accent ---- */
--mgy-accent: #45B5C2;
--mgy-accent-hover: #3A9DA8;
--mgy-accent-light: #EBF7F8;
/* ---- Status ---- */
--mgy-success-bg: #E8F5E9;
--mgy-success-text: #2E7D32;
--mgy-error-bg: #FDEEEE;
--mgy-error-text: #C75050;
--mgy-warning-bg: #FFF8E1;
--mgy-warning-text: #B8860B;
--mgy-info-bg: #EBF7F8;
--mgy-info-text: #2A8A96;
--mgy-status-bg: #F0E8E0;
--mgy-status-text: #8C7B72;
/* ---- Quadrant / Priority (semantic) ---- */
--mgy-q1: #C75050;
--mgy-q1-bg: #FDEEEE;
--mgy-q2: #FF7019;
--mgy-q2-bg: #FFF3EC;
--mgy-q3: #45B5C2;
--mgy-q3-bg: #EBF7F8;
--mgy-q4: #8C7B72;
--mgy-q4-bg: #F3EDE6;
/* ---- Typography ---- */
--mgy-font-heading: 'Playfair Display', 'Playwrite DE Grund', 'Times New Roman', Times, serif;
--mgy-font-body: 'AN', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--mgy-font-brand: 'Playfair Display', 'Playwrite DE Grund', 'Times New Roman', Times, serif;
--mgy-text-base: 16px;
--mgy-text-sm: 14px;
--mgy-text-xs: 12px;
--mgy-text-lg: 18px;
--mgy-text-xl: 20px;
--mgy-text-2xl: 22px;
--mgy-text-3xl: 26px;
--mgy-text-4xl: 36px;
--mgy-text-5xl: 48px;
--mgy-text-6xl: 72px;
--mgy-text-7xl: 80px;
--mgy-text-8xl: 96px;
--mgy-leading-tight: 1.25;
--mgy-leading-normal: 1.7;
--mgy-leading-relaxed: 1.8;
--mgy-weight-ultralight: 100;
--mgy-weight-light: 300;
--mgy-weight-normal: 400;
--mgy-weight-medium: 500;
--mgy-weight-semibold: 600;
--mgy-weight-bold: 700;
/* ---- Spacing ---- */
--mgy-space-xs: 4px;
--mgy-space-sm: 8px;
--mgy-space-md: 16px;
--mgy-space-lg: 24px;
--mgy-space-xl: 32px;
--mgy-space-2xl: 48px;
--mgy-space-3xl: 64px;
--mgy-space-4xl: 80px;
/* ---- Sizing ---- */
--mgy-size-xs: 0.5rem;
--mgy-size-sm: 1rem;
--mgy-size-md: 2rem;
--mgy-size-lg: 4rem;
--mgy-size-xl: 8rem;
--mgy-size-2xl: 16rem;
--mgy-size-3xl: 24rem;
--mgy-size-4xl: 48rem;
/* ---- Layout ---- */
--mgy-width-small: 360px;
--mgy-width-narrow: 720px;
--mgy-width-standard: 1080px;
--mgy-width-wide: 1200px;
--mgy-page-padding: 24px;
/* ---- Radii ---- */
--mgy-radius-sm: 3px;
--mgy-radius-md: 6px;
--mgy-radius-lg: 8px;
--mgy-radius-xl: 10px;
--mgy-radius-2xl: 12px;
--mgy-radius-round: 9999px;
/* ---- Shadows ---- */
--mgy-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
--mgy-shadow-card-hover: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
--mgy-shadow-dropdown: 0 4px 12px rgba(0,0,0,0.06);
/* ---- Transitions ---- */
--mgy-transition-fast: 0.1s;
--mgy-transition-normal: 0.15s;
}
/* ---- Dark Mode ---- */
/*
* Two selectors for dark mode:
* 1. @media prefers-color-scheme: auto detection (skipped when data-theme="light")
* 2. [data-theme="dark"]: manual toggle override
*/
/* Auto dark mode - prefers-color-scheme */
/* "Evening Fire" — warm darks with strong contrast */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--mgy-brand: #FF8533;
--mgy-brand-hover: #FFa060;
--mgy-brand-light: #5C3E32;
--mgy-accent: #6DD4E0;
--mgy-accent-hover: #5CC8D4;
--mgy-accent-light: #3A5456;
--mgy-text-heading: #FFF5EE;
--mgy-text-body: #F5E8DC;
--mgy-text-light: #DCC4B0;
--mgy-text-muted: #C0A48E;
--mgy-text-faint: #A08672;
--mgy-bg-page: #47322A;
--mgy-bg-card: #5C4238;
--mgy-bg-warm-dark: #7f5a4a;
--mgy-bg-warm: #3E2C24;
--mgy-bg-warm-light: #523A30;
--mgy-border-light: #6E5246;
--mgy-border-medium: #7E6254;
--mgy-border-dark: #907464;
--mgy-success-bg: #3A5440;
--mgy-success-text: #88D48C;
--mgy-error-bg: #5C3434;
--mgy-error-text: #F0A0A0;
--mgy-warning-bg: #564830;
--mgy-warning-text: #FFD54F;
--mgy-info-bg: #3A5456;
--mgy-info-text: #7AD4E0;
--mgy-status-bg: #5C4238;
--mgy-status-text: #C0A48E;
--mgy-q1: #F0A0A0;
--mgy-q1-bg: #5C3434;
--mgy-q2: #FF8533;
--mgy-q2-bg: #5C3E32;
--mgy-q3: #7AD4E0;
--mgy-q3-bg: #3A5456;
--mgy-q4: #C0A48E;
--mgy-q4-bg: #5C4238;
--mgy-shadow-card: 0 1px 3px rgba(30,15,8,0.3), 0 4px 12px rgba(30,15,8,0.25);
--mgy-shadow-card-hover: 0 2px 8px rgba(30,15,8,0.4), 0 8px 24px rgba(30,15,8,0.3);
--mgy-shadow-dropdown: 0 4px 12px rgba(30,15,8,0.3);
}
}
.mgy-light-mode { display: block; }
.mgy-dark-mode { display: none; }
/* Manual dark mode - data-theme="dark" */
[data-theme="dark"] {
--mgy-brand: #FF8533;
--mgy-brand-hover: #FFa060;
--mgy-brand-light: #5C3E32;
--mgy-accent: #6DD4E0;
--mgy-accent-hover: #5CC8D4;
--mgy-accent-light: #3A5456;
--mgy-text-heading: #FFF5EE;
--mgy-text-body: #F5E8DC;
--mgy-text-light: #DCC4B0;
--mgy-text-muted: #C0A48E;
--mgy-text-faint: #A08672;
--mgy-bg-page: #47322A;
--mgy-bg-card: #5C4238;
--mgy-bg-warm-dark: #7f5a4a;
--mgy-bg-warm: #3E2C24;
--mgy-bg-warm-light: #523A30;
--mgy-border-light: #6E5246;
--mgy-border-medium: #7E6254;
--mgy-border-dark: #907464;
--mgy-success-bg: #3A5440;
--mgy-success-text: #88D48C;
--mgy-error-bg: #5C3434;
--mgy-error-text: #F0A0A0;
--mgy-warning-bg: #564830;
--mgy-warning-text: #FFD54F;
--mgy-info-bg: #3A5456;
--mgy-info-text: #7AD4E0;
--mgy-status-bg: #5C4238;
--mgy-status-text: #C0A48E;
--mgy-q1: #F0A0A0;
--mgy-q1-bg: #5C3434;
--mgy-q2: #FF8533;
--mgy-q2-bg: #5C3E32;
--mgy-q3: #7AD4E0;
--mgy-q3-bg: #3A5456;
--mgy-q4: #C0A48E;
--mgy-q4-bg: #5C4238;
--mgy-shadow-card: 0 1px 3px rgba(30,15,8,0.3), 0 4px 12px rgba(30,15,8,0.25);
--mgy-shadow-card-hover: 0 2px 8px rgba(30,15,8,0.4), 0 8px 24px rgba(30,15,8,0.3);
--mgy-shadow-dropdown: 0 4px 12px rgba(30,15,8,0.3);
.mgy-light-mode { display: none; }
.mgy-dark-mode { display: block; }
}