/* ============================================================ BrandKit CSS — Generated from Material 3 / Stitch tokens ============================================================ USAGE: ------- Light mode (default): Dark mode (manual): Auto mode (OS pref): (uses prefers-color-scheme) Toggle dark mode with JavaScript: document.documentElement.classList.toggle('theme-dark'); document.documentElement.classList.toggle('theme-light'); Or use the data attribute approach: ============================================================ */ /* ── Reference Tokens: Tonal Palettes ─────────────────────── */ :root { --md-ref-palette-primary0: #000000; --md-ref-palette-primary10: #4E0000; --md-ref-palette-primary20: #690016; --md-ref-palette-primary30: #86202B; --md-ref-palette-primary40: #A33B41; --md-ref-palette-primary50: #C05558; --md-ref-palette-primary60: #DE6F71; --md-ref-palette-primary70: #FD8A8A; --md-ref-palette-primary80: #FFA5A4; --md-ref-palette-primary90: #FFC1BF; --md-ref-palette-primary95: #FFCFCD; --md-ref-palette-primary99: #FFDBD8; --md-ref-palette-primary100: #FFFFFF; --md-ref-palette-secondary0: #000000; --md-ref-palette-secondary10: #0D1C2D; --md-ref-palette-secondary20: #233144; --md-ref-palette-secondary30: #3A485B; --md-ref-palette-secondary40: #515F74; --md-ref-palette-secondary50: #6A788D; --md-ref-palette-secondary60: #8392A8; --md-ref-palette-secondary70: #9EACC3; --md-ref-palette-secondary80: #B9C7DF; --md-ref-palette-secondary90: #D5E4FB; --md-ref-palette-secondary95: #E3F2FF; --md-ref-palette-secondary99: #EEFDFF; --md-ref-palette-secondary100: #FFFFFF; --md-ref-palette-tertiary0: #000000; --md-ref-palette-tertiary10: #2B1705; --md-ref-palette-tertiary20: #412C1E; --md-ref-palette-tertiary30: #594233; --md-ref-palette-tertiary40: #725949; --md-ref-palette-tertiary50: #8C7261; --md-ref-palette-tertiary60: #A78B7A; --md-ref-palette-tertiary70: #C3A594; --md-ref-palette-tertiary80: #DFC1AF; --md-ref-palette-tertiary90: #FCDCCA; --md-ref-palette-tertiary95: #FFEBD8; --md-ref-palette-tertiary99: #FFF6E3; --md-ref-palette-tertiary100: #FFFFFF; --md-ref-palette-neutral0: #000000; --md-ref-palette-neutral10: #1A1C1D; --md-ref-palette-neutral20: #2F3032; --md-ref-palette-neutral30: #454748; --md-ref-palette-neutral40: #5D5E60; --md-ref-palette-neutral50: #757779; --md-ref-palette-neutral60: #8F9193; --md-ref-palette-neutral70: #A9ABAD; --md-ref-palette-neutral80: #C5C7C9; --md-ref-palette-neutral90: #E1E3E5; --md-ref-palette-neutral95: #EFF1F3; --md-ref-palette-neutral99: #FAFCFE; --md-ref-palette-neutral100: #FFFFFF; } /* ── Typography Tokens ────────────────────────────────────── */ :root { --md-ref-typeface-brand: Architects Daughter; --md-ref-typeface-plain: Lato; --md-ref-typeface-label: Arial; --md-sys-typescale-display-large: 500 3.5625rem/4rem Architects Daughter; --md-sys-typescale-display-medium: 500 2.8125rem/3.25rem Architects Daughter; --md-sys-typescale-display-small: 500 2.25rem/2.75rem Architects Daughter; --md-sys-typescale-headline-large: 500 2rem/2.5rem Architects Daughter; --md-sys-typescale-headline-medium: 500 1.75rem/2.25rem Architects Daughter; --md-sys-typescale-headline-small: 500 1.5rem/2rem Architects Daughter; --md-sys-typescale-title-large: 500 1.375rem/1.75rem Architects Daughter; --md-sys-typescale-title-medium: 500 1rem/1.5rem Lato; --md-sys-typescale-title-small: 500 0.875rem/1.25rem Lato; --md-sys-typescale-body-large: 400 1rem/1.5rem Lato; --md-sys-typescale-body-medium: 400 0.875rem/1.25rem Lato; --md-sys-typescale-body-small: 400 0.75rem/1rem Lato; --md-sys-typescale-label-large: 500 0.875rem/1.25rem Arial; --md-sys-typescale-label-medium: 500 0.75rem/1rem Arial; --md-sys-typescale-label-small: 500 0.6875rem/1rem Arial; } /* ── Light Theme (default) ────────────────────────────────── */ :root, .theme-light, [data-theme="light"] { color-scheme: light; --md-sys-color-primary: #7B1423; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #FFC1BF; --md-sys-color-on-primary-container: #4E0000; --md-sys-color-secondary: #475569; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #D5E4FB; --md-sys-color-on-secondary-container: #0D1C2D; --md-sys-color-tertiary: #281400; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #FCDCCA; --md-sys-color-on-tertiary-container: #2B1705; --md-sys-color-neutral: #F8FAFC; --md-sys-color-on-neutral: #000000; --md-sys-color-neutral-container: #E1E3E5; --md-sys-color-on-neutral-container: #1A1C1D; --md-sys-color-surface: #F7F9FB; --md-sys-color-on-surface: #1A1C1D; --md-sys-color-surface-dim: #D8DADC; --md-sys-color-surface-bright: #F7F9FB; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F2F4F6; --md-sys-color-surface-container: #ECEEF0; --md-sys-color-surface-container-high: #E6E8EA; --md-sys-color-surface-container-highest: #E1E3E5; --md-sys-color-on-surface-variant: #454748; --md-sys-color-outline: #757779; --md-sys-color-outline-variant: #C5C7C9; --md-sys-color-inverse-surface: #2F3032; --md-sys-color-inverse-on-surface: #EFF1F3; --md-sys-color-inverse-primary: #FFA5A4; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; } /* ── Dark Theme (class toggle) ────────────────────────────── */ .theme-dark, [data-theme="dark"] { color-scheme: dark; --md-sys-color-primary: #FFA5A4; --md-sys-color-on-primary: #690016; --md-sys-color-primary-container: #86202B; --md-sys-color-on-primary-container: #FFC1BF; --md-sys-color-secondary: #B9C7DF; --md-sys-color-on-secondary: #233144; --md-sys-color-secondary-container: #3A485B; --md-sys-color-on-secondary-container: #D5E4FB; --md-sys-color-tertiary: #DFC1AF; --md-sys-color-on-tertiary: #412C1E; --md-sys-color-tertiary-container: #594233; --md-sys-color-on-tertiary-container: #FCDCCA; --md-sys-color-neutral: #C5C7C9; --md-sys-color-on-neutral: #2F3032; --md-sys-color-neutral-container: #454748; --md-sys-color-on-neutral-container: #E1E3E5; --md-sys-color-surface: #2F3032; --md-sys-color-on-surface: #E1E3E5; --md-sys-color-surface-dim: #121315; --md-sys-color-surface-bright: #38393B; --md-sys-color-surface-container-lowest: #0C0E10; --md-sys-color-surface-container-low: #1A1C1D; --md-sys-color-surface-container: #1E2021; --md-sys-color-surface-container-high: #292A2C; --md-sys-color-surface-container-highest: #333536; --md-sys-color-on-surface-variant: #C5C7C9; --md-sys-color-outline: #8F9193; --md-sys-color-outline-variant: #454748; --md-sys-color-inverse-surface: #E1E3E5; --md-sys-color-inverse-on-surface: #2F3032; --md-sys-color-inverse-primary: #A33B41; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; } /* ── Auto Dark Mode (OS preference) ───────────────────────── */ @media (prefers-color-scheme: dark) { :root:not(.theme-light):not([data-theme="light"]) { color-scheme: dark; --md-sys-color-primary: #FFA5A4; --md-sys-color-on-primary: #690016; --md-sys-color-primary-container: #86202B; --md-sys-color-on-primary-container: #FFC1BF; --md-sys-color-secondary: #B9C7DF; --md-sys-color-on-secondary: #233144; --md-sys-color-secondary-container: #3A485B; --md-sys-color-on-secondary-container: #D5E4FB; --md-sys-color-tertiary: #DFC1AF; --md-sys-color-on-tertiary: #412C1E; --md-sys-color-tertiary-container: #594233; --md-sys-color-on-tertiary-container: #FCDCCA; --md-sys-color-neutral: #C5C7C9; --md-sys-color-on-neutral: #2F3032; --md-sys-color-neutral-container: #454748; --md-sys-color-on-neutral-container: #E1E3E5; --md-sys-color-surface: #2F3032; --md-sys-color-on-surface: #E1E3E5; --md-sys-color-surface-dim: #121315; --md-sys-color-surface-bright: #38393B; --md-sys-color-surface-container-lowest: #0C0E10; --md-sys-color-surface-container-low: #1A1C1D; --md-sys-color-surface-container: #1E2021; --md-sys-color-surface-container-high: #292A2C; --md-sys-color-surface-container-highest: #333536; --md-sys-color-on-surface-variant: #C5C7C9; --md-sys-color-outline: #8F9193; --md-sys-color-outline-variant: #454748; --md-sys-color-inverse-surface: #E1E3E5; --md-sys-color-inverse-on-surface: #2F3032; --md-sys-color-inverse-primary: #A33B41; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; } } /* ── Stitch / MindStudio Aliases ──────────────────────────── */ :root { /* Colors — these resolve to the active theme's system tokens */ --color-primary: var(--md-sys-color-primary); --color-primary-dark: var(--md-sys-color-on-primary-container); --color-secondary: var(--md-sys-color-secondary); --color-background: var(--md-sys-color-surface); --color-surface: var(--md-sys-color-surface-container); --color-error: #B3261E; --color-text-primary: var(--md-sys-color-on-surface); --color-text-secondary: var(--md-sys-color-on-surface-variant); --color-border: var(--md-sys-color-outline-variant); /* Typography — shorthand aliases */ --font-heading: Architects Daughter; --font-body: Lato; --font-label: Arial; /* Spacing (8px base grid) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; /* Shape */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 28px; --radius-full: 9999px; /* Elevation */ --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15); --shadow-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15); --shadow-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3); --shadow-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3); --shadow-5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.3); } /* Surface containers — use for cards, sheets, dialogs */ .brand-surface { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); } .brand-surface-dim { background: var(--md-sys-color-surface-dim); color: var(--md-sys-color-on-surface); } .brand-surface-bright { background: var(--md-sys-color-surface-bright); color: var(--md-sys-color-on-surface); } .brand-surface-container-lowest { background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); } .brand-surface-container-low { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); } .brand-surface-container { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); } .brand-surface-container-high { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); } .brand-surface-container-highest { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); } .brand-bg-primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .brand-bg-primary-container { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .brand-bg-secondary { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); } .brand-bg-secondary-container { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .brand-bg-tertiary { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); } .brand-bg-tertiary-container { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .brand-bg-neutral { background: var(--md-sys-color-neutral); color: var(--md-sys-color-on-neutral); } .brand-bg-neutral-container { background: var(--md-sys-color-neutral-container); color: var(--md-sys-color-on-neutral-container); } /* Text colors */ .brand-text-primary { color: var(--md-sys-color-primary); } .brand-text-secondary { color: var(--md-sys-color-secondary); } .brand-text-tertiary { color: var(--md-sys-color-tertiary); } .brand-text-on-surface { color: var(--md-sys-color-on-surface); } .brand-text-on-surface-variant { color: var(--md-sys-color-on-surface-variant); } /* Typography classes */ .brand-display-large { font: var(--md-sys-typescale-display-large); } .brand-display-medium { font: var(--md-sys-typescale-display-medium); } .brand-display-small { font: var(--md-sys-typescale-display-small); } .brand-headline-large { font: var(--md-sys-typescale-headline-large); } .brand-headline-medium { font: var(--md-sys-typescale-headline-medium); } .brand-headline-small { font: var(--md-sys-typescale-headline-small); } .brand-title-large { font: var(--md-sys-typescale-title-large); } .brand-title-medium { font: var(--md-sys-typescale-title-medium); } .brand-title-small { font: var(--md-sys-typescale-title-small); } .brand-body-large { font: var(--md-sys-typescale-body-large); } .brand-body-medium { font: var(--md-sys-typescale-body-medium); } .brand-body-small { font: var(--md-sys-typescale-body-small); } .brand-label-large { font: var(--md-sys-typescale-label-large); } .brand-label-medium { font: var(--md-sys-typescale-label-medium); } .brand-label-small { font: var(--md-sys-typescale-label-small); } /* Elevation */ .brand-elevation-1 { box-shadow: var(--shadow-1); } .brand-elevation-2 { box-shadow: var(--shadow-2); } .brand-elevation-3 { box-shadow: var(--shadow-3); } .brand-elevation-4 { box-shadow: var(--shadow-4); } .brand-elevation-5 { box-shadow: var(--shadow-5); } /* Button */ .brand-btn-primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .brand-btn-primary:hover { background: var(--md-ref-palette-primary80); color: var(--md-sys-color-{role}) } .brand-btn-outline-primary { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); } .brand-btn-outline-primary:hover { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .brand-btn-secondary { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); } .brand-btn-secondary:hover { background: var(--md-ref-palette-secondary80); color: var(--md-sys-color-{role}) } .brand-btn-outline-secondary { border-color: var(--md-sys-color-secondary); color: var(--md-sys-color-secondary); } .brand-btn-outline-secondary:hover { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); } .brand-btn-tertiary { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); } .brand-btn-tertiary:hover { background: var(--md-ref-palette-tertiary80); color: var(--md-sys-color-{role}) } .brand-btn-outline-tertiary { border-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-tertiary); } .brand-btn-outline-tertiary:hover { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); } .brand-btn-neutral { background: var(--md-ref-palette-neutral80); color: var(--md-sys-color-on-neutral); } .brand-btn-neutral:hover { background: var(--md-ref-palette-neutral60); color: var(--md-sys-color-neutral) } .brand-btn-outline-neutral { border-color: var(--md-ref-palette-neutral80); color: var(--md-ref-palette-neutral80); } .brand-btn-outline-neutral:hover { background: var(--md-ref-palette-neutral80); color: var(--md-sys-color-on-neutral); } /* Shape */ .brand-rounded-sm { border-radius: var(--radius-sm); } .brand-rounded-md { border-radius: var(--radius-md); } .brand-rounded-lg { border-radius: var(--radius-lg); } .brand-rounded-xl { border-radius: var(--radius-xl); } .brand-rounded-full { border-radius: var(--radius-full); } /* Outlines & dividers */ .brand-outline { border: 1px solid var(--md-sys-color-outline); } .brand-outline-variant { border: 1px solid var(--md-sys-color-outline-variant); } .brand-divider { border-bottom: 1px solid var(--md-sys-color-outline-variant); } /* Custom CSS */