/* CSS Design Tokens for Appalachian Runner */
/* Based on specifications from docs/DESIGN_TOKENS.md and docs/STYLE_GUIDE.md */

/* Google Fonts Import - Appalachian Typography */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Spacing Units (from docs/DESIGN_TOKENS.md) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;

  /* Appalachian Brand Color Palette */
  /* Primary Brand Colors */
  --color-deep-pine: #0B2B24;
  --color-ridge-blue: #1A3A4A;
  --color-sunrise-gold: #F4C26A;
  --color-moss-green: #4A6B57;
  --color-warm-clay: #B57A60;

  /* Surface Colors for Glassmorphism */
  --color-surface-card: rgba(11, 43, 36, 0.85);
  --color-surface-nav: rgba(11, 43, 36, 0.8);
  --color-surface-hero: rgba(7, 25, 22, 0.65);
  
  /* Border Colors */
  --color-border-card: rgba(244, 194, 106, 0.35);
  --color-border-subtle: rgba(244, 194, 106, 0.15);
  
  /* Text Colors */
  --color-text-primary: #F8F8F8;
  --color-text-muted: #CDD5CF;
  --color-text-on-accent: #050708;
  
  /* Background Colors */
  --color-page-bg: #020908;
  
  /* Overlay Gradients for Photography */
  --gradient-hero-overlay: linear-gradient(135deg, rgba(2, 9, 8, 0.85), rgba(26, 58, 74, 0.75));
  --gradient-card-overlay: linear-gradient(180deg, rgba(11, 43, 36, 0.8), rgba(26, 58, 74, 0.9));
  
  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-hover: rgba(0, 0, 0, 0.4);

  /* Typography (Appalachian Brand Typography) */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hero: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Typography Scale (rem-based) */
  --font-size-h1: 2.5rem;     /* 40px - Primary hero headings */
  --font-size-h2: 2rem;       /* 32px - Section headers */
  --font-size-h3: 1.5rem;     /* 24px - Subsection headers */
  --font-size-h4: 1.25rem;    /* 20px - Card titles */
  --font-size-body: 1rem;     /* 16px - Body text */
  --font-size-small: 0.875rem; /* 14px - Meta data */

  /* Font Weights */
  --font-weight-heading: 600;
  --font-weight-heading-bold: 700;
  --font-weight-body: 400;
  --font-weight-body-medium: 500;
  --font-weight-emphasis: 600;

  /* Line Heights */
  --line-height-heading: 1.2;
  --line-height-body: 1.6;

  /* Text Shadows for Photography Backgrounds */
  --text-shadow-hero: 0 2px 12px rgba(0, 0, 0, 0.8);
  --text-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.5);

  /* Border Radius (Rugged Minimalism) */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 50px;

  /* Shadows (Enhanced for Glassmorphism) */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.3);

  /* Layout Specifications */
  --hero-card-max-width: 600px;
  --content-max-width: 1200px;
  --nav-height: 64px;

  /* Card Specifications */
  --card-border: 1px solid var(--color-border-card);
  --card-aspect-ratio: 4 / 3;
  --card-padding: var(--space-md);

  /* Grid Layout */
  --grid-desktop: repeat(3, 1fr);
  --grid-tablet: repeat(2, 1fr);
  --grid-mobile: repeat(1, 1fr);
  --grid-gap: var(--space-md);

  /* Glassmorphism Effects */
  --backdrop-blur: blur(20px);
  --backdrop-blur-light: blur(10px);

  /* Animation & Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-medium: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;

  /* Button Specifications */
  --button-padding: 0.75rem 1.5rem;
  --button-border-radius: var(--radius-pill);
  --button-font-weight: var(--font-weight-emphasis);
}