/* ============================================================
   E-RIDE ALGARVE — Design System 2026
   CSS Custom Properties: Colors, Typography, Spacing, Radii, Shadows
   Philosophy: Silent Voltage — dark, cinematic, restrained power
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

:root {

  /* ═══════════════════════════════════════════
     CORE PALETTE — 5 brand colors + darks
     ═══════════════════════════════════════════ */

  --battery-black:   #080808;   /* dominant background — hero, header, footer */
  --voltage-dark:    #0F0F0F;   /* near-black surface variant */
  --carbon:          #1A1A1A;   /* card backgrounds, elevated surfaces */
  --graphite:        #2A2A2A;   /* subtle borders, dividers, secondary surfaces */

  --electric-amber:  #F2BC0E;   /* primary accent — CTA, prices, hover. MAX 1/section */
  --terra:           #B24E1E;   /* secondary accent — advanced badges, alt hover */
  --limestone:       #ECE5D8;   /* main text over dark — headings + body */
  --atlantic:        #10223A;   /* alternate section BG, overlays, contrast panels */

  /* ═══════════════════════════════════════════
     OPACITY VARIANTS
     ═══════════════════════════════════════════ */

  --amber-soft:        rgba(242, 188, 14, 0.08);   /* card backgrounds, subtle tint */
  --amber-muted:       rgba(242, 188, 14, 0.15);   /* feature icon backgrounds, tags */
  --amber-hover:       rgba(242, 188, 14, 0.25);   /* hover state tint */
  --terra-muted:       rgba(178, 78,  30, 0.20);   /* alert backgrounds, advanced badges */
  --limestone-ghost:   rgba(236, 229, 216, 0.08);  /* ghost buttons, subtle hover fill */
  --limestone-muted:   rgba(236, 229, 216, 0.60);  /* body text, secondary copy */
  --limestone-faint:   rgba(236, 229, 216, 0.35);  /* placeholder text, disabled */
  --overlay-dark:      rgba(8,   8,   8,  0.60);   /* photo overlay (min 55–70%) */
  --overlay-section:   rgba(8,   8,   8,  0.40);   /* lighter overlay for section images */

  /* ═══════════════════════════════════════════
     SEMANTIC COLOR ASSIGNMENTS
     ═══════════════════════════════════════════ */

  --color-bg-primary:      var(--battery-black);
  --color-bg-secondary:    var(--carbon);
  --color-bg-tertiary:     var(--voltage-dark);
  --color-bg-alt:          var(--atlantic);
  --color-bg-card:         var(--carbon);
  --color-bg-overlay:      var(--overlay-dark);

  --color-text-primary:    var(--limestone);
  --color-text-secondary:  var(--limestone-muted);
  --color-text-faint:      var(--limestone-faint);
  --color-text-accent:     var(--electric-amber);
  --color-text-on-amber:   var(--battery-black);

  --color-border:          var(--graphite);
  --color-border-amber:    rgba(242, 188, 14, 0.30);
  --color-border-subtle:   rgba(236, 229, 216, 0.08);

  --color-cta-primary-bg:     var(--electric-amber);
  --color-cta-primary-text:   var(--battery-black);
  --color-cta-secondary-bg:   transparent;
  --color-cta-secondary-text: var(--limestone);
  --color-cta-secondary-border: var(--limestone-ghost);

  --color-badge-beginner:      rgba(242, 188, 14, 0.15);
  --color-badge-beginner-text: var(--electric-amber);
  --color-badge-intermediate:  rgba(236, 229, 216, 0.10);
  --color-badge-intermediate-text: var(--limestone);
  --color-badge-advanced:      rgba(178, 78, 30, 0.20);
  --color-badge-advanced-text: var(--terra);
  --color-badge-soon:          rgba(16, 34, 58, 0.60);
  --color-badge-soon-text:     var(--limestone-muted);

  /* ═══════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════ */

  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Scale — Display (Bebas Neue, always uppercase) */
  --text-hero:      clamp(3rem,   8vw, 5.5rem);   /* H1 hero */
  --text-section:   clamp(2rem,   4vw,   3rem);   /* H2 section title */
  --text-card-h:    clamp(1.4rem, 2vw,  1.75rem); /* card title */
  --text-price:     clamp(1.5rem, 3vw,   2.5rem); /* price display */
  --lh-display:     0.95;
  --lh-section:     1.05;
  --ls-display:     0.02em;

  /* Scale — Labels (Inter 600, uppercase) */
  --text-label-lg:  13px;   /* section eyebrow labels */
  --text-label-sm:  11px;   /* badges, tags */
  --ls-label:       0.35em;
  --fw-label:       600;

  /* Scale — Body (Inter 400) */
  --text-body-lg:   16px;
  --text-body-md:   14px;
  --text-body-sm:   13px;
  --lh-body:        1.7;

  /* Scale — UI (Inter various) */
  --text-nav:       14px;   /* navbar links */
  --text-btn:       13px;   /* button text */
  --text-caption:   12px;   /* captions, legal */

  /* ═══════════════════════════════════════════
     SPACING SYSTEM
     ═══════════════════════════════════════════ */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* ═══════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════ */

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;    /* cards */
  --radius-xl:   24px;
  --radius-full: 9999px;  /* pill — all buttons */

  /* ═══════════════════════════════════════════
     SHADOWS & GLOW
     ═══════════════════════════════════════════ */

  --shadow-amber:  0 4px 24px rgba(242, 188, 14, 0.25);
  --shadow-terra:  0 4px 24px rgba(178, 78,  30, 0.25);
  --shadow-card:   0 2px 12px rgba(0, 0, 0, 0.40);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.60), var(--shadow-amber);
  --glow-amber:    0 0 40px rgba(242, 188, 14, 0.15);

  /* ═══════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════ */

  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.35s ease;  /* max allowed */

  /* ═══════════════════════════════════════════
     NAVBAR
     ═══════════════════════════════════════════ */

  --navbar-height:     64px;
  --navbar-blur-bg:    rgba(8, 8, 8, 0.85);
  --navbar-blur:       blur(12px);

  /* ═══════════════════════════════════════════
     Z-INDEX STACK
     ═══════════════════════════════════════════ */

  --z-base:    1;
  --z-card:    10;
  --z-overlay: 20;
  --z-navbar:  100;
  --z-modal:   200;
}

/* ═══════════════════════════════════════════
   BASE RESET / GLOBAL STYLES
   ═══════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--battery-black);
  color: var(--limestone);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════ */

.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--limestone);
}

.display-section {
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--limestone);
}

.label-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--electric-amber);
}

.body-text {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--limestone-muted);
}

/* ═══════════════════════════════════════════
   BUTTON BASE STYLES
   ═══════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px var(--space-xl);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-btn);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-primary {
  background-color: var(--electric-amber);
  color: var(--battery-black);
}

.btn-primary:hover {
  box-shadow: var(--shadow-amber);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--limestone);
  border: 1px solid var(--limestone-ghost);
}

.btn-secondary:hover {
  background-color: var(--limestone-ghost);
}

.btn-terra {
  background-color: var(--terra);
  color: var(--limestone);
}

.btn-terra:hover {
  box-shadow: var(--shadow-terra);
  filter: brightness(1.08);
}

/* ═══════════════════════════════════════════
   CARD BASE STYLES
   ═══════════════════════════════════════════ */

.card {
  background-color: var(--carbon);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* ═══════════════════════════════════════════
   BADGE STYLES
   ═══════════════════════════════════════════ */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-beginner    { background: var(--color-badge-beginner);    color: var(--color-badge-beginner-text); }
.badge-intermediate{ background: var(--color-badge-intermediate); color: var(--color-badge-intermediate-text); }
.badge-advanced    { background: var(--color-badge-advanced);    color: var(--color-badge-advanced-text); }
.badge-soon        { background: var(--color-badge-soon);        color: var(--color-badge-soon-text); }

/* ═══════════════════════════════════════════
   OVERLAY UTILITY
   ═══════════════════════════════════════════ */

.photo-overlay {
  position: relative;
}
.photo-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  pointer-events: none;
}