f5f96ba505
- Updated configuration and deployment files - Improved system architecture and components - Enhanced documentation and testing - Fixed various issues and added new features 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
655 lines
23 KiB
CSS
655 lines
23 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
:root {
|
|
--carbon-950: #000000;
|
|
--carbon-900: #0a0a0a;
|
|
--carbon-800: #1a1a1a;
|
|
--carbon-700: #2a2a2a;
|
|
--carbon-600: #666666;
|
|
--carbon-500: #808080;
|
|
--carbon-400: #a0a0a0;
|
|
--carbon-300: #c0c0c0;
|
|
--carbon-200: #e0e0e0;
|
|
--carbon-100: #f0f0f0;
|
|
--carbon-50: #f8f8f8;
|
|
|
|
--mulberry-950: #0b0213;
|
|
--mulberry-900: #1a1426;
|
|
--mulberry-800: #2a2639;
|
|
--mulberry-700: #3a384c;
|
|
--mulberry-600: #4a4a5f;
|
|
--mulberry-500: #5a5c72;
|
|
--mulberry-400: #7a7e95;
|
|
--mulberry-300: #9aa0b8;
|
|
--mulberry-200: #bac2db;
|
|
--mulberry-100: #dae4fe;
|
|
--mulberry-50: #f0f4ff;
|
|
--walnut-950: #1E1815;
|
|
--walnut-900: #403730;
|
|
--walnut-800: #504743;
|
|
--walnut-700: #605756;
|
|
--walnut-600: #706769;
|
|
--walnut-500: #80777c;
|
|
--walnut-400: #90878f;
|
|
--walnut-300: #a09aa2;
|
|
--walnut-200: #b0adb5;
|
|
--walnut-100: #c0c0c8;
|
|
--walnut-50: #d0d3db;
|
|
--walnut-25: #e0e6ee;
|
|
|
|
--nickel-950: #171717;
|
|
--nickel-900: #2a2a2a;
|
|
--nickel-800: #3d3d3d;
|
|
--nickel-700: #505050;
|
|
--nickel-600: #636363;
|
|
--nickel-500: #767676;
|
|
--nickel-400: #c1bfb1;
|
|
--nickel-300: #d4d2c6;
|
|
--nickel-200: #e7e5db;
|
|
--nickel-100: #faf8f0;
|
|
--nickel-50: #fdfcf8;
|
|
|
|
--ocean-950: #2a3441;
|
|
--ocean-900: #3a4654;
|
|
--ocean-800: #4a5867;
|
|
--ocean-700: #5a6c80;
|
|
--ocean-600: #6a7e99;
|
|
--ocean-500: #7a90b2;
|
|
--ocean-400: #8ba3c4;
|
|
--ocean-300: #9bb6d6;
|
|
--ocean-200: #abc9e8;
|
|
--ocean-100: #bbdcfa;
|
|
--ocean-50: #cbefff;
|
|
|
|
--eucalyptus-950: #2a3330;
|
|
--eucalyptus-900: #3a4540;
|
|
--eucalyptus-800: #4a5750;
|
|
--eucalyptus-700: #515d54;
|
|
--eucalyptus-600: #5a6964;
|
|
--eucalyptus-500: #6a7974;
|
|
--eucalyptus-400: #7a8a7f;
|
|
--eucalyptus-300: #8a9b8f;
|
|
--eucalyptus-200: #9aac9f;
|
|
--eucalyptus-100: #aabdaf;
|
|
--eucalyptus-50: #bacfbf;
|
|
|
|
--sand-950: #8E7B5E;
|
|
--sand-900: #99886E;
|
|
--sand-800: #A4957E;
|
|
--sand-700: #AFA28E;
|
|
--sand-600: #BAAF9F;
|
|
--sand-500: #C5BCAF;
|
|
--sand-400: #D0C9BF;
|
|
--sand-300: #DBD6CF;
|
|
--sand-200: #E6E3DF;
|
|
--sand-100: #F1F0EF;
|
|
--sand-50: #F1F0EF;
|
|
|
|
--coral-950: #6A4A48;
|
|
--coral-900: #7B5D5A;
|
|
--coral-800: #8C706C;
|
|
--coral-700: #9D8380;
|
|
--coral-600: #AE9693;
|
|
--coral-500: #BFAAA7;
|
|
--coral-400: #D0BDBB;
|
|
--coral-300: #E1D1CF;
|
|
--coral-200: #F2E4E3;
|
|
--coral-100: #9e979c;
|
|
--coral-50: #aea7ac;
|
|
|
|
|
|
|
|
}
|
|
/*
|
|
--font-sans: ['Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
|
|
--font-mono: ['Inconsolata', 'ui-monospace', 'monospace'],
|
|
--font-logo: ['Exo', 'Inter Tight', 'sans-serif']
|
|
},
|
|
spacing: {
|
|
'chorus-xxs': '0.854rem',
|
|
'chorus-xs': '0.945rem',
|
|
'chorus-sm': '1.0rem',
|
|
'chorus-base': '1.25rem',
|
|
'chorus-md': '1.953rem',
|
|
'chorus-lg': '2.441rem',
|
|
'chorus-xl': '3.052rem',
|
|
'chorus-xxl': '6.1rem',
|
|
},
|
|
// CHORUS Proportional Typography System (Major Third - 1.25 ratio)
|
|
fontSize: {
|
|
// Base scale using Minor Third (1.20) ratio for harmonious proportions
|
|
'xs': ['0.854rem', { lineHeight: '1.00rem', fontWeight: '600' }], // 10.24px
|
|
'sm': ['0.954rem', { lineHeight: '1.10rem', fontWeight: '500' }], // 12.8px
|
|
'base': ['1rem', { lineHeight: '1.50rem', fontWeight: '400' }], // 16px (foundation)
|
|
'lg': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '400' }], // 20px
|
|
'xl': ['1.563rem', { lineHeight: '2.00rem', fontWeight: '400' }], // 25px
|
|
'2xl': ['1.953rem', { lineHeight: '2.50rem', fontWeight: '300' }], // 31.25px
|
|
'3xl': ['2.441rem', { lineHeight: '3.00rem', fontWeight: '200' }], // 39px
|
|
'4xl': ['3.052rem', { lineHeight: '3.50rem', fontWeight: '100' }], // 48.8px
|
|
'5xl': ['3.815rem', { lineHeight: '4.00rem', fontWeight: '100' }], // 61px
|
|
|
|
// Semantic heading sizes for easier usage
|
|
'h7': ['1.000rem', { lineHeight: '1.25rem', fontWeight: '400' }], // 14px
|
|
'h6': ['1.250rem', { lineHeight: '1.563rem', fontWeight: '500' }], // 16px
|
|
'h5': ['1.563rem', { lineHeight: '1.953rem', fontWeight: '500' }], // 20px
|
|
'h4': ['1.953rem', { lineHeight: '2.441rem', fontWeight: '600' }], // 25px
|
|
'h3': ['2.441rem', { lineHeight: '3.052rem', fontWeight: '600' }], // 31.25px
|
|
'h2': ['3.052rem', { lineHeight: '4.768rem', fontWeight: '700' }], // 39px
|
|
'h1': ['4.768rem', { lineHeight: '6.96rem', fontWeight: '700' }], // 76.3px
|
|
|
|
|
|
// Display sizes for hero sections
|
|
'display-sm': ['3.815rem', { lineHeight: '4rem', fontWeight: '800' }], // 61px
|
|
'display-md': ['4.768rem', { lineHeight: '5rem', fontWeight: '800' }], // 76.3px
|
|
'display-lg': ['5.96rem', { lineHeight: '6rem', fontWeight: '800' }], // 95.4px
|
|
},
|
|
|
|
// Extended rem-based sizing for complete system consistency
|
|
width: {
|
|
'rem-xs': '0.640rem',
|
|
'rem-sm': '0.800rem',
|
|
'rem-base': '1.000rem',
|
|
'rem-lg': '1.250rem',
|
|
'rem-xl': '1.563rem',
|
|
'rem-2xl': '1.953rem',
|
|
'rem-3xl': '2.441rem',
|
|
'rem-4xl': '3.052rem',
|
|
'rem-5xl': '3.815rem',
|
|
},
|
|
|
|
height: {
|
|
'rem-xs': '0.640rem',
|
|
'rem-sm': '0.800rem',
|
|
'rem-base': '1.000rem',
|
|
'rem-lg': '1.250rem',
|
|
'rem-xl': '1.563rem',
|
|
'rem-2xl': '1.953rem',
|
|
'rem-3xl': '2.441rem',
|
|
'rem-4xl': '3.052rem',
|
|
'rem-5xl': '3.815rem',
|
|
},
|
|
|
|
// Border radius using proportional scale
|
|
borderRadius: {
|
|
'none': '0',
|
|
'micro': '0.125rem', // 2px
|
|
'sm': '0.25rem', // 4px
|
|
'base': '0.375rem', // 6px
|
|
'md': '0.5rem', // 8px
|
|
'lg': '0.75rem', // 12px
|
|
'xl': '1rem', // 16px
|
|
'full': '9999px',
|
|
}
|
|
*/
|
|
|
|
/* === Teaser-aligned Global Foundation === */
|
|
/* CHORUS Proportional Typography System - 16px Base */
|
|
html { font-size: 16px; }
|
|
|
|
/* CHORUS Brand CSS Variables (8-color semantic system) */
|
|
:root {
|
|
/* Core Brand Colors */
|
|
--color-carbon: #000000;
|
|
--color-mulberry: #3a384c;
|
|
--color-walnut: #605756;
|
|
--color-nickel: #505050;
|
|
--color-sand: #6a5c46;
|
|
--color-coral: #9D8380;
|
|
--color-ocean: #5a6c80;
|
|
--color-eucalyptus:#515d54;
|
|
|
|
/* Semantic Tokens */
|
|
--chorus-primary: #0b0213; /* mulberry */
|
|
--chorus-secondary: #000000; /* carbon */
|
|
--chorus-accent: #403730; /* walnut */
|
|
--chorus-neutral: #c1bfb1; /* nickel */
|
|
--chorus-info: #5a6c80; /* ocean-700 */
|
|
--chorus-success: #2a3330; /* eucalyptus-950 */
|
|
--chorus-warning: #6a5c46; /* sand-900 */
|
|
--chorus-danger: #2e1d1c; /* coral-950 */
|
|
|
|
|
|
|
|
|
|
|
|
/* Theme Surfaces (dark default) */
|
|
--bg-primary: #0b0213; /* carbon-950 */
|
|
--bg-secondary: #1a1426; /* mulberry-950 */
|
|
--bg-tertiary: #2a2639; /* mulberry-900 */
|
|
--bg-accent: #5b3d77; /* mulberry-600 */
|
|
|
|
/* Text */
|
|
--text-primary: #FFFFFF;
|
|
--text-secondary: #f0f4ff;
|
|
--text-tertiary: #dae4fe;
|
|
--text-subtle: #9aa0b8;
|
|
--text-ghost: #7a7e95;
|
|
|
|
/* Borders */
|
|
--border-invisible: #0a0a0a;
|
|
--border-subtle: #1a1a1a;
|
|
--border-defined: #2a2a2a;
|
|
--border-emphasis: #666666;
|
|
}
|
|
|
|
/* Light Theme Variables (apply when html has class 'light') */
|
|
html.light {
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: #f8f8f8;
|
|
--bg-tertiary: #f0f0f0;
|
|
--bg-accent: #cbefff;
|
|
|
|
--text-primary: #000000;
|
|
--text-secondary: #1a1a1a;
|
|
--text-tertiary: #2a2a2a;
|
|
--text-subtle: #666666;
|
|
--text-ghost: #808080;
|
|
|
|
--border-invisible: #f8f8f8;
|
|
--border-subtle: #f0f0f0;
|
|
--border-defined: #e0e0e0;
|
|
--border-emphasis: #c0c0c0;
|
|
}
|
|
|
|
/* Base Styles */
|
|
body {
|
|
font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1.6;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
body { @apply transition-colors duration-200; }
|
|
}
|
|
|
|
@layer components {
|
|
/* Ultra-Minimalist Button System */
|
|
.btn-primary {
|
|
@apply text-white font-semibold py-3 px-6 rounded-md transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed;
|
|
/* Light mode: warm sand gradient */
|
|
background: linear-gradient(135deg, var(--chorus-warning) 0%, var(--chorus-neutral) 100%);
|
|
border: 2px solid var(--chorus-warning);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-transparent text-current font-medium py-3 px-6 rounded-md transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed;
|
|
border: 2px solid var(--border-emphasis);
|
|
}
|
|
|
|
.btn-primary:hover { transform: translateY(-2px); }
|
|
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--text-primary); }
|
|
|
|
/* Dark mode: Mulberry mid-tone for stronger contrast */
|
|
html.dark .btn-primary {
|
|
background: #5b3d77; /* approx mulberry-500 */
|
|
border-color: #5b3d77;
|
|
box-shadow: 0 4px 12px rgba(11, 2, 19, 0.35);
|
|
}
|
|
html.dark .btn-primary:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
/* Teaser-aligned Form Elements */
|
|
.form-input {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
border: 2px solid var(--border-defined);
|
|
padding: 0.875rem 1rem;
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
border-radius: 0.375rem;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
.form-input:focus { outline: none; border-color: var(--chorus-primary); box-shadow: 0 0 0 3px rgba(11,2,19,0.1); background: var(--bg-secondary); }
|
|
.form-input::placeholder { color: var(--text-subtle); }
|
|
|
|
.btn-outline {
|
|
@apply border border-chorus-primary text-chorus-primary hover:bg-chorus-primary hover:text-white font-medium py-3 px-6 rounded-md transition-all duration-200;
|
|
}
|
|
|
|
.btn-text {
|
|
@apply bg-transparent text-chorus-secondary hover:text-white font-medium py-2 px-0 border-none transition-colors duration-200;
|
|
}
|
|
|
|
/* Clean Card System */
|
|
.card {
|
|
@apply bg-chorus-white border border-chorus-border-subtle p-8 rounded-lg transition-colors duration-200;
|
|
}
|
|
|
|
.card-elevated {
|
|
@apply bg-chorus-warm border border-chorus-border-invisible p-8 rounded-lg transition-colors duration-200;
|
|
}
|
|
|
|
/* Form Elements */
|
|
.input-field {
|
|
@apply block w-full border p-3 rounded-sm focus:outline-none transition-colors duration-200;
|
|
background-color: var(--bg-secondary);
|
|
border-color: var(--border-defined);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.input-field:focus {
|
|
border-color: var(--chorus-accent);
|
|
background-color: var(--bg-primary);
|
|
ring: 0;
|
|
}
|
|
|
|
/* Fix form inputs for dark theme */
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
textarea,
|
|
select {
|
|
background-color: var(--bg-secondary) !important;
|
|
border-color: var(--border-defined) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
input[type="checkbox"]:focus,
|
|
input[type="radio"]:focus,
|
|
input[type="text"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="password"]:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--chorus-accent) !important;
|
|
background-color: var(--bg-primary) !important;
|
|
}
|
|
|
|
.label {
|
|
@apply block text-sm font-medium mb-2;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.error-text {
|
|
@apply text-red-400 text-sm mt-1;
|
|
}
|
|
|
|
.success-text {
|
|
@apply text-eucalyptus-600 text-sm mt-1;
|
|
}
|
|
|
|
/* Status System */
|
|
.status-indicator {
|
|
@apply text-xs font-medium;
|
|
}
|
|
|
|
.status-online {
|
|
@apply status-indicator text-chorus-secondary;
|
|
}
|
|
|
|
.status-offline {
|
|
@apply status-indicator text-chorus-text-subtle;
|
|
}
|
|
|
|
.status-pending {
|
|
@apply status-indicator text-chorus-brown;
|
|
}
|
|
|
|
.setup-progress {
|
|
@apply border transition-all duration-200;
|
|
}
|
|
|
|
.agreement {
|
|
background-color: var(--sand-400) !important;
|
|
}
|
|
|
|
html.dark .agreement {
|
|
background-color: var(--mulberry-800) !important;
|
|
}
|
|
|
|
/* Progress Elements */
|
|
.progress-step {
|
|
@apply p-3 rounded-md border transition-all duration-200;
|
|
}
|
|
|
|
.progress-step-current {
|
|
background-color: var(--bg-tertiary) !important;
|
|
border-color: var(--bg-secondary) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.progress-step-completed {
|
|
background-color: var(--bg-primary) !important;
|
|
border-color: var(--bg-secondary) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.progress-step-accessible {
|
|
@apply border-chorus-border-defined hover:border-chorus-border-emphasis text-chorus-text-secondary;
|
|
background-color: var(--bg-secondary);
|
|
border-color: var(--border-defined);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.progress-step-accessible:hover {
|
|
background-color: var(--bg-accent);
|
|
border-color: var(--border-emphasis);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.progress-step-disabled {
|
|
@apply cursor-not-allowed;
|
|
background-color: var(--bg-subtle);
|
|
border-color: var(--border-subtle);
|
|
color: var(--text-subtle);
|
|
}
|
|
|
|
/* Typography Hierarchy */
|
|
.heading-hero {
|
|
@apply text-3xl font-semibold text-chorus-text-primary tracking-tight;
|
|
}
|
|
|
|
.heading-section {
|
|
@apply text-2xl font-semibold text-chorus-text-primary;
|
|
}
|
|
|
|
.heading-subsection {
|
|
@apply text-lg font-medium text-chorus-text-primary;
|
|
}
|
|
|
|
.text-body {
|
|
@apply text-base text-chorus-text-secondary leading-relaxed;
|
|
}
|
|
|
|
.text-small {
|
|
@apply text-sm text-chorus-text-subtle;
|
|
}
|
|
|
|
.text-ghost {
|
|
@apply text-sm text-gray-500 dark:text-gray-500;
|
|
}
|
|
}
|
|
|
|
/* Brand Panel Components */
|
|
@layer components {
|
|
.panel { @apply rounded-lg p-4 border; }
|
|
|
|
/* Info (Ocean) */
|
|
.panel-info { @apply border-ocean-200 bg-ocean-50; }
|
|
.panel-info .panel-title { @apply text-ocean-800; }
|
|
.panel-info .panel-body { @apply text-ocean-700; }
|
|
html.dark .panel-info { @apply border-ocean-700; background-color: rgba(58,70,84,0.20) !important; }
|
|
html.dark .panel-info .panel-title { @apply text-ocean-300; }
|
|
html.dark .panel-info .panel-body { @apply text-ocean-300; }
|
|
|
|
/* Note (Nickel / Neutral) */
|
|
.panel-note { background-color: #f5f4f1; border-color: #e0ddd7; }
|
|
.panel-note .panel-title { @apply text-chorus-text-primary; }
|
|
.panel-note .panel-body { @apply text-chorus-text-secondary; }
|
|
html.dark .panel-note { background-color: rgba(11,2,19,0.20) !important; border-color: var(--border-defined) !important; }
|
|
html.dark .panel-note .panel-title { @apply text-chorus-text-primary; }
|
|
html.dark .panel-note .panel-body { @apply text-chorus-text-secondary; }
|
|
|
|
/* Warning (Sand) */
|
|
.panel-warning { @apply bg-sand-100 border-sand-900; }
|
|
.panel-warning .panel-title { @apply text-sand-900; }
|
|
.panel-warning .panel-body { @apply text-sand-900; }
|
|
html.dark .panel-warning { background-color: rgba(106,92,70,0.20) !important; @apply border-sand-900; }
|
|
/* Fallback to white/neutral for readability in dark */
|
|
html.dark .panel-warning .panel-title { @apply text-white; }
|
|
html.dark .panel-warning .panel-body { color: #F1F0EF !important; }
|
|
|
|
/* Error (Coral) */
|
|
.panel-error { @apply bg-coral-50 border-coral-950; }
|
|
.panel-error .panel-title { @apply text-coral-950; }
|
|
.panel-error .panel-body { @apply text-coral-950; }
|
|
html.dark .panel-error { background-color: rgba(46,29,28,0.20) !important; @apply border-coral-950; }
|
|
html.dark .panel-error .panel-title { @apply text-white; }
|
|
html.dark .panel-error .panel-body { color: #ffd6d6 !important; }
|
|
|
|
/* Success (Eucalyptus) */
|
|
.panel-success { @apply bg-eucalyptus-50 border-eucalyptus-600; }
|
|
.panel-success .panel-title { @apply text-eucalyptus-600; }
|
|
.panel-success .panel-body { @apply text-eucalyptus-600; }
|
|
html.dark .panel-success { background-color: rgba(42,51,48,0.20) !important; @apply border-eucalyptus-400; }
|
|
html.dark .panel-success .panel-title { @apply text-white; }
|
|
html.dark .panel-success .panel-body { color: #bacfbf !important; }
|
|
}
|
|
|
|
/* Teaser-aligned color aliases */
|
|
@layer utilities {
|
|
/* 8 standard color families - key shades */
|
|
/* Ocean */
|
|
/* Ocean scale aliases (selected commonly used steps) */
|
|
.bg-ocean-700 { background-color: #5a6c80 !important; }
|
|
.text-ocean-700 { color: #5a6c80 !important; }
|
|
.border-ocean-700 { border-color: #5a6c80 !important; }
|
|
|
|
.bg-ocean-600 { background-color: #6a7e99 !important; }
|
|
.text-ocean-600 { color: #6a7e99 !important; }
|
|
.border-ocean-600 { border-color: #6a7e99 !important; }
|
|
|
|
.bg-ocean-500 { background-color: #7a90b2 !important; }
|
|
.text-ocean-500 { color: #7a90b2 !important; }
|
|
.border-ocean-500 { border-color: #7a90b2 !important; }
|
|
|
|
.bg-ocean-900 { background-color: #3a4654 !important; }
|
|
.text-ocean-900 { color: #3a4654 !important; }
|
|
.border-ocean-900 { border-color: #3a4654 !important; }
|
|
|
|
.text-ocean-800 { color: #4a5867 !important; }
|
|
.border-ocean-800 { border-color: #4a5867 !important; }
|
|
|
|
.text-ocean-300 { color: #9bb6d6 !important; }
|
|
.border-ocean-300 { border-color: #9bb6d6 !important; }
|
|
|
|
.border-ocean-200 { border-color: #abc9e8 !important; }
|
|
|
|
.bg-ocean-50 { background-color: #cbefff !important; }
|
|
.text-ocean-50 { color: #cbefff !important; }
|
|
.border-ocean-50 { border-color: #cbefff !important; }
|
|
|
|
/* Mulberry */
|
|
.bg-mulberry-950 { background-color: #0b0213 !important; }
|
|
.text-mulberry-950 { color: #0b0213 !important; }
|
|
.border-mulberry-950 { border-color: #0b0213 !important; }
|
|
|
|
/* Carbon */
|
|
.bg-carbon-950 { background-color: #000000 !important; }
|
|
.text-carbon-950 { color: #000000 !important; }
|
|
.border-carbon-950 { border-color: #000000 !important; }
|
|
|
|
/* Walnut */
|
|
.bg-walnut-900 { background-color: #403730 !important; }
|
|
.text-walnut-900 { color: #403730 !important; }
|
|
.border-walnut-900 { border-color: #403730 !important; }
|
|
|
|
/* Nickel */
|
|
.bg-nickel-500 { background-color: #c1bfb1 !important; }
|
|
.text-nickel-500 { color: #c1bfb1 !important; }
|
|
.border-nickel-500 { border-color: #c1bfb1 !important; }
|
|
|
|
/* Coral */
|
|
.bg-coral-950 { background-color: #2e1d1c !important; }
|
|
.bg-coral-50 { background-color: #ffd6d6 !important; }
|
|
.text-coral-950 { color: #2e1d1c !important; }
|
|
.border-coral-950 { border-color: #2e1d1c !important; }
|
|
|
|
/* Sand */
|
|
.bg-sand-900 { background-color: #6a5c46 !important; }
|
|
.bg-sand-100 { background-color: #F1F0EF !important; }
|
|
.text-sand-900 { color: #6a5c46 !important; }
|
|
.border-sand-900 { border-color: #6a5c46 !important; }
|
|
|
|
/* Eucalyptus */
|
|
.bg-eucalyptus-950 { background-color: #2a3330 !important; }
|
|
.bg-eucalyptus-800 { background-color: #3a4843 !important; }
|
|
.bg-eucalyptus-600 { background-color: #5a7060 !important; }
|
|
.bg-eucalyptus-500 { background-color: #6b8570 !important; }
|
|
.bg-eucalyptus-400 { background-color: #7c9a80 !important; }
|
|
.bg-eucalyptus-50 { background-color: #bacfbf !important; }
|
|
.text-eucalyptus-950 { color: #2a3330 !important; }
|
|
.text-eucalyptus-800 { color: #3a4843 !important; }
|
|
.text-eucalyptus-600 { color: #5a7060 !important; }
|
|
.text-eucalyptus-500 { color: #6b8570 !important; }
|
|
.text-eucalyptus-400 { color: #7c9a80 !important; }
|
|
.border-eucalyptus-950 { border-color: #2a3330 !important; }
|
|
.border-eucalyptus-800 { border-color: #3a4843 !important; }
|
|
.border-eucalyptus-600 { border-color: #5a7060 !important; }
|
|
.border-eucalyptus-500 { border-color: #6b8570 !important; }
|
|
.border-eucalyptus-400 { border-color: #7c9a80 !important; }
|
|
|
|
/* Utility text/border fallbacks for theme tokens */
|
|
.text-chorus-primary { color: var(--text-primary) !important; }
|
|
.text-chorus-secondary { color: var(--text-secondary) !important; }
|
|
.text-chorus-text-primary { color: var(--text-primary) !important; }
|
|
.text-chorus-text-secondary { color: var(--text-secondary) !important; }
|
|
.text-chorus-text-tertiary { color: var(--text-tertiary) !important; }
|
|
.text-chorus-text-subtle { color: var(--text-subtle) !important; }
|
|
.text-chorus-text-ghost { color: var(--text-ghost) !important; }
|
|
.bg-chorus-primary { background-color: var(--bg-primary) !important; }
|
|
.bg-chorus-white { background-color: var(--bg-secondary) !important; }
|
|
.bg-chorus-warm { background-color: var(--bg-tertiary) !important; }
|
|
.border-chorus-border-subtle { border-color: var(--border-subtle) !important; }
|
|
.border-chorus-border-defined { border-color: var(--border-defined) !important; }
|
|
.border-chorus-border-invisible { border-color: var(--border-invisible) !important; }
|
|
}
|
|
|
|
/* CHORUS Typography utilities (subset) */
|
|
.text-h1 { font-size: 4.268rem; line-height: 6.96rem; font-weight: 100; letter-spacing: -0.02em; }
|
|
.text-h2 { font-size: 3.052rem; line-height: 4.768rem; font-weight: 700; }
|
|
.text-h3 { font-size: 2.441rem; line-height: 3.052rem; font-weight: 600; }
|
|
.text-h4 { font-size: 1.953rem; line-height: 2.441rem; font-weight: 600; }
|
|
.text-h5 { font-size: 1.563rem; line-height: 1.953rem; font-weight: 500; }
|
|
.text-h6 { font-size: 1.25rem; line-height: 1.563rem; font-weight: 500; }
|
|
|
|
/* Motion */
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes slideUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }
|
|
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
|
|
.animate-slide-up { animation: slideUp 0.8s ease-out; }
|
|
|
|
/* Dark-mode heading contrast: make headings white unless panel overrides apply */
|
|
@layer base {
|
|
html.dark h1:not(.panel-title),
|
|
html.dark h2:not(.panel-title),
|
|
html.dark h3:not(.panel-title),
|
|
html.dark h4:not(.panel-title),
|
|
html.dark h5:not(.panel-title),
|
|
html.dark h6:not(.panel-title) {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
html.dark .text-h1, html.dark .text-h2, html.dark .text-h3,
|
|
html.dark .text-h4, html.dark .text-h5, html.dark .text-h6 { color: #ffffff !important; }
|
|
}
|