chorus-services/modules/teaser/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* CHORUS Proportional Typography System - 16px Base */
html {
  font-size: 16px;
}

/* CHORUS Brand CSS Variables */
:root {
  /* 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;       /* mulberry-950 */
  --chorus-secondary: #000000;     /* carbon-950 */
  --chorus-accent: #403730;        /* walnut-900 */
  --chorus-neutral: #c1bfb1;       /* nickel-400 */
  --chorus-info: #3a4654;          /* ocean-900 */
  --chorus-success: #3a4540;       /* eucalyptus-900 */
  --chorus-warning: #99886E;       /* sand-900 */
  --chorus-danger: #7B5D5A;        /* coral-900 */
  
  /* Dark Theme Variables (Primary for teaser) */
  --bg-primary: #000000;           /* carbon-950 */
  --bg-secondary: #0b0213;         /* mulberry-950 */
  --bg-tertiary: #1a1426;          /* mulberry-900 */
  --bg-accent: #2a2639;            /* mulberry-800 */
  
  --text-primary: #FFFFFF;         /* white */
  --text-secondary: #f0f4ff;       /* mulberry-50 */
  --text-tertiary: #dae4fe;        /* mulberry-100 */
  --text-subtle: #9aa0b8;          /* mulberry-300 */
  --text-ghost: #7a7e95;           /* mulberry-400 */
  
  --border-invisible: #0a0a0a;     /* carbon-900 */
  --border-subtle: #1a1a1a;        /* carbon-800 */
  --border-defined: #2a2a2a;       /* carbon-700 */
  --border-emphasis: #666666;      /* carbon-600 */
  
  --accent-primary: #0b0213;       /* Mulberry */
  --accent-secondary: #403730;     /* Walnut */
  --accent-system: #7a90b2;        /* Ocean */
  
  /* Spacing System */
  --space-micro: 0.25rem;          /* 4px */
  --space-xs: 0.5rem;              /* 8px */
  --space-sm: 0.75rem;             /* 12px */
  --space-base: 1rem;              /* 16px */
  --space-md: 1.5rem;              /* 24px */
  --space-lg: 2rem;                /* 32px */
  --space-xl: 3rem;                /* 48px */
  --space-xxl: 4rem;               /* 64px */
}

/* Light Theme Variables */
:root:not(.dark) {
  /* Light Theme Colors */
  --bg-primary: #FFFFFF;           /* white */
  --bg-secondary: #f8f8f8;         /* carbon-50 */
  --bg-tertiary: #f0f0f0;          /* carbon-100 */
  --bg-accent: #e0e0e0;            /* carbon-200 */
  
  --text-primary: #000000;         /* carbon-950 */
  --text-secondary: #1a1a1a;       /* carbon-800 */
  --text-tertiary: #2a2a2a;        /* carbon-700 */
  --text-subtle: #666666;          /* carbon-600 */
  --text-ghost: #808080;           /* carbon-500 */
  
  --border-invisible: #f8f8f8;     /* carbon-50 */
  --border-subtle: #f0f0f0;        /* carbon-100 */
  --border-defined: #e0e0e0;       /* carbon-200 */
  --border-emphasis: #c0c0c0;      /* carbon-300 */
  
  --accent-primary: #0b0213;       /* Mulberry */
  --accent-secondary: #403730;     /* Walnut */
  --accent-system: #7a90b2;        /* Ocean */
}

/* CHORUS Typography System */
@font-face {
  font-family: 'Inter Tight';
  src: url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700;800;900&display=swap');
}

@font-face {
  font-family: 'Exo';
  src: url('https://fonts.googleapis.com/css2?family=Exo:wght@100;200;300;400;500;600;700;800;900&display=swap');
}

@font-face {
  font-family: 'Inconsolata';
  src: url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap');
}


/* Base Styles */
body {
  font-family: 'Inter Tight', 'Inter', system-ui, 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;
}
.text-align-left {
  text-align: left;
  line-height: 2.35rem;
}


/* CHORUS Button System */
.btn-primary {
  background: linear-gradient(135deg, var(--sand-400, #AFA28E) 0%, var(--sand-300, #DBD6CF) 100%);
  color: var(--text-primary);
  border: 2px solid var(--sand-400, #AFA28E);
  padding: 0.75rem 1.5rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 300ms ease-out;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(175, 162, 142, 0.3);
}

.dark .btn-primary {
  background: linear-gradient(135deg, var(--chorus-primary) 0%, var(--chorus-accent) 100%);
  border: 2px solid var(--chorus-primary);
  box-shadow: 0 4px 12px rgba(11, 2, 19, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(175, 162, 142, 0.5);
  background: linear-gradient(135deg, var(--sand-300, #DBD6CF) 0%, var(--sand-400, #AFA28E) 100%);
}

.dark .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(11, 2, 19, 0.4);
  background: linear-gradient(135deg, var(--chorus-accent) 0%, var(--chorus-primary) 100%);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--border-emphasis);
  padding: 0.75rem 1.5rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 300ms ease-out;
  transform: translateY(0);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

/* CHORUS Form System */
.form-input {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 2px solid var(--border-defined);
  padding: 0.875rem 1rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
  box-sizing: border-box;
  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);
  font-weight: 400;
}

/* CHORUS Typography Classes */
.text-h1 {
  font-size: 4.768rem;
  line-height: 6.96rem;
  font-weight: 100;
  font-family: 'Exo', 'Inter Tight', sans-serif;
  letter-spacing: -0.02em;
}

.text-h2 {
  font-size: 3.052rem;
  line-height: 4.768rem;
  font-weight: 700;
  font-family: 'Inter Tight', sans-serif;
  letter-spacing: -0.01em;
}

.text-h3 {
  font-size: 2.441rem;
  line-height: 3.052rem;
  font-weight: 600;
  font-family: 'Inter Tight', sans-serif;
}

.text-h4 {
  font-size: 1.953rem;
  line-height: 2.441rem;
  font-weight: 600;
  font-family: 'Inter Tight', sans-serif;
}

.text-h5 {
  font-size: 1.563rem;
  line-height: 1.953rem;
  font-weight: 500;
  font-family: 'Inter Tight', sans-serif;
}

.text-h6 {
  font-size: 1.250rem;
  line-height: 1.563rem;
  font-weight: 500;
  font-family: 'Inter Tight', sans-serif;
}

.text-h7 {
  font-size: 1.000rem;
  line-height: 1.25rem;
  font-weight: 400;
  font-family: 'Inter Tight', sans-serif;
}

.text-display-lg {
  font-size: 5.96rem;
  line-height: 1.0;
  font-weight: 800;
  font-family: 'Exo', 'Inter Tight', sans-serif;
  letter-spacing: -0.03em;
}

.text-logo {
  font-family: 'Exo', 'Inter Tight', sans-serif;
  font-weight: 100;
  letter-spacing: 0.2em;
}

/* CHORUS Animation System */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* CHORUS Motion System */
* {
  transition: opacity 200ms ease-out,
              color 200ms ease-out,
              background-color 200ms ease-out,
              border-color 200ms ease-out;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}