/* ============================================================ Maestoria — Design System · Colors & Type ------------------------------------------------------------ An art store selling cinematic, candlelit images of the great masters at work on their masterpieces. The system is a darkened museum: deep warm-charcoal "gallery wall" surfaces by default, gilded gold accents (gold-leaf / gilt frames), an editorial Cormorant Garamond display serif over Inter body. THEMING :root = Gallery (dark) — the DEFAULT theme. .theme-light = Cream (light) — the alternate gallery wall. Add class="theme-light" to any wrapper (or ) to flip a region to the cream surface set. Every component reads the semantic tokens below, so the whole system re-skins with no markup changes. FONTS — both load from Google Fonts, no substitution needed: · Cormorant Garamond (display / headings) — museum-catalog serif · Inter (body / UI) · JetBrains Mono (code) ============================================================ */ /* Fonts are loaded via in each HTML (keeps html-to-image capture working). */ :root { /* ---------- FONT FAMILIES ---------- */ --font-serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; /* display headlines */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* body + UI */ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* code */ /* ============================================================ COLOR TOKENS — GALLERY (DARK) DEFAULT ============================================================ */ /* --- Brand & accent (gilded gold) --- */ --primary: #b08d57; /* antique gold — gilt frame / gold leaf. Every primary CTA */ --primary-active: #8c6d3f; /* press / darker bronze */ --primary-disabled: #5a5346; /* muted desaturated gold-gray (inert on dark) */ --accent-teal: #5db8a6; /* sparing secondary — verdigris/patina dots */ --accent-amber: #e8a55a; /* sparing secondary — candlelit highlight */ /* --- Surfaces (warm charcoal gallery wall) --- */ --canvas: #1a1714; /* default page floor — deep warm charcoal, NOT pure black */ --surface-soft: #211d18; /* soft band backgrounds, dividers */ --surface-card: #26211a; /* content cards — a lifted frame-mat tone */ --surface-cream-strong: #302a21; /* selected tabs, emphasized bands */ --surface-dark: #141110; /* deepest recess — footer, code wells */ --surface-dark-elevated:#221d17; /* elevated cards inside dark bands */ --surface-dark-soft: #1b1714; /* code block bg inside dark cards */ /* --- Hairlines / borders --- */ --hairline: #36302a; /* 1px border on gallery surfaces */ --hairline-soft: #2a251f; /* barely-visible in-band divider */ --hairline-dark: #3c362d; /* border on the deepest surfaces */ /* --- Text (warm cream-white on charcoal) --- */ --ink: #f6f1e8; /* headlines + primary text */ --body-strong: #ece4d6; /* emphasized paragraphs, lead text */ --body: #cabfae; /* default running text */ --muted: #968b7b; /* sub-heads, breadcrumbs */ --muted-soft: #6f6757; /* captions, fine print, copyright */ --on-primary: #ffffff; /* text on gold */ --on-dark: #f6f1e8; /* cream-white on the deepest surfaces */ --on-dark-soft: #968b7b; /* footer body, secondary labels */ /* --- Semantic --- */ --success: #5db872; --warning: #d4a017; --error: #c64545; /* ============================================================ RADII ============================================================ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* buttons, inputs, tabs */ --radius-lg: 12px; /* content + product cards */ --radius-xl: 16px; /* hero illustration container */ --radius-pill: 9999px; /* badges, pills */ --radius-full: 9999px; /* icon buttons, avatars */ /* ============================================================ SPACING (4px base unit) ============================================================ */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 96px; /* between major bands */ /* ============================================================ ELEVATION (color-block first, shadow rare) ============================================================ */ --shadow-soft: 0 1px 3px rgba(0,0,0,0.35); --shadow-card: 0 2px 8px rgba(0,0,0,0.30); --shadow-pop: 0 8px 28px rgba(0,0,0,0.45); --ring-focus: 0 0 0 3px rgba(176,141,87,0.30); /* gold focus ring */ /* ============================================================ TYPE SCALE — raw values (Cormorant Garamond is a delicate face; display runs at 500 for museum-plaque presence. Body/labels unchanged.) ============================================================ */ --display-xl: 500 64px/1.05 var(--font-serif); --display-lg: 500 48px/1.1 var(--font-serif); --display-md: 500 36px/1.15 var(--font-serif); --display-sm: 500 28px/1.2 var(--font-serif); --title-lg: 500 22px/1.3 var(--font-sans); --title-md: 500 18px/1.4 var(--font-sans); --title-sm: 500 16px/1.4 var(--font-sans); --body-md: 400 16px/1.55 var(--font-sans); --body-sm: 400 14px/1.55 var(--font-sans); --caption: 500 13px/1.4 var(--font-sans); --code: 400 14px/1.6 var(--font-mono); } /* ============================================================ LIGHT (CREAM) ALTERNATE THEME Restores the warm-cream gallery wall. Same gold accent. Apply class="theme-light" to a wrapper or . ============================================================ */ .theme-light { --primary-disabled: #e6dfd8; --canvas: #faf9f5; --surface-soft: #f5f0e8; --surface-card: #efe9de; --surface-cream-strong: #e8e0d2; --surface-dark: #181715; --surface-dark-elevated:#252320; --surface-dark-soft: #1f1e1b; --hairline: #e6dfd8; --hairline-soft: #ebe6df; --hairline-dark: #34322d; --ink: #141413; --body-strong: #252523; --body: #3d3d3a; --muted: #6c6a64; --muted-soft: #8e8b82; --on-primary: #ffffff; --on-dark: #faf9f5; --on-dark-soft: #a09d96; --shadow-soft: 0 1px 3px rgba(20,20,19,0.08); --shadow-card: 0 2px 8px rgba(20,20,19,0.06); --shadow-pop: 0 8px 28px rgba(20,20,19,0.12); } /* ============================================================ SEMANTIC TYPE CLASSES Display sizes: Cormorant Garamond, weight 500, negative letter-spacing for the tight museum-catalog headline feel. ============================================================ */ .t-display-xl { font: var(--display-xl); letter-spacing: -1.5px; color: var(--ink); } .t-display-lg { font: var(--display-lg); letter-spacing: -1px; color: var(--ink); } .t-display-md { font: var(--display-md); letter-spacing: -0.5px; color: var(--ink); } .t-display-sm { font: var(--display-sm); letter-spacing: -0.3px; color: var(--ink); } .t-title-lg { font: var(--title-lg); color: var(--ink); } .t-title-md { font: var(--title-md); color: var(--ink); } .t-title-sm { font: var(--title-sm); color: var(--ink); } .t-body-md { font: var(--body-md); color: var(--body); } .t-body-sm { font: var(--body-sm); color: var(--body); } .t-caption { font: var(--caption); color: var(--muted); } .t-caption-up { font: 500 12px/1.4 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); } .t-code { font: var(--code); color: var(--on-dark); } /* ---------- raw element defaults (optional convenience) ---------- */ .ds-scope h1 { font: var(--display-xl); letter-spacing: -1.5px; color: var(--ink); margin: 0; } .ds-scope h2 { font: var(--display-lg); letter-spacing: -1px; color: var(--ink); margin: 0; } .ds-scope h3 { font: var(--display-md); letter-spacing: -0.5px; color: var(--ink); margin: 0; } .ds-scope p { font: var(--body-md); color: var(--body); margin: 0; } .ds-scope a { color: var(--primary); text-decoration: none; } .ds-scope code { font: var(--code); }