/*
 * CSS Variables - design tokens preserved from the legacy theme
 */

:root {
  /* Colors preserved from the legacy palette */
  --dark-bg: #0F1620;
  --accent: #8EADCF;
  --text: #F5F5F5;
  --text-secondary: #B0B0B0;
  --card-bg: rgba(255, 255, 255, 0.03);

  /* Effects */
  --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Border colors */
  --border-light: rgba(255, 255, 255, 0.05);
  --border-accent: rgba(142, 173, 207, 0.2);

  /* Shadows */
  --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.3);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* Font settings */
  --font-family: 'Open Sans', sans-serif;
  --letter-spacing: 0.015em;

  /* Typography System - Matched to Hugo Site
   * Base: 1.2rem with line-height 1.6 for optimal readability
   * Heading sizes match Hugo's actual implementation
   */

  /* Base Typography */
  --font-size-base: 1.2rem;
  --font-size-small: 0.9rem;
  --line-height-base: 1.6;
  --line-height-heading: 1.3;
  --line-height-small: 1.5;

  /* Heading Scale - Desktop/Default (Shifted down one level for proper sizing) */
  --font-size-h1: 3.791rem;   /* ~61px - Was H2, now H1 */
  --font-size-h2: 2.844rem;   /* ~46px - Was H3, now H2 */
  --font-size-h3: 2.133rem;   /* ~34px - Was H4, now H3 */
  --font-size-h4: 1.6rem;     /* ~26px - Was H5, now H4 */
  --font-size-h5: 1.2rem;     /* ~19px - Was H6, now H5 */
  --font-size-h6: 0.9rem;     /* ~14px - New H6 */

  /* Tablet Scale (0.9x) - 769px to 1024px */
  --font-size-base-tablet: 1.08rem;
  --font-size-small-tablet: 0.81rem;
  --font-size-h1-tablet: 3.412rem;   /* 3.791 × 0.9 */
  --font-size-h2-tablet: 2.560rem;   /* 2.844 × 0.9 */
  --font-size-h3-tablet: 1.920rem;   /* 2.133 × 0.9 */
  --font-size-h4-tablet: 1.44rem;    /* 1.6 × 0.9 */
  --font-size-h5-tablet: 1.08rem;    /* 1.2 × 0.9 */
  --font-size-h6-tablet: 0.81rem;    /* 0.9 × 0.9 */

  /* Mobile Scale (0.8x) - ≤768px */
  --font-size-base-mobile: 0.96rem;
  --font-size-small-mobile: 0.72rem;
  --font-size-h1-mobile: 3.033rem;   /* 3.791 × 0.8 */
  --font-size-h2-mobile: 2.275rem;   /* 2.844 × 0.8 */
  --font-size-h3-mobile: 1.706rem;   /* 2.133 × 0.8 */
  --font-size-h4-mobile: 1.28rem;    /* 1.6 × 0.8 */
  --font-size-h5-mobile: 0.96rem;    /* 1.2 × 0.8 */
  --font-size-h6-mobile: 0.72rem;    /* 0.9 × 0.8 */

  /* Breakpoints */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}