@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Exo:ital,wght@0,100..900;1,100..900&family=Inconsolata:wdth,wght@50..200,200..900&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; :root { --font-inter: 'Inter Tight', ui-sans-serif, system-ui; --font-exo: 'Exo', 'Inter Tight', ui-sans-serif, system-ui; --font-mono: 'Inconsolata', ui-monospace, monospace; /* CHORUS Brand CSS Variables - Ultra-Minimalist Implementation */ /* Core Brand Colors */ --color-carbon: #000000; --color-mulberry: #0b0213; --color-walnut: #403730; --color-nickel: #c1bfb1; /* CHORUS Semantic Color Tokens - 8 Color System */ --chorus-primary: #0b0213; /* carbon-950 */ --chorus-secondary: #0b0213; /* mulberry-950 */ --chorus-accent: #403730; /* walnut-900 */ --chorus-neutral: #c1bfb1; /* nickel-500 */ --chorus-info: #3a4654; /* ocean-900 */ --chorus-success: #3a4540; /* eucalyptus-900 */ --chorus-warning: #6a5c46; /* sand-900 */ --chorus-danger: #3e2d2c; /* coral-900 */ /* Light Theme Variables */ --bg-primary: #FFFFFF; --bg-secondary: #CCCCCC; --bg-tertiary: #AAAAAA; --bg-accent: #F7F7E2; --text-primary: #000000; --text-secondary: #1A1A1A; --text-tertiary: #333333; --text-subtle: #666666; --text-ghost: #999999; --border-invisible: #FAFAFA; --border-subtle: #F0F0F0; --border-defined: #E5E5E5; --border-emphasis: #CCCCCC; --accent-primary: #0b0213; /* Mulberry */ --accent-secondary: #403730; /* Walnut */ --accent-system: #5a6c80; /* Ocean */ /* Spacing System */ --space-micro: 0.25rem; /* 8px */ --space-sm: 0.5rem; /* 16px */ --space-md: 1rem; /* 32px */ --space-lg: 2rem; /* 64px */ --space-xl: 4rem; /* 128px */ --space-xxl: 8rem; /* 256px */ } /* Dark Theme Variables */ .dark { --bg-primary: #000000; --bg-secondary: #333333; --bg-tertiary: #555555; /* Mulberry */ --bg-accent: #1a1426; --text-primary: #FFFFFF; --text-secondary: #E0E0E0; --text-tertiary: #C0C0C0; --text-subtle: #A0A0A0; --text-ghost: #808080; --border-invisible: #1a1a1a; --border-subtle: #2a2a2a; --border-defined: #3a3a3a; --border-emphasis: #4a4a4a; --accent-primary: #F5F5DC; /* Sand */ --accent-secondary: #c1bfb1; /* Nickel */ } /* CHORUS Accessibility Theme System - Complete Color Adaptations */ /* Protanopia (Red-blind) - Ocean/Sand adaptations for maximum clarity */ [data-theme="protanopia"] { /* Logo material override */ --color-ring-primary: #1e40af; /* Blue-800 */ /* Primary brand colors adapted for red-blindness */ --chorus-primary: #3a4654; /* ocean-900 replaces carbon */ --chorus-secondary: #3a4654; /* ocean-900 replaces mulberry */ --chorus-accent: #6a5c46; /* sand-900 warm neutral */ --chorus-neutral: #c1bfb1; /* nickel-500 unchanged */ --chorus-info: #1e40af; /* ocean-800 enhanced */ --chorus-success: #6a5c46; /* sand-900 replaces eucalyptus */ --chorus-warning: #D0C9BF; /* sand-400 enhanced */ --chorus-danger: #4a5867; /* ocean-800 replaces coral */ /* Semantic color reassignments */ --accent-primary: #3a4654; /* Ocean replaces Mulberry */ --accent-secondary: #6a5c46; /* Sand replaces Walnut */ --accent-system: #1e40af; /* Enhanced Ocean blue */ } /* Deuteranopia (Green-blind) - Blue/Yellow enhanced contrast */ [data-theme="deuteranopia"] { /* Logo material override */ --color-ring-primary: #6b21a8; /* Purple-800 */ /* Primary brand colors adapted for green-blindness */ --chorus-primary: #0b0213; /* mulberry-950 enhanced */ --chorus-secondary: #6b21a8; /* purple-800 distinct */ --chorus-accent: #1e40af; /* blue-800 replaces walnut */ --chorus-neutral: #c1bfb1; /* nickel-500 unchanged */ --chorus-info: #1e40af; /* blue-800 enhanced */ --chorus-success: #6b21a8; /* purple-800 replaces eucalyptus */ --chorus-warning: #F1F0EF; /* sand-100 high contrast */ --chorus-danger: #991b1b; /* red-800 enhanced */ /* Semantic color reassignments */ --accent-primary: #6b21a8; /* Purple primary */ --accent-secondary: #1e40af; /* Blue secondary */ --accent-system: #991b1b; /* Red system alerts */ } /* Tritanopia (Blue-blind) - Coral/Eucalyptus substitutions */ [data-theme="tritanopia"] { /* Logo material override */ --color-ring-primary: #991b1b; /* Red-800 */ /* Primary brand colors adapted for blue-blindness */ --chorus-primary: #000000; /* carbon-950 unchanged */ --chorus-secondary: #403730; /* walnut-900 enhanced */ --chorus-accent: #991b1b; /* red-800 replaces blue elements */ --chorus-neutral: #c1bfb1; /* nickel-500 unchanged */ --chorus-info: #991b1b; /* red-800 replaces ocean */ --chorus-success: #6a5c46; /* sand-900 natural green replacement */ --chorus-warning: #D0C9BF; /* sand-400 warm warning */ --chorus-danger: #403730; /* walnut-900 dark contrast */ /* Semantic color reassignments */ --accent-primary: #991b1b; /* Red replaces blue elements */ --accent-secondary: #6a5c46; /* Sand warm accent */ --accent-system: #403730; /* Walnut system elements */ } /* Achromatopsia (Complete color blindness) - High contrast grayscale only */ [data-theme="achromatopsia"] { /* Logo material override */ --color-ring-primary: #374151; /* Gray-700 */ /* Complete grayscale adaptation */ --chorus-primary: #000000; /* Pure black */ --chorus-secondary: #1a1a1a; /* Carbon-800 */ --chorus-accent: #666666; /* Mid gray */ --chorus-neutral: #808080; /* Neutral mid-gray */ --chorus-info: #374151; /* Gray-700 */ --chorus-success: #2a2a2a; /* Dark gray for success */ --chorus-warning: #a0a0a0; /* Light gray for warnings */ --chorus-danger: #1a1a1a; /* Very dark gray for danger */ /* High contrast grayscale system */ --accent-primary: #000000; /* Pure black */ --accent-secondary: #666666; /* Mid-gray */ --accent-system: #374151; /* System gray */ /* Enhanced contrast overrides for all text and UI elements */ --bg-primary: #ffffff; --bg-secondary: #f0f0f0; --bg-tertiary: #e0e0e0; --bg-accent: #c0c0c0; --text-primary: #000000; --text-secondary: #1a1a1a; --text-tertiary: #333333; --text-subtle: #666666; --text-ghost: #999999; --border-invisible: #f8f8f8; --border-subtle: #e0e0e0; --border-defined: #c0c0c0; --border-emphasis: #808080; } html { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; scroll-behavior: smooth; } body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Blog-specific utilities */ .blog-container { @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8; padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .blog-meta { @apply text-sm text-carbon-600 dark:text-carbon-500 flex items-center space-x-4; } .blog-tag { @apply inline-block bg-carbon-200 dark:bg-mulberry-800 text-carbon-700 dark:text-mulberry-200 px-3 py-1 rounded-full text-xs font-medium; } /* Reading progress indicator */ .reading-progress { @apply fixed top-0 left-0 w-full h-1 bg-ocean-600 dark:bg-mulberry-600 transform origin-left scale-x-0 transition-transform z-50; } a { text-decoration: none; text-decoration-line: none; } /* Utilities */ .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }