/* Rutas Familiares Valencia — Design Tokens
   Source of truth for colors, type, spacing, radii, shadows. */

:root {
  /* ============== BRAND COLORS (from index.html :root) ============== */
  --verde:        #2d6a4f;  /* Primary brand green — pine forest */
  --verde-oscuro: #1b4332;  /* Deepest green — used in gradients & headings */
  --verde-claro:  #52b788;  /* Light moss accent — labels, dots, hover */
  --tierra:       #b7791f;  /* Earthen ochre — difficulty, warm accents */
  --crema:        #fdf6ec;  /* Cream paper — page background */
  --naranja:      #e07b39;  /* Sunrise orange — focus, badge, CTA accent */
  --rojo-bar:     #c0392b;  /* Bar / restaurant red */
  --rojo-sos:    #e74c3c;  /* SOS / emergency */
  --gris:         #4a4a4a;  /* Body text */
  --sombra:       rgba(0,0,0,0.13);

  /* Surface tints used in the product */
  --surface:        #ffffff;
  --surface-warm:   #fff9f4;   /* Bar cards */
  --surface-cream:  #fef3e2;   /* Earth tags / tips */
  --surface-mint:   #e8f4f0;   /* Distance tag */
  --surface-paper:  #f5f0e8;   /* Filters panel / pressed card */
  --border-cream:   #ede8df;
  --border-warm:    #f0d9c8;
  --border-paper:   #d4c5a9;

  /* Semantic foregrounds */
  --fg-1: #1b4332;   /* Strong heading green */
  --fg-2: #4a4a4a;   /* Body */
  --fg-3: #6c5e4f;   /* Muted (warm) — passes WCAG AA on cream */
  --fg-4: #888888;   /* Captions, count bars */
  --fg-bar: #7b2d1e; /* Restaurant card heading */
  --fg-on-dark: #ffffff;
  --fg-on-dark-muted: rgba(255,255,255,0.85);

  /* ============== TYPOGRAPHY ============== */
  --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Display weights */
  --w-regular: 400;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* Type scale (mobile-first; the product is mobile-targeted) */
  --t-h1:        2.8rem;   /* Hero header */
  --t-h1-lh:    1.05;
  --t-h1-ls:    3px;
  --t-h2:        1.8rem;   /* FAQ / section */
  --t-h2-ls:    1.5px;
  --t-h3:        1.5rem;   /* Detail block heading (Bebas Neue) */
  --t-card-num:  1.5rem;   /* Bebas — route counter */
  --t-stat-v:    1.6rem;   /* Stat value (Bebas) */

  --t-body:      0.95rem;  /* Default body */
  --t-body-lh:  1.5;
  --t-detail:    0.9rem;   /* Card body text */
  --t-meta:      0.85rem;  /* Card meta */
  --t-tag:       0.78rem;
  --t-label:     0.72rem;  /* Section labels uppercase */
  --t-micro:     0.65rem;

  /* ============== SPACING / RADII / SHADOWS ============== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 24px;
  --radius-tag: 12px;
  --radius-round: 50%;

  --shadow-card:    0 2px 8px var(--sombra);
  --shadow-pop:     0 4px 14px rgba(0,0,0,0.13);
  --shadow-cta:     0 4px 10px rgba(52,152,219,0.30);
  --shadow-fab:     0 4px 15px rgba(243,156,18,0.40);

  /* Signature header gradient (deep forest) */
  --grad-header: linear-gradient(135deg, var(--verde) 0%, var(--verde-oscuro) 100%);
  /* Photo overlay gradient — used on hero photos so type stays legible */
  --grad-photo:  linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.70) 100%);

  /* Motion */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pop:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
}

/* ============== SEMANTIC TYPE CLASSES ============== */
.t-display, h1.brand {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-h1);
  letter-spacing: var(--t-h1-ls);
  line-height: var(--t-h1-lh);
  color: var(--fg-on-dark);
  text-shadow: 2px 3px 8px rgba(0,0,0,0.4);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-h2);
  letter-spacing: var(--t-h2-ls);
  color: var(--verde);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-h3);
  letter-spacing: 1px;
  color: var(--verde);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
}

.t-detail {
  font-family: var(--font-body);
  font-size: var(--t-detail);
  line-height: 1.6;
  color: #444;
}

.t-meta {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  font-weight: var(--w-semi);
  color: var(--fg-4);
}

.t-label {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: var(--w-black);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--verde-claro);
}

.t-tag {
  font-family: var(--font-body);
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
}

.t-card-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--w-black);
  color: var(--fg-1);
  line-height: 1.2;
}