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



/* 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;
}