/* =======================================================================
   Democracia Socialista — Colors & Type (bundled copy for Puntos)
   Source of truth: design/brand/colors_and_type.css in the DS hub.
   Only the font faces this app actually uses are declared here.
   Brand source: https://www.socialista.pr/marca
   ======================================================================= */

/* ---- Font face declarations -------------------------------------------
   Both brand families are bundled locally in /fonts as OTFs:
   - Mr Eaves XL Sans  (Thin → Ultra, roman + italic)
   - Mrs Eaves XL Serif (Reg, Bold, Heavy, roman + italic) + Narrow variant
   ----------------------------------------------------------------------- */

/* Mrs Eaves XL Serif — standard */
@font-face { font-family: "Mrs Eaves XL Serif"; src: url("fonts/MrsEavesXLSerOT-Reg.otf") format("opentype");        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mrs Eaves XL Serif"; src: url("fonts/MrsEavesXLSerOT-RegItalic.otf") format("opentype");  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mrs Eaves XL Serif"; src: url("fonts/MrsEavesXLSerOT-Bold.otf") format("opentype");       font-weight: 700; font-style: normal; font-display: swap; }

/* Mrs Eaves XL Serif Narrow — tighter setting for headlines / narrow columns */

@font-face { font-family: "Mr Eaves XL Sans"; src: url("fonts/MrEavesXLSanOT-Book.otf") format("opentype");       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mr Eaves XL Sans"; src: url("fonts/MrEavesXLSanOT-Reg.otf") format("opentype");        font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mr Eaves XL Sans"; src: url("fonts/MrEavesXLSanOT-Bold.otf") format("opentype");       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mr Eaves XL Sans"; src: url("fonts/MrEavesXLSanOT-Heavy.otf") format("opentype");      font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* ============== COLORS — Primary ============== */
  --ds-rojo:        #C81E28;   /* Rojo Revolucionario */
  --ds-verde:       #142814;   /* Verde Ecológico (substitutes black) */
  --ds-blanco:      #FFFFFF;

  /* ============== COLORS — Tonal (derived, for UI) ============== */
  --ds-verde-95:    #0A140A;   /* deeper, for headers on dark */
  --ds-verde-80:    #1E3A1E;
  --ds-verde-60:    #456045;
  --ds-verde-30:    #A8B8A8;
  --ds-verde-10:    #E6ECE6;   /* subtle tint of verde */
  --ds-verde-5:     #F2F5F2;   /* background wash */

  --ds-rojo-dark:   #9E1820;   /* press / visited */
  --ds-rojo-20:     #F6DCDE;   /* tint — banners / highlights */

  /* ============== Slab tints (diagonal accent bands) ==============
     Hard-stop diagonal bands layered over a solid verde or rojo ground.
     Decorative only — never text or border colors. Ordered dark → light. */
  --ds-verde-slab-1: #0F200F;
  --ds-verde-slab-2: #163016;
  --ds-verde-slab-3: #1A3A1A;
  --ds-verde-slab-4: #1E4A1E;

  --ds-rojo-slab-1:  #8B1118;
  --ds-rojo-slab-2:  #A8181F;
  --ds-rojo-slab-3:  #B01E26;
  --ds-rojo-slab-4:  #D42A34;

  --ds-cream:       #F5F1E8;   /* warm off-white — print feel */
  --ds-cream-2:     #EDE7D6;
  --ds-paper:       #FAF7EF;   /* editorial background */

  --ds-gris-90:     #1A1A1A;
  --ds-gris-60:     #6B6B6B;
  --ds-gris-30:     #BFBFBF;
  --ds-gris-10:     #EDEDED;

  /* ============== Semantic foreground / background ============== */
  --fg-1: var(--ds-verde);       /* primary text */
  --fg-2: var(--ds-verde-80);    /* secondary text */
  --fg-3: var(--ds-verde-60);    /* tertiary / captions */
  --fg-onDark: var(--ds-cream);
  --fg-accent: var(--ds-rojo);

  --bg-1: var(--ds-blanco);      /* default surface */
  --bg-2: var(--ds-paper);       /* warm editorial surface */
  --bg-3: var(--ds-verde-5);     /* subtle wash */
  --bg-dark: var(--ds-verde);    /* inverse */
  --bg-accent: var(--ds-rojo);

  --border-1: var(--ds-verde);
  --border-2: var(--ds-gris-30);

  /* ============== Type families ============== */
  /* Brand uses SERIF for body/long-form and SANS for display/headlines */
  --font-serif:  "Mrs Eaves XL Serif", "Libre Baskerville", Baskerville, "Times New Roman", serif;
  --font-serif-narrow: "Mrs Eaves XL Serif Narrow", "Mrs Eaves XL Serif", "Libre Baskerville", Baskerville, serif;
  --font-sans:   "Mr Eaves XL Sans", "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ============== Type scale (fluid, editorial bias) ============== */
  --fs-display:   clamp(3rem, 6vw, 5.5rem);   /* 48–88 */
  --fs-h1:        clamp(2.25rem, 4vw, 3.5rem); /* 36–56 */
  --fs-h2:        clamp(1.75rem, 3vw, 2.5rem); /* 28–40 */
  --fs-h3:        1.5rem;   /* 24 */
  --fs-h4:        1.25rem;  /* 20 */
  --fs-label:     0.8125rem;/* 13, uppercase tracked — inline metadata only */
  --fs-body:      1.0625rem;/* 17 — serif long-form */
  --fs-ui:        1rem;     /* 16 — sans UI */
  --fs-small:     0.875rem; /* 14 */
  --fs-micro:     0.75rem;  /* 12 */

  --lh-display:   1.02;
  --lh-heading:   1.1;
  --lh-body:      1.55;
  --lh-tight:     1.25;

  --tr-caps:      0.12em;   /* label / allcaps tracking */
  --tr-tight:     -0.015em;
  --tr-normal:    0;

  /* ============== Spacing ============== */
  --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 ============== */
  /* Brand reads editorial/political — geometry is mostly squared,
     with a subtle 4px radius on interactive surfaces so they feel
     friendly without going "app-like". Logo sello is a perfect circle. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;    /* default UI radius — tags, buttons, inputs, cards */
  --radius-3: 4px;    /* alias — "everywhere else" */
  --radius-pill: 999px;

  /* ============== Borders ============== */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-heavy: 4px;   /* heavy rules under headlines */
  --bw-banner: 8px;

  --rule-cap: 96px;  /* red cap at the left edge of a heavy rule */

  /* ============== Containers ==============
     Two widths, and only two. Prose measure is capped separately (72ch);
     smaller max-widths on headlines and body are typographic measures,
     not containers, and don't need to snap to these. */
  --container:        1120px;
  --container-narrow:  720px;
  --measure:            72ch;

  /* ============== Focus ==============
     3px rojo, inverting to blanco on dark and rojo grounds.
     Set --focus-color on any dark surface to flip the ring. */
  --focus-color:  var(--ds-rojo);
  --focus-width:  3px;
  --focus-offset: 2px;

  /* ============== Diagonals ==============
     The brand's angles are a set, not a free parameter. */
  --angle-slab:   -14deg;  /* primary accent slab */
  --angle-steep:  -20deg;  /* steeper variant */
  --angle-corner:  45deg;  /* corner wedges */

  /* ============== Shadows (used sparingly — political/print feel) ============ */
  --shadow-1: 0 1px 2px rgba(20,40,20,0.06), 0 1px 3px rgba(20,40,20,0.04);
  --shadow-2: 0 4px 12px rgba(20,40,20,0.08);
  --shadow-press: inset 0 2px 0 rgba(0,0,0,0.12);

  /* ============== Motion ============== */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 400ms;
}

/* =======================================================================
   Semantic element defaults
   ======================================================================= */
html, body { background: var(--bg-1); color: var(--fg-1); }
body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "liga", "kern", "onum";
}

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-display); text-transform: uppercase; letter-spacing: 0; }
h1 { font-size: var(--fs-h1); text-transform: uppercase; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Inline metadata only — swatch specs, meta rows, small UI chrome.
   NOT a kicker. Never place this above a headline. */
.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  font-weight: 600;
  color: var(--fg-accent);
}

p, .prose { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.lead { font-size: 1.25rem; line-height: 1.5; }
.caption { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--fg-3); }

a { color: var(--fg-accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ds-rojo-dark); }

/* Focus — visible everywhere. On dark or rojo grounds, set
   --focus-color: var(--ds-blanco) on the surface and the ring inverts. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Screen-reader-only. One name across the system: .sr-only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

code, pre, .mono { font-family: var(--font-mono); font-size: 0.95em; }

/* Utility: editorial drop-cap for revista-style body copy */
.dropcap::first-letter {
  font-family: var(--font-serif);
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding: 0.05em 0.08em 0 0;
  color: var(--ds-rojo);
  font-weight: 700;
}

/* Horizontal rule — heavy, with red accent block, like political posters */
hr.ds-rule {
  border: 0;
  height: var(--bw-heavy);
  background: var(--ds-verde);
  margin: var(--sp-6) 0;
  position: relative;
}
hr.ds-rule::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--rule-cap);
  background: var(--ds-rojo);
}

/* Motion — reduced-motion is mandatory, and must neutralize scroll reveals
   so [data-animate] content is visible rather than permanently hidden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate] { opacity: 1 !important; transform: none !important; }
}