/** * UTU Theme - Root Styles * Color palette, typography, and dark mode overrides * */ :root { /* Base colors */ --color-black: #000; --color-white: #fff; --color-gray-lightest: #f7f7f7; --color-gray-lighter: #f2f2f2; --color-gray-light: #d9d9d9; --color-gray: #e5e5e5; --color-gray-dark: #666; --color-gray-darker: #333; /* Accent colors */ --color-red: #f8485e; --color-blue: #78c8d2; --color-blue-focus: #4ab8c7; --color-green-bright: #2ecc71; --color-yellow: #f1c40f; /* Mint/Teal palette (Primary) */ --color-mint-lighter: #00695f; --color-mint-light: #01554d; --color-mint: #004a43; --color-mint-dark: #003b33; --color-mint-darker: #01332e; /* Pink palette */ --color-pink: #eccce3; --color-pink-darker: #e2b9d6; /* Sand/Beige palette (Secondary) */ --color-sand-lighter: #f6f4ec; --color-sand: #e9e3cf; --color-sand-darker: #cec7b1; --color-beige: var(--color-sand); /* Primary color aliases */ --primary-color-lighter: var(--color-mint-lighter); --primary-color-light: var(--color-mint-light); --primary-color: var(--color-mint); --primary-color-dark: var(--color-mint-dark); --primary-color-darker: var(--color-mint-darker); --color-green: var(--primary-color); /* Secondary color aliases */ --secondary-color: var(--color-sand); --color-light-grey: var(--color-sand); /* Typography */ --font-size-base: 112.5%; --font-family-heading: 'Playfair Display', serif; --font-family-content: 'Noto Sans', sans-serif; /* Text colors */ --color-text-primary: var(--color-gray-darker); --color-text-secondary: rgba(51, 51, 51, 0.7); --color-text-on-dark: var(--color-white); /* Background colors */ --color-bg-primary: var(--color-white); --color-bg-secondary: var(--color-sand-lighter); --color-bg-tertiary: var(--color-sand); /* Border colors */ --color-border: var(--color-sand-darker); --color-border-light: var(--color-sand); } /* Dark mode overrides — apply .dark-mode class to or */ .dark-mode { --color-sand-lighter: #2a2a28; --color-sand: #3d3d38; --color-sand-darker: #4a4a44; --color-gray-lightest: #222220; --color-gray-lighter: #2a2a28; --color-gray-light: #4a4a44; --color-gray: #3d3d38; --color-gray-dark: #b0b0a8; --color-gray-darker: #f0f0e8; --color-text-primary: #f0f0e8; --color-text-secondary: rgba(240, 240, 232, 0.7); --color-text-on-dark: #1a1a18; --color-bg-primary: #1a1a18; --color-bg-secondary: #2a2a28; --color-bg-tertiary: #3d3d38; --color-border: #4a4a44; --color-border-light: #3d3d38; } /* Base typography */ html { font-size: var(--font-size-base); } body { font-family: var(--font-family-content); color: var(--color-gray-darker); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); }