/* GUNR Website — variables.css */

:root {
  /* Colors */
  --color-primary: #FF5722;
  --color-primary-accessible: #E64A19; /* WCAG AA 4.5:1 on --color-bg for small text */
  --color-primary-hover: #E64A19;
  --color-primary-rgb: 255, 87, 34;
  --color-btn-primary-bg: #E64A19;     /* WCAG AA 4.5:1 for white text on button bg */
  --color-btn-primary-hover: #D84315;  /* Darker hover for primary buttons */
  --color-primary-on-dark: #F4845F;   /* WCAG AA ~5.0:1 on --color-bg-dark (#1F2220) for small text */
  --color-bg: #2B2D2B;
  --color-bg-dark: #1F2220;
  --color-bg-light: #404240;
  --color-text: #FFFFFF;
  --color-text-muted: #BCBCBC;
  --color-success: #4ADE80;
  --color-error: #EF4444;
  --color-error-rgb: 239, 68, 68;
  --color-stars: #FBBF24;

  /* Typography */
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;
  --container-max: 1200px;
  --container-padding: 24px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2);

  /* Section spacing */
  --space-section: 72px;
  --space-section-lg: 96px;

  /* Dividers (lower-opacity borders for secondary elements) */
  --color-divider: rgba(64, 66, 64, 0.5);

  /* Header */
  --header-height: 72px;

  /* Breakpoints (reference only — CSS custom properties cannot be used in @media queries)
     sm: 640px, md: 768px, lg: 1024px (primary), xl: 1280px */
}

/* Per-app theme overrides */
.theme-gunr {
  --color-primary: #FF5722;
  --color-primary-accessible: #E64A19;
  --color-primary-hover: #E64A19;
  --color-primary-rgb: 255, 87, 34;
  --color-btn-primary-bg: #E64A19;
  --color-btn-primary-hover: #D84315;
  --color-primary-on-dark: #F4845F;
}

.theme-dope {
  --color-primary: #03A9F4;
  --color-primary-accessible: #03A9F4; /* Already ~5.3:1 on dark bg */
  --color-primary-hover: #0288D1;
  --color-primary-rgb: 3, 169, 244;
  --color-btn-primary-bg: #0288D1;     /* WCAG AA 4.5:1 for white text */
  --color-btn-primary-hover: #01579B;
  --color-primary-on-dark: #4FC3F7;   /* ~6.5:1 on --color-bg-dark */
}

.theme-cor {
  --color-primary: #40C4FF;
  --color-primary-accessible: #40C4FF; /* Already ~8.0:1 on dark bg */
  --color-primary-hover: #0288D1;
  --color-primary-rgb: 64, 196, 255;
  --color-btn-primary-bg: #0288D1;     /* WCAG AA 4.5:1 for white text */
  --color-btn-primary-hover: #01579B;
  --color-primary-on-dark: #80D8FF;   /* ~9.0:1 on --color-bg-dark */
}


/* Small phones */
@media (max-width: 374px) {
  :root {
    --container-padding: 16px;
  }
}