/* Reddit Community Mentions — Foundations */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400;1,500&family=Syne:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  
  --bg-primary:        #0A0E1A; 
  --bg-secondary:      #0F1523; 
  --bg-card:           #111827; 
  --bg-card-hover:     #141D2E;
  --bg-cta-section:    #0A0A0A; 

  
  --text-primary:      #F5F0E8; 
  --text-secondary:    #9CA3AF;
  --text-muted:        #4B5563;
  --text-inverse:      #0A0E1A; 

  
  --accent:            #FF4500; 
  --accent-hover:      #E03D00;
  --accent-press:      #CC3300;
  --accent-subtle:     #FF450020; 
  --accent-ghost:      #FF450008; 

  
  --accent-watermark:  #FF45000D; 
  --accent-quote-mark: #FF450033; 
  --accent-stat-bg:    #FF450008;

  
  --border-subtle:     #1F2937;
  --border-accent:     #FF450066; 
  --shadow-card:       #00000066;

  
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-label:   'Syne', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  
  
  --display-xl-size: 96px;
  --display-xl-weight: 300;
  --display-xl-leading: 1.0;
  --display-xl-tracking: -0.02em;

  --display-lg-size: 72px;
  --display-lg-weight: 300;
  --display-lg-leading: 1.05;
  --display-lg-tracking: -0.015em;

  
  --h2-size: 48px;
  --h2-weight: 400;
  --h2-leading: 1.15;
  --h2-tracking: -0.01em;

  --h3-size: 32px;
  --h3-weight: 400;
  --h3-leading: 1.25;

  --h4-size: 24px;
  --h4-weight: 400;
  --h4-leading: 1.3;

  
  --eyebrow-size: 11px;
  --eyebrow-weight: 700;
  --eyebrow-tracking: 0.15em;

  
  --label-ui-size: 14px;
  --label-ui-weight: 600;
  --label-ui-tracking: 0.03em;

  --label-sm-size: 12px;
  --label-sm-weight: 500;
  --label-sm-tracking: 0.08em;

  
  --body-lg-size: 18px;
  --body-md-size: 16px;
  --body-sm-size: 14px;
  --body-leading: 1.75;

  
  --quote-size: 20px;
  --quote-leading: 1.65;

  
  --stat-size: 72px;
  --stat-weight: 300;
  --stat-leading: 1;
  --stat-tracking: -0.02em;

  
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 80px;
  --space-section: 120px;
  --space-section-sm: 80px;
  --space-section-mobile: 60px;

  
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 100px;

  
  --container-max: 1280px;
  --reading-max: 720px;

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-mid:  200ms;
  --dur-slow: 500ms;
}

html, body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-xl,
h1.display-xl {
  font-family: var(--font-display);
  font-size: var(--display-xl-size);
  font-weight: var(--display-xl-weight);
  line-height: var(--display-xl-leading);
  letter-spacing: var(--display-xl-tracking);
  color: var(--text-primary);
  margin: 0;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--display-lg-size);
  font-weight: var(--display-lg-weight);
  line-height: var(--display-lg-leading);
  letter-spacing: var(--display-lg-tracking);
  color: var(--text-primary);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  color: var(--text-primary);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--text-primary);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-leading);
  color: var(--text-primary);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: 1;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px 0;
  display: block;
}

.label-ui {
  font-family: var(--font-label);
  font-size: var(--label-ui-size);
  font-weight: var(--label-ui-weight);
  line-height: 1;
  letter-spacing: var(--label-ui-tracking);
}

.label-sm {
  font-family: var(--font-label);
  font-size: var(--label-sm-size);
  font-weight: var(--label-sm-weight);
  line-height: 1;
  letter-spacing: var(--label-sm-tracking);
}

p, .body-md {
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  font-weight: 400;
  line-height: var(--body-leading);
  color: var(--text-secondary);
  margin: 0;
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--body-lg-size);
  font-weight: 400;
  line-height: var(--body-leading);
  color: var(--text-secondary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--body-sm-size);
  line-height: 1.65;
  color: var(--text-secondary);
}

.quote {
  font-family: var(--font-display);
  font-size: var(--quote-size);
  font-weight: 400;
  font-style: italic;
  line-height: var(--quote-leading);
  color: var(--text-primary);
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--stat-size);
  font-weight: var(--stat-weight);
  line-height: var(--stat-leading);
  letter-spacing: var(--stat-tracking);
  color: var(--text-primary);
}