/* ============================================================ 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: #002553; --md-ref-palette-primary20: #003A6C; --md-ref-palette-primary30: #005186; --md-ref-palette-primary40: #0069A0; --md-ref-palette-primary50: #0083BB; --md-ref-palette-primary60: #009DD7; --md-ref-palette-primary70: #11B8F4; --md-ref-palette-primary80: #4CD3FF; --md-ref-palette-primary90: #72F0FF; --md-ref-palette-primary95: #83FEFF; --md-ref-palette-primary99: #90FFFF; --md-ref-palette-primary100: #FFFFFF; --md-ref-palette-secondary0: #000000; --md-ref-palette-secondary10: #002553; --md-ref-palette-secondary20: #003A6C; --md-ref-palette-secondary30: #005186; --md-ref-palette-secondary40: #006AA0; --md-ref-palette-secondary50: #0083BB; --md-ref-palette-secondary60: #009DD7; --md-ref-palette-secondary70: #0DB8F4; --md-ref-palette-secondary80: #4BD3FF; --md-ref-palette-secondary90: #71F0FF; --md-ref-palette-secondary95: #82FEFF; --md-ref-palette-secondary99: #8FFFFF; --md-ref-palette-secondary100: #FFFFFF; --md-ref-palette-tertiary0: #000000; --md-ref-palette-tertiary10: #1B1B1B; --md-ref-palette-tertiary20: #303030; --md-ref-palette-tertiary30: #474747; --md-ref-palette-tertiary40: #5E5E5E; --md-ref-palette-tertiary50: #777777; --md-ref-palette-tertiary60: #919191; --md-ref-palette-tertiary70: #ABABAB; --md-ref-palette-tertiary80: #C6C6C6; --md-ref-palette-tertiary90: #E2E2E2; --md-ref-palette-tertiary95: #F1F1F1; --md-ref-palette-tertiary99: #FCFCFC; --md-ref-palette-tertiary100: #FFFFFF; --md-ref-palette-neutral0: #000000; --md-ref-palette-neutral10: #1B1B1B; --md-ref-palette-neutral20: #303030; --md-ref-palette-neutral30: #474747; --md-ref-palette-neutral40: #5E5E5E; --md-ref-palette-neutral50: #777777; --md-ref-palette-neutral60: #919191; --md-ref-palette-neutral70: #ABABAB; --md-ref-palette-neutral80: #C6C6C6; --md-ref-palette-neutral90: #E2E2E2; --md-ref-palette-neutral95: #F1F1F1; --md-ref-palette-neutral99: #FCFCFC; --md-ref-palette-neutral100: #FFFFFF; } /* ── Typography Tokens ────────────────────────────────────── */ :root { --md-ref-typeface-brand: Times New Roman; --md-ref-typeface-plain: Arial; --md-ref-typeface-label: Arial; --md-sys-typescale-display-large: 500 3.5625rem/4rem Times New Roman; --md-sys-typescale-display-medium: 500 2.8125rem/3.25rem Times New Roman; --md-sys-typescale-display-small: 500 2.25rem/2.75rem Times New Roman; --md-sys-typescale-headline-large: 500 2rem/2.5rem Times New Roman; --md-sys-typescale-headline-medium: 500 1.75rem/2.25rem Times New Roman; --md-sys-typescale-headline-small: 500 1.5rem/2rem Times New Roman; --md-sys-typescale-title-large: 500 1.375rem/1.75rem Times New Roman; --md-sys-typescale-title-medium: 500 1rem/1.5rem Arial; --md-sys-typescale-title-small: 500 0.875rem/1.25rem Arial; --md-sys-typescale-body-large: 400 1rem/1.5rem Arial; --md-sys-typescale-body-medium: 400 0.875rem/1.25rem Arial; --md-sys-typescale-body-small: 400 0.75rem/1rem Arial; --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: #02B5F1; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #72F0FF; --md-sys-color-on-primary-container: #002553; --md-sys-color-secondary: #02B6F2; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #71F0FF; --md-sys-color-on-secondary-container: #002553; --md-sys-color-tertiary: #D8D8D8; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #E2E2E2; --md-sys-color-on-tertiary-container: #1B1B1B; --md-sys-color-neutral: #FFFFFF; --md-sys-color-on-neutral: #000000; --md-sys-color-neutral-container: #E2E2E2; --md-sys-color-on-neutral-container: #1B1B1B; --md-sys-color-surface: #F9F9F9; --md-sys-color-on-surface: #1B1B1B; --md-sys-color-surface-dim: #DADADA; --md-sys-color-surface-bright: #F9F9F9; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F3F3F3; --md-sys-color-surface-container: #EEEEEE; --md-sys-color-surface-container-high: #E8E8E8; --md-sys-color-surface-container-highest: #E2E2E2; --md-sys-color-on-surface-variant: #474747; --md-sys-color-outline: #777777; --md-sys-color-outline-variant: #C6C6C6; --md-sys-color-inverse-surface: #303030; --md-sys-color-inverse-on-surface: #F1F1F1; --md-sys-color-inverse-primary: #4CD3FF; --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: #4CD3FF; --md-sys-color-on-primary: #003A6C; --md-sys-color-primary-container: #005186; --md-sys-color-on-primary-container: #72F0FF; --md-sys-color-secondary: #4BD3FF; --md-sys-color-on-secondary: #003A6C; --md-sys-color-secondary-container: #005186; --md-sys-color-on-secondary-container: #71F0FF; --md-sys-color-tertiary: #C6C6C6; --md-sys-color-on-tertiary: #303030; --md-sys-color-tertiary-container: #474747; --md-sys-color-on-tertiary-container: #E2E2E2; --md-sys-color-neutral: #C6C6C6; --md-sys-color-on-neutral: #303030; --md-sys-color-neutral-container: #474747; --md-sys-color-on-neutral-container: #E2E2E2; --md-sys-color-surface: #303030; --md-sys-color-on-surface: #E2E2E2; --md-sys-color-surface-dim: #131313; --md-sys-color-surface-bright: #393939; --md-sys-color-surface-container-lowest: #0E0E0E; --md-sys-color-surface-container-low: #1B1B1B; --md-sys-color-surface-container: #1F1F1F; --md-sys-color-surface-container-high: #2A2A2A; --md-sys-color-surface-container-highest: #353535; --md-sys-color-on-surface-variant: #C6C6C6; --md-sys-color-outline: #919191; --md-sys-color-outline-variant: #474747; --md-sys-color-inverse-surface: #E2E2E2; --md-sys-color-inverse-on-surface: #303030; --md-sys-color-inverse-primary: #0069A0; --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: #4CD3FF; --md-sys-color-on-primary: #003A6C; --md-sys-color-primary-container: #005186; --md-sys-color-on-primary-container: #72F0FF; --md-sys-color-secondary: #4BD3FF; --md-sys-color-on-secondary: #003A6C; --md-sys-color-secondary-container: #005186; --md-sys-color-on-secondary-container: #71F0FF; --md-sys-color-tertiary: #C6C6C6; --md-sys-color-on-tertiary: #303030; --md-sys-color-tertiary-container: #474747; --md-sys-color-on-tertiary-container: #E2E2E2; --md-sys-color-neutral: #C6C6C6; --md-sys-color-on-neutral: #303030; --md-sys-color-neutral-container: #474747; --md-sys-color-on-neutral-container: #E2E2E2; --md-sys-color-surface: #303030; --md-sys-color-on-surface: #E2E2E2; --md-sys-color-surface-dim: #131313; --md-sys-color-surface-bright: #393939; --md-sys-color-surface-container-lowest: #0E0E0E; --md-sys-color-surface-container-low: #1B1B1B; --md-sys-color-surface-container: #1F1F1F; --md-sys-color-surface-container-high: #2A2A2A; --md-sys-color-surface-container-highest: #353535; --md-sys-color-on-surface-variant: #C6C6C6; --md-sys-color-outline: #919191; --md-sys-color-outline-variant: #474747; --md-sys-color-inverse-surface: #E2E2E2; --md-sys-color-inverse-on-surface: #303030; --md-sys-color-inverse-primary: #0069A0; --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: Times New Roman; --font-body: Arial; --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 */