chorus-ping-blog/app/globals.css

@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;
}


/* CHORUS Blog Typography */
.prose {
  @apply max-w-none text-carbon-950 dark:text-carbon-100;
}

.prose h1 {
  @apply text-h2 font-sans font-thin text-carbon-950 dark:text-mulberry-100 mb-8;
}

.prose h2 {
  @apply text-h3 font-logo text-carbon-950 dark:text-mulberry-200 mb-6 mt-12;
}

.prose h3 {
  @apply text-h4 font-sans text-carbon-950 dark:text-mulberry-300 mb-4 mt-8;
}

.prose h4 {
  @apply text-h5 font-sans text-carbon-800 dark:text-mulberry-400 mb-3 mt-6;
}

.prose h5 {
  @apply text-h6 font-sans text-carbon-700 dark:text-mulberry-500 mb-3 mt-6;
}

.prose h6 {
  @apply text-h7 font-sans text-carbon-600 dark:text-mulberry-600 mb-2 mt-4;
}

.prose p {
  @apply text-base leading-relaxed mb-6 text-carbon-800 dark:text-carbon-200;
}

.prose a {
  @apply text-ocean-600 dark:text-ocean-400 hover:text-ocean-800 dark:hover:text-ocean-300 transition-colors underline decoration-ocean-500/30 hover:decoration-ocean-600/50 dark:hover:decoration-ocean-400/50;
}

.prose strong {
  @apply text-carbon-950 dark:text-carbon-100 font-semibold;
}

.prose code {
  @apply bg-carbon-200 dark:bg-carbon-800 text-eucalyptus-700 dark:text-eucalyptus-400 px-2 py-1 rounded-sm font-mono text-sm;
}

.prose pre {
  @apply bg-carbon-100 dark:bg-carbon-900 border border-carbon-300 dark:border-carbon-700 rounded-lg overflow-x-auto p-4 mb-6;
}

.prose pre code {
  @apply bg-transparent text-carbon-950 dark:text-carbon-200 p-0;
}

.prose blockquote {
  @apply border-l-4 border-carbon-400 dark:border-mulberry-600 pl-6 italic text-carbon-600 dark:text-carbon-300 my-6;
}

.prose ul {
  @apply list-disc pl-6 mb-6 space-y-2;
}

.prose ol {
  @apply list-decimal pl-6 mb-6 space-y-2;
}

.prose li {
  @apply text-carbon-800 dark:text-carbon-200;
}

/* Blog-specific utilities */
.blog-container {
  @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
}

.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;
}