/* ============================================================================
   CABA — design tokens + base layer.
   Single source of truth for the design language. Extracted from the approved
   Claude Design handoff (design-claude/caba-sitio-completo.html), audited in
   design-claude/README.md. Templates consume these variables — never raw hexes.
   ========================================================================= */

:root {
  /* ---- Colour: exactly eight tokens, no more (design-brief.md §3) ---- */
  --caba-ink:          #14171A;  /* body text, rules */
  --caba-ink-raised:   #1E2228;  /* raised surfaces on dark */
  --caba-paper:        #EEF0EA;  /* page ground */
  --caba-verde:        #256F30;  /* brand green — the text-safe brand colour */
  --caba-naranja:      #FA8205;  /* brand orange — fill and display only */
  --caba-naranja-tinta:#9A4E00;  /* orange as TEXT: ~5.1:1 on paper, passes AA */
  --caba-linea:        #C3BFB6;  /* hairlines, table rules */
  --caba-gris:         #5A6066;  /* secondary text */

  /* ---- Type ---- */
  --caba-font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --caba-font-text:    'Alegreya Sans', system-ui, sans-serif;
  --caba-font-label:   'Chivo', system-ui, sans-serif;

  /* Fluid scale, as delivered. Names describe role, not size. */
  --caba-size-mega:    clamp(3rem, 1.5rem + 7vw, 9rem);        /* the one hero number */
  --caba-size-xxl:     clamp(2.5rem, 1.5rem + 2vw, 3.75rem);   /* page titles */
  --caba-size-xl:      clamp(1.5rem, 1rem + 1.4vw, 2.125rem);  /* section heads */
  --caba-size-lg:      clamp(1.25rem, .9rem + 1vw, 1.625rem);  /* card heads */
  --caba-size-md:      clamp(1.125rem, .9rem + .6vw, 1.375rem);/* lead paragraphs */
  --caba-size-body:    1.0625rem;                               /* 17px */
  --caba-size-sm:      .9375rem;                                /* 15px */
  --caba-size-label:   .6875rem;                                /* 11px, uppercase */
  --caba-size-micro:   .5625rem;                                /* 9px, meta */

  /* ---- Rhythm ---- */
  --caba-gutter:  clamp(20px, 4vw, 56px);   /* page side padding, used everywhere */
  --caba-section: clamp(40px, 4vw, 72px);   /* vertical section rhythm */
  --caba-rule:    1px solid var(--caba-linea);
  --caba-rule-ink:1px solid var(--caba-ink);

  /* ---- Signature: la franja arbitral (referee jersey stripe) ---- */
  --caba-franja: repeating-linear-gradient(
      90deg,
      var(--caba-ink) 0 14px,
      var(--caba-paper) 14px 28px);
  --caba-franja-alto: 8px;
}

/* The design carries no rounded corners, no shadows and no gradients other
   than the stripe. Enforced here so a stray plugin style cannot reintroduce them. */
* { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--caba-paper);
  color: var(--caba-ink);
  font-family: var(--caba-font-text);
  font-size: var(--caba-size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--caba-font-display);
  font-weight: 400;          /* Archivo Black carries its own weight */
  line-height: .95;
  letter-spacing: .01em;
  margin: 0 0 .5em;
}
h1 { font-size: var(--caba-size-xxl); }
h2 { font-size: var(--caba-size-xl); }
h3 { font-size: var(--caba-size-lg); }

p { margin: 0 0 1em; }

a {
  color: var(--caba-ink);
  text-decoration: underline;
  text-decoration-color: var(--caba-naranja);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--caba-verde); text-decoration-color: var(--caba-ink); }

/* Hover on a dark or green surface. The default hover turns a link green, which is invisible
   on the contact bar, on the EFA band and on a hovered table row — green on green. Any block
   that paints its own dark ground carries .caba-sobre-oscuro (or is one of the named ones)
   and swaps the hover to orange, which reads on both. */
.caba-sobre-oscuro a:hover,
.caba-hero a:hover,
.caba-efa a:hover,
.caba-contacto-barra a:hover,
.caba-pie a:hover,
.caba-entrada--asociado:hover .caba-entrada__titulo { color: var(--caba-naranja); }

:focus-visible { outline: 2px solid var(--caba-naranja); outline-offset: 2px; }

img, svg, video { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ---- Utilities the templates lean on ---- */

/* Uppercase label: Chivo, wide tracking. The design's connective tissue. */
.caba-label {
  font-family: var(--caba-font-label);
  font-weight: 500;
  font-size: var(--caba-size-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
}

/* Figures line up in tables and stat blocks. */
.caba-num { font-variant-numeric: tabular-nums; }

.caba-wrap { padding-inline: var(--caba-gutter); }
.caba-section { padding-block: var(--caba-section); }

.caba-franja {
  height: var(--caba-franja-alto);
  background: var(--caba-franja);
}

/* Screen-reader-only, for the one real <h1> per template when the design hides it. */
.caba-sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Paper grain: 4% multiply overlay, fixed. Purely decorative. */
.caba-grano {
  position: fixed; inset: 0; z-index: 9;
  opacity: .04; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}