/*
 * Steve McKnight Design System
 * Color Constants & Design Tokens
 * 
 * Aesthetic: Dark editorial with warm gold accents
 * Inspired by premium business publications
 */

:root {
  /* === PRIMARY PALETTE === */
  --color-bg-primary: #0a0a0b;
  --color-bg-secondary: #111113;
  --color-bg-tertiary: #18181b;
  --color-bg-elevated: #1f1f23;
  
  /* === ACCENT COLORS === */
  --color-accent-gold: #d4a853;
  --color-accent-gold-light: #e8c67a;
  --color-accent-gold-muted: rgba(212, 168, 83, 0.15);
  
  /* === TEXT COLORS === */
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
  --color-text-inverse: #0a0a0b;
  
  /* === SEMANTIC COLORS === */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  --color-overlay: rgba(10, 10, 11, 0.85);
  
  /* === GRADIENTS === */
  --gradient-hero: linear-gradient(
    135deg,
    var(--color-bg-primary) 0%,
    #0f0f12 50%,
    #12110f 100%
  );
  --gradient-card: linear-gradient(
    180deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-secondary) 100%
  );
  --color-bg-card: var(--color-bg-secondary);
  
  /* === TYPOGRAPHY === */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Font Sizes - Fluid Typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-4xl: clamp(2.5rem, 2rem + 3vw, 4rem);
  --text-5xl: clamp(3rem, 2.25rem + 4vw, 4.5rem);
  
  /* === SPACING === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.875rem;
  --space-lg: 1.25rem;
  --space-xl: 1.625rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3.25rem;
  --space-4xl: 4.75rem;
  --space-5xl: 6.5rem;
  
  /* === LAYOUT === */
  --max-width: 1400px;
  --max-width-content: 800px;
  --container-padding: clamp(2rem, 6vw, 4rem);
  
  /* === EFFECTS === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 4px 20px rgba(212, 168, 83, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  
  /* === TRANSITIONS === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 150ms var(--ease-out-quart);
  --transition-base: 300ms var(--ease-out-expo);
  --transition-slow: 500ms var(--ease-out-expo);
  
  /* === BORDERS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;
}

/* === LIGHT THEME OVERRIDES === */
[data-theme="light"] {
  /* Backgrounds */
  --color-bg-primary: #fafafa;
  --color-bg-secondary: #f4f4f5;
  --color-bg-tertiary: #e4e4e7;
  --color-bg-elevated: #ffffff;
  
  /* Accent - darker gold for light backgrounds */
  --color-accent-gold: #996a1a;
  --color-accent-gold-light: #b8860b;
  --color-accent-gold-muted: rgba(153, 106, 26, 0.12);
  
  /* Text */
  --color-text-primary: #18181b;
  --color-text-secondary: #52525b;
  --color-text-muted: #71717a;
  --color-text-inverse: #fafafa;
  
  /* Borders */
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-hover: rgba(0, 0, 0, 0.12);
  --color-overlay: rgba(250, 250, 250, 0.85);
  
  /* Gradients */
  --gradient-hero: linear-gradient(
    135deg,
    var(--color-bg-primary) 0%,
    #f5f5f6 50%,
    #f6f5f4 100%
  );
  --gradient-card: linear-gradient(
    180deg,
    var(--color-bg-elevated) 0%,
    var(--color-bg-primary) 100%
  );
  --color-bg-card: var(--color-bg-elevated);
  
  /* Shadows - very subtle for light mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-gold: 0 4px 20px rgba(153, 106, 26, 0.1);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* === MOBILE OVERRIDES (typography & spacing only) === */
@media (max-width: 768px) {
  :root {
    /* Smaller font sizes on mobile – especially largest display text */
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1rem;
    --text-xl: 1.0625rem;
    --text-2xl: 1.25rem;
    --text-3xl: 1.5rem;
    --text-4xl: 1.875rem;
    --text-5xl: 2.25rem;
    /* Tighter spacing between blocks and elements */
    --space-xs: 0.25rem;
    --space-sm: 0.375rem;
    --space-md: 0.625rem;
    --space-lg: 0.875rem;
    --space-xl: 1rem;
    --space-2xl: 1.5rem;
    --space-3xl: 2rem;
    --space-4xl: 2.5rem;
    --space-5xl: 3rem;
    --container-padding: 1.25rem;
  }
}