/* ============================================================
   PEÑA BÉTICA "CAPI" ÉCIJA — Colors & Type foundations
   Palette sampled directly from the peña facade & crest.
   Fonts loaded from Google Fonts CDN (see note at bottom).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS (from assets) ---------- */
  --verde-fachada:   #3C6B43;  /* primary — the painted facade wall            */
  --verde-betis:     #2F8B57;  /* brighter matchday green for accents/links     */
  --verde-noche:     #143815;  /* deep green — crest ring, dark surfaces        */
  --verde-musgo:     #2C4A30;  /* mid-dark green — borders, hovers on dark      */
  --oro:             #C9A24B;  /* gold — crown & crest border, premium accent   */
  --oro-claro:       #E2C57E;  /* light gold — highlights, hover on gold        */
  --granate:         #5E2220;  /* garnet — crown velvet, heraldic secondary     */
  --blanco:          #FFFFFF;  /* persiana white                                */
  --crema:           #F7F4EC;  /* warm bone — page background                   */
  --crema-2:         #EFEBDF;  /* warm bone, one step down — cards on cream      */

  /* ---------- NEUTRALS (warm-tinted) ---------- */
  --ink:             #1A201A;  /* near-black text, warm green-tinted            */
  --slate:           #546054;  /* secondary text                                */
  --mist:            #8A958A;  /* tertiary text, captions                       */
  --line:            #DDD7C9;  /* hairline borders on cream                     */
  --line-dark:       #2C4A30;  /* hairline borders on green                     */

  /* ---------- SEMANTIC: SURFACES ---------- */
  --bg:              var(--crema);
  --bg-elevated:     var(--blanco);
  --bg-green:        var(--verde-fachada);
  --bg-green-deep:   var(--verde-noche);

  /* ---------- SEMANTIC: TEXT ---------- */
  --fg1:             var(--ink);          /* primary text on light             */
  --fg2:             var(--slate);        /* secondary text on light           */
  --fg3:             var(--mist);         /* muted text on light               */
  --fg-on-green:     var(--crema);        /* primary text on green             */
  --fg-on-green-2:   #C7D6C2;             /* secondary text on green           */
  --accent:          var(--verde-betis);  /* links / interactive               */
  --accent-gold:     var(--oro);          /* premium / decorative accent       */

  /* ---------- SEMANTIC: STATE ---------- */
  --success:         #2F8B57;
  --warning:         #C9882B;
  --danger:          #B23A33;
  --focus-ring:      color-mix(in srgb, var(--verde-betis) 55%, transparent);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', system-ui, sans-serif;     /* headlines, big matchday type */
  --font-body:    'Figtree', system-ui, sans-serif;     /* UI + running text            */
  --font-mono:    'Spline Sans Mono', ui-monospace, monospace; /* scores, dates, tickets */

  /* ---------- TYPE SCALE (fluid) ---------- */
  --step-hero:  clamp(3rem, 1.5rem + 6vw, 6.5rem);   /* display hero        */
  --step-xxl:   clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --step-xl:    clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --step-lg:    clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --step-md:    1.25rem;
  --step-base:  1.0625rem;   /* 17px body */
  --step-sm:    0.9375rem;
  --step-xs:    0.8125rem;
  --step-xxs:   0.6875rem;   /* eyebrows / labels */

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- SHADOWS (warm, low-spread) ---------- */
  --shadow-sm: 0 1px 2px rgba(20,56,21,.06), 0 1px 1px rgba(20,56,21,.04);
  --shadow-md: 0 4px 14px rgba(20,56,21,.10), 0 2px 4px rgba(20,56,21,.06);
  --shadow-lg: 0 18px 48px rgba(20,56,21,.16), 0 6px 14px rgba(20,56,21,.08);
  --shadow-gold: 0 6px 20px rgba(201,162,75,.30);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-soft:  cubic-bezier(.33,1,.68,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply .pb-prose to a container, or use classes directly.
   ============================================================ */

.pb-eyebrow {
  font-family: var(--font-body);
  font-size: var(--step-xxs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

h1, .pb-h1 {
  font-family: var(--font-display);
  font-size: var(--step-xxl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--fg1);
  text-wrap: balance;
}

.pb-hero {
  font-family: var(--font-display);
  font-size: var(--step-hero);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-stretch: 125%;          /* Archivo expands for matchday impact */
  text-wrap: balance;
}

h2, .pb-h2 {
  font-family: var(--font-display);
  font-size: var(--step-xl);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--fg1);
  text-wrap: balance;
}

h3, .pb-h3 {
  font-family: var(--font-display);
  font-size: var(--step-lg);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--fg1);
}

h4, .pb-h4 {
  font-family: var(--font-body);
  font-size: var(--step-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg1);
}

p, .pb-body {
  font-family: var(--font-body);
  font-size: var(--step-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg2);
  text-wrap: pretty;
}

.pb-lead {
  font-family: var(--font-body);
  font-size: var(--step-md);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg2);
}

small, .pb-small {
  font-size: var(--step-sm);
  color: var(--fg3);
}

.pb-data {  /* scores, dates, ticket codes, prices */
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--fg1);
}

a, .pb-link {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .pb-link:hover { text-decoration: underline; color: var(--verde-noche); }

code, .pb-code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--crema-2);
  padding: .12em .4em;
  border-radius: var(--r-xs);
  color: var(--verde-noche);
}

/* ---------- SIGNATURE MOTIF: PERSIANA STRIPES ---------- */
/* The white horizontal bars painted on the facade. Reusable. */
.pb-persiana {
  --pb-stripe: #fff;
  --pb-gap: transparent;
  --pb-h: 5px;
  width: 54px; height: 38px;
  background: repeating-linear-gradient(
    to bottom,
    var(--pb-stripe) 0, var(--pb-stripe) var(--pb-h),
    var(--pb-gap) var(--pb-h), var(--pb-gap) calc(var(--pb-h) * 2)
  );
}

@media (prefers-reduced-motion: no-preference) {
  .pb-persiana--reveal { animation: pb-wipe var(--dur-slow) var(--ease-out) both; }
}
@keyframes pb-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}