/* design-tokens.css - Core design system variables */
/* Font imports */
@font-face {
  font-family: 'Prata Regular';
  src: url('/fonts/prata.woff2') format('woff2'),
       url('/fonts/prata.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Questrial Regular';
  src: url('/fonts/questrial.woff2') format('woff2'),
       url('/fonts/questrial.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-Regular.woff2') format('woff2'),
      url('/fonts/PTSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-Italic.woff2') format('woff2'),
      url('PTSans-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-Bold.woff2') format('woff2'),
      url('/fonts/PTSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-BoldItalic.woff2') format('woff2'),
      url('/fonts/PTSans-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/* ========== BASE DESIGN TOKENS ========== */
:root {
    /* Color System */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* Gray scale */
    --color-gray-50: #f7fafc;
    --color-gray-100: #e2e8f0;
    --color-gray-200: #cbd5e0;
    --color-gray-300: #a0aec0;
    --color-gray-400: #718096;
    --color-gray-500: #4a5568;
    --color-gray-600: #2d3748;
    --color-gray-700: #1a202c;
    --color-gray-800: #171923;
    --color-gray-900: #0d1117;
    
    /* Primary colors */
    --color-primary-50: #EEF2FF;
    --color-primary-100: #E0E7FF;
    --color-primary-200: #C7D2FE;
    --color-primary-300: #A5B4FC;
    --color-primary-400: #818CF8;
    --color-primary-500: #6366F1;
    --color-primary-600: #4F46E5;
    --color-primary-700: #4338CA;
    --color-primary-800: #3730A3;
    --color-primary-900: #312E81;
    
    /* Blue colors */
    --color-blue-50: #ebf4ff;
    --color-blue-500: #3182ce;
    --color-blue-700: #2C5282;
    
    /* Semantic variables - Light theme (default) */
    --bg-color: #D5D6CF;
    --bg-alt-color: #bab8b0;
    --text-color: #373636;
    --text-muted: #655b58;
    --primary-color: #ba8f0e;
    --primary-light: #bab8b0;
    --border-color: #bab8b0;
    --card-bg-color: #bab8b0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-darker: rgba(0, 0, 0, 0.15);
    --logo-bg-color: #8f702d;
    --logo-fg-color: #ffffff;
    --button-text-color: #ffffff;
    --modal-bg: rgba(0, 0, 0, 0.5);
    --modal-content-bg: #bab8b0;
    --dropdown-bg: #bab8b0;
    --featured-tag-bg: #8f702d;
    --featured-tag-color: #b5b5b5;

    --primary-color-rgb: 190, 76, 59;
  
  /* Alert variations */
  --alert-bg-color: rgba(190, 76, 59, 0.1);
  --alert-border-color: var(--primary-color);
  
  /* Form focus state */
  --input-focus-shadow: rgba(190, 76, 59, 0.2);
    
    /* Typography */
    --font-sans: 'PT Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Prata Regular', serif;
    
    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* Layout */
    --container-width: 1200px;
    --container-padding: 1rem;
    --section-spacing: 4rem;
    
    /* Animation */
    --transition-speed: 0.3s;
  }
  
  /* ========== DARK THEME ========== */
  [data-theme="dark"] {
    --bg-color: #474641;
    --bg-alt-color: #64635f;
    --text-color: #f7fafc;
    --text-muted: #e0cccb;
    --primary-color: #ba8f0e;
    --primary-light: #403838;
    --border-color: #403838;
    --card-bg-color: #403838;
    --featured-tag-bg: #74372a;
    --featured-tag-color: #e38e79;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-darker: rgba(0, 0, 0, 0.5);
    --logo-bg-color: #be4c3b;
    --logo-fg-color: #ffffff;
    --button-text-color: #ffffff;
    --modal-bg: #2C2525;
    --modal-content-bg: #403838;
    --dropdown-bg: #403838;
    --alert-bg-color: rgba(190, 76, 59, 0.15);
  --input-focus-shadow: rgba(190, 76, 59, 0.3);
  }

  .theme-aware-image {
    position: relative;
  }
  
  .light-image, .dark-image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* Show light image in light mode, hide dark image */
  .light-image {
    display: block;
  }
  
  .dark-image {
    display: none;
  }
  
  /* Show dark image in dark mode, hide light image */
  [data-theme="dark"] .light-image {
    display: none;
  }
  
  [data-theme="dark"] .dark-image {
    display: block;
  }