/* ═══════════════════════════════════════════════════════════════════════════
   FUVEV Design System v1 — "Broadcast Grassroots"
   Un solo archivo = fonts + colors + typography + spacing + motifs
   Fuente: desgine.zip / "otros datos .txt" (tokens del rediseño)
   Cargar DESPUÉS de fuvev-theme.v5.css para que estos tokens manden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* === fonts.css === */
/* FUVEV — Broadcast Grassroots type stack
 * Display: Anton (Google Fonts) — cartel deportivo callejero
 * UI: Geist Variable (local — open-source substitute for Söhne)
 * Numbers/data: JetBrains Mono Variable — tabular figures
 */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Geist:wght@100..900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Geist se sirve desde Google Fonts (el woff2 local no existe en el repo) */


/* === colors.css === */
/* FUVEV — colour palette
 * Broadcast Grassroots: cancha del barrio + broadcast en vivo
 * Dark first. `.theme-light` scope inverts.
 */
:root{
  /* ── Base palette (dark, default) ─────────────────────────────────────── */
  --smoke-black:#0A0906;      /* fondo base — negro humo, no clínico */
  --surface-1:#14110C;        /* superficie elevada baja */
  --surface-2:#1E1A13;        /* superficie elevada alta */
  --surface-3:#2A241A;        /* borde / hover surface */

  --burnt-orange:#E85D2F;     /* marca principal — usar con restricción */
  --burnt-orange-h:#F26A3D;   /* hover */
  --burnt-orange-p:#C74B23;   /* pressed */
  --burnt-orange-soft:rgba(232,93,47,.12);

  --shirt-blood:#8A1E1E;      /* sangre camiseta vieja — acento secundario */
  --shirt-blood-soft:rgba(138,30,30,.14);

  --ref-yellow:#FFD400;       /* amarillo árbitro — signature */
  --ref-yellow-soft:rgba(255,212,0,.14);

  --cream:#F4E9D3;            /* crema texturada — texto principal */
  --cream-2:#E7DBBF;          /* subordinado */
  --cream-mute:#B9AC8F;       /* placeholder / kicker mute */
  --cream-faint:#7A7160;      /* apagado */

  --live-green:#10B981;       /* indicador scoreboard EN VIVO */
  --pitch-green:#1A2A18;      /* verde cancha — fondo SVG sutil */

  --divider:rgba(244,233,211,.10);
  --divider-strong:rgba(244,233,211,.18);
  --hairline:rgba(244,233,211,.06);

  /* ── Semantic aliases ────────────────────────────────────────────────── */
  --bg:var(--smoke-black);
  --bg-surface:var(--surface-1);
  --bg-elevated:var(--surface-2);
  --bg-hover:var(--surface-3);

  --text:var(--cream);
  --text-mute:var(--cream-2);
  --text-dim:var(--cream-mute);
  --text-faint:var(--cream-faint);

  --brand:var(--burnt-orange);
  --brand-hover:var(--burnt-orange-h);
  --brand-press:var(--burnt-orange-p);
  --brand-soft:var(--burnt-orange-soft);

  --accent-blood:var(--shirt-blood);
  --accent-yellow:var(--ref-yellow);
  --accent-live:var(--live-green);

  --border:var(--divider);
  --border-strong:var(--divider-strong);
  --border-hair:var(--hairline);

  /* Zebra árbitro pattern token (signature element) */
  --zebra:repeating-linear-gradient(90deg,var(--ref-yellow) 0 4px,var(--smoke-black) 4px 8px);
  --zebra-tight:repeating-linear-gradient(90deg,var(--ref-yellow) 0 3px,var(--smoke-black) 3px 6px);

  color-scheme:dark;
}

/* ── Light mode (papel) ────────────────────────────────────────────────── */
.theme-light,:root[data-theme="light"]{
  --smoke-black:#0A0906;
  --surface-1:#FAF2E1;
  --surface-2:#EFE4C9;
  --surface-3:#E4D7B4;

  --burnt-orange:#B0451E;
  --burnt-orange-h:#C15230;
  --burnt-orange-p:#943818;
  --burnt-orange-soft:rgba(176,69,30,.10);

  --cream:#0A0906;
  --cream-2:#231F16;
  --cream-mute:#5C513C;
  --cream-faint:#8A7D62;

  --divider:rgba(10,9,6,.10);
  --divider-strong:rgba(10,9,6,.20);
  --hairline:rgba(10,9,6,.06);

  --bg:#F4E9D3;
  --bg-surface:var(--surface-1);
  --bg-elevated:var(--surface-2);
  --bg-hover:var(--surface-3);

  --zebra:repeating-linear-gradient(90deg,var(--ref-yellow) 0 4px,#0A0906 4px 8px);
  color-scheme:light;
}


/* === typography.css === */
/* FUVEV — type system
 * Display: Anton (condensed, brutal, cartel deportivo)
 * UI: Geist Variable — clean, editorial, works at all sizes
 * Data: JetBrains Mono Variable — tabular, slashed zero
 */
:root{
  --font-display:'Anton','Bebas Neue','Oswald',sans-serif;
  --font-ui:'Geist','GeistVF',ui-sans-serif,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Display scale — cartel sizes */
  --fs-display-1:clamp(64px,10vw,140px); /* @kind font */   /* hero */
  --fs-display-2:clamp(48px,7vw,96px); /* @kind font */     /* section starter */
  --fs-display-3:clamp(36px,5vw,64px); /* @kind font */     /* card display */

  /* UI scale */
  --fs-h1:32px; /* @kind font */
  --fs-h2:24px; /* @kind font */
  --fs-h3:18px; /* @kind font */
  --fs-body:15px; /* @kind font */
  --fs-body-sm:13px; /* @kind font */
  --fs-caption:12px; /* @kind font */
  --fs-kicker:11px; /* @kind font */

  /* Line heights */
  --lh-display:0.92; /* @kind other */
  --lh-tight:1.12; /* @kind other */
  --lh-body:1.55; /* @kind other */
  --lh-loose:1.7; /* @kind other */

  /* Letter spacing */
  --ls-display:-0.01em; /* @kind other */
  --ls-body:0em; /* @kind other */
  --ls-kicker:0.14em; /* @kind other */
  --ls-caps:0.06em; /* @kind other */

  /* Weights (Anton is single weight; Geist is variable) */
  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */
}

/* ── Base document ─────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);background:var(--bg);text-wrap:pretty}

/* ── Utility classes ───────────────────────────────────────────────────── */
.f-display{font-family:var(--font-display);font-weight:var(--fw-regular);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase}
.f-display-1{font:var(--fw-regular) var(--fs-display-1)/var(--lh-display) var(--font-display);letter-spacing:var(--ls-display);text-transform:uppercase}
.f-display-2{font:var(--fw-regular) var(--fs-display-2)/var(--lh-display) var(--font-display);letter-spacing:var(--ls-display);text-transform:uppercase}
.f-display-3{font:var(--fw-regular) var(--fs-display-3)/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-display);text-transform:uppercase}

.f-h1{font:var(--fw-semibold) var(--fs-h1)/var(--lh-tight) var(--font-ui);letter-spacing:-0.01em}
.f-h2{font:var(--fw-semibold) var(--fs-h2)/var(--lh-tight) var(--font-ui);letter-spacing:-0.005em}
.f-h3{font:var(--fw-semibold) var(--fs-h3)/1.3 var(--font-ui)}

.f-body{font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui)}
.f-body-sm{font:var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-ui)}
.f-caption{font:var(--fw-medium) var(--fs-caption)/1.4 var(--font-ui);color:var(--text-dim)}

/* Kicker — signature small caps */
.f-kicker{font-family:var(--font-display);font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker);text-transform:uppercase;line-height:1;color:var(--brand);font-weight:var(--fw-regular)}

/* Tabular numbers — data, scoreboards, tables */
.f-mono,.tabular{font-family:var(--font-mono);font-feature-settings:"tnum" 1,"zero" 1,"ss01" 1;font-variant-numeric:tabular-nums slashed-zero}

.f-num-display{font-family:var(--font-display);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}


/* === spacing.css === */
/* FUVEV — spacing, radii, motion, effects */
:root{
  /* Spacing scale (4px base) */
  --sp-0:0; /* @kind spacing */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;
  --sp-9:48px;
  --sp-10:64px;
  --sp-11:80px;
  --sp-12:96px;

  /* Layout */
  --page-max:1200px;
  --nav-h:56px;
  --gutter:20px;

  /* Radii — restrained, editorial. No pill unless functional (chips, live badges). */
  --r-none:0; /* @kind radius */
  --r-xs:2px;
  --r-sm:4px;
  --r-md:6px;
  --r-lg:10px;
  --r-xl:14px;
  --r-pill:9999px;

  /* Borders */
  --bw:1px;
  --bw-strong:2px;

  /* Motion — broadcast-cut easing */
  --ease-cut:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --dur-hover:140ms; /* @kind other */
  --dur-press:80ms; /* @kind other */
  --dur-view:320ms; /* @kind other */
  --dur-view-slow:480ms; /* @kind other */

  /* Shadows — minimal. Prefer border-intensification over drop shadow. */
  --shadow-quiet:0 1px 0 rgba(0,0,0,.4);
  --shadow-lift:0 6px 20px rgba(0,0,0,.55);
  --shadow-inset-hair:inset 0 0 0 1px var(--border-hair);

  /* Glow (used sparingly on live indicator) */
  --glow-live:0 0 0 3px rgba(16,185,129,.20);
  --glow-brand:0 0 0 3px rgba(232,93,47,.20);
}

/* Reduced motion — respected throughout the system */
@media (prefers-reduced-motion:reduce){
  :root{--dur-hover:0ms; /* @kind other */ --dur-press:0ms; /* @kind other */ --dur-view:0ms; /* @kind other */ --dur-view-slow:0ms; /* @kind other */}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* === motifs.css === */
/* FUVEV — signature motifs.
 * Standalone utility classes that make anything feel like broadcast/grassroots.
 */

/* ── Reset (opinionated, shared by consumers) ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
input,textarea,select{font:inherit;color:inherit}

/* ── Zebra árbitro — the signature divider ────────────────────────────── */
/* Use as a hairline strip along the bottom of primary CTAs, or as a full
   section divider. Always yellow/black — never re-tinted. */
.zebra{display:block;height:6px;background:var(--zebra);width:100%}
.zebra-thin{display:block;height:4px;background:var(--zebra-tight);width:100%}
.zebra-tape{display:block;height:14px;background:var(--zebra);width:100%;position:relative}
.zebra-tape::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 100%);pointer-events:none}

/* ── Kicker mark — Anton uppercase 11px letter-spacing 0.14em ─────────── */
.kicker{font-family:var(--font-display);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:8px}
.kicker::before{content:"";width:14px;height:1px;background:currentColor;display:inline-block}
.kicker.no-tick::before{display:none}

/* ── Pitch background (SVG 3% opacity persistent) ─────────────────────── */
/* Apply to <body> or a wrapper. The pattern is a half-pitch tile at low
   opacity — a subtle grassroots signature. */
.pitch-bg{position:relative;isolation:isolate}
.pitch-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='260' viewBox='0 0 400 260' fill='none' stroke='%23F4E9D3' stroke-width='1.5'><rect x='6' y='6' width='388' height='248'/><line x1='200' y1='6' x2='200' y2='254'/><circle cx='200' cy='130' r='38'/><circle cx='200' cy='130' r='2' fill='%23F4E9D3'/><rect x='6' y='70' width='60' height='120'/><rect x='334' y='70' width='60' height='120'/><rect x='6' y='100' width='24' height='60'/><rect x='370' y='100' width='24' height='60'/><path d='M6 40 A34 34 0 0 1 40 6'/><path d='M394 40 A34 34 0 0 0 360 6'/><path d='M6 220 A34 34 0 0 0 40 254'/><path d='M394 220 A34 34 0 0 1 360 254'/></svg>");
  background-repeat:repeat;background-size:400px 260px;
}
/* Lighter for cards over the same bg */
.pitch-bg-strong::before{opacity:.06}

/* ── Grain / paper texture (optional, used on hero elevated panels) ───── */
.grain{position:relative;isolation:isolate}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0 0.83 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Broadcast dot — pulsing green EN VIVO indicator ──────────────────── */
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-live);display:inline-block;position:relative;flex-shrink:0}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--accent-live);opacity:.35;animation:live-pulse 1.6s var(--ease-cut) infinite}
@keyframes live-pulse{0%,100%{opacity:.35}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.live-dot::after{animation:none;opacity:.5}}

/* ── Focus ring (broadcast orange) ────────────────────────────────────── */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}

/* Scrollbars — hairline, cream */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--brand-press)}