/* ---------------------------------------------------------------------------
   farmearaura.com — design tokens ("cosmic arcade")
   Fuente unica de verdad para colores, tipografia, espaciado y motion.
   Se sirve como /css/tokens.css y lo enlazan TODAS las plantillas via el
   marcador <!--HEADCSS--> (ver nav_data.head_css()).

   Por que un archivo externo y no CSS inline como antes: page.tpl.html y
   guide.tpl.html pasan por Python .format(), asi que cualquier "{" inline
   hay que duplicarlo ("{{"). Un <link> no tiene llaves, funciona igual en
   las 7 plantillas y ademas se cachea entre paginas (el sitio son 538
   paginas, la navegacion entre ellas es el caso comun).

   Todas las plantillas usan solo estos nombres. Las dos paletas viejas
   (--bone/--mid/--dim/--panel... y --muted/--loss/--num...) y sus bloques
   "compat" ya no existen: no reintroducir esos nombres.
--------------------------------------------------------------------------- */

/* ---- Fuentes (self-hosted, sin CDN de terceros) ---- */
@font-face{font-family:'Clash Display';src:url(/fonts/clash-display-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url(/fonts/clash-display-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url(/fonts/satoshi-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url(/fonts/satoshi-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Marker';src:url(/fonts/permanent-marker-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* ---- Superficies ---- */
  --void:#070310;
  --abyss:#0C0618;
  --surface:#130B24;
  --surface-2:#1B1033;
  --surface-3:#241546;

  /* ---- Lineas ---- */
  --line:rgba(168,130,255,.14);
  --line-strong:rgba(168,130,255,.32);
  --line-glow:rgba(217,70,239,.45);

  /* ---- Aura violeta (primario) ---- */
  --aura-300:#C4B5FD;
  --aura-400:#A78BFA;
  --aura-500:#8B5CF6;
  --aura-600:#7C3AED;
  --aura-700:#6D28D9;

  /* ---- Flare magenta (acento) ---- */
  --flare-300:#F0ABFC;
  --flare-400:#E879F9;
  --flare-500:#D946EF;
  --flare-600:#C026D3;

  /* ---- Ion cyan — SOLO valores numericos de score ---- */
  --ion-200:#A5F3FC;
  --ion-300:#67E8F9;
  --ion-400:#22D3EE;

  /* ---- Podio ---- */
  --gold:#FBBF24;
  --silver:#D6DBE6;
  --bronze:#FB7A3C;

  /* ---- Alerta / aura negativa ---- */
  --danger:#FF4D6D;

  /* ---- Acentos de seccion ----
     Las tres familias de duelos comparten fondo y sistema; lo unico que las
     distingue es el acento (--accent, ver duelos.css): magenta en duelos
     cotidianos, oro antiguo en historicos, coral "spotlight" en famosos. */
  --gold-deep:#E8B84B;
  --coral:#FF5C7A;

  /* ---- Texto ---- */
  --ink-hi:#F6F1FF;
  /* El texto de cuerpo se llama --ink-body, no --ink: en las paletas
     viejas --ink era una superficie (tarjeta o fondo de pagina), y el
     nombre se evita para que nadie lo lea con ese sentido. */
  --ink-body:#CFC5E6;
  --ink-lo:#9287AE;
  --ink-xlo:#6B6184;

  /* ---- Gradientes ---- */
  --grad-aura:linear-gradient(101deg,var(--aura-400) 0%,var(--flare-400) 52%,var(--aura-300) 100%);
  --grad-cta:linear-gradient(135deg,var(--aura-600) 0%,var(--aura-500) 45%,var(--flare-600) 100%);
  --grad-card:linear-gradient(168deg,rgba(139,92,246,.10) 0%,rgba(217,70,239,.04) 100%);
  --grad-ring:conic-gradient(from 220deg,var(--ion-400),var(--aura-400),var(--flare-400),var(--ion-400));

  /* ---- Atmosfera ---- */
  --aurora-1:radial-gradient(60% 45% at 12% 0%,rgba(139,92,246,.30),transparent 70%);
  --aurora-2:radial-gradient(55% 40% at 88% 8%,rgba(217,70,239,.22),transparent 72%);
  --aurora-3:radial-gradient(70% 50% at 50% 100%,rgba(109,40,217,.25),transparent 75%);

  /* ---- Glow ---- */
  --glow-sm:0 0 0 1px rgba(168,130,255,.18),0 8px 24px -12px rgba(124,58,237,.65);
  --glow-md:0 0 0 1px rgba(168,130,255,.22),0 20px 56px -20px rgba(124,58,237,.80);
  --glow-cta:0 10px 34px -10px rgba(168,85,247,.70),0 0 0 1px rgba(232,121,249,.35) inset;
  --glow-ion:0 0 28px rgba(34,211,238,.45);

  /* ---- Radios ---- */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

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

  /* ---- Layout ---- */
  --container:1200px;
  --gutter:clamp(16px,4vw,40px);
  --section-y:clamp(56px,9vw,112px);

  /* ---- Tipografia ---- */
  --font-display:'Clash Display','Arial Black',system-ui,sans-serif;
  --font-body:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  --font-marker:'Marker','Comic Sans MS',cursive;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --t-display:clamp(3rem,8.5vw,5.5rem);
  --t-poster:clamp(2.75rem,7.5vw,4.75rem);
  --t-h2:clamp(1.9rem,4.2vw,2.9rem);
  --t-h3:clamp(1.25rem,2.2vw,1.55rem);
  --t-lead:clamp(1rem,1.6vw,1.125rem);
  --t-body:1rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;
  --t-eyebrow:.75rem;

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:140ms; --t-base:240ms; --t-slow:520ms;

  --z-header:100; --z-modal:400; --z-consent:500;
}

/* ---- Atmosfera de fondo: gradientes CSS, sin foto (LCP) ---- */
body{
  background-color:var(--void);
  background-image:var(--aurora-1),var(--aurora-2),var(--aurora-3);
  background-attachment:fixed;
  color:var(--ink-body);
}

/* Grano: SVG feTurbulence inline, ~0.4KB, sobre todo el viewport */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Foco visible en todo control interactivo ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--flare-300);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ---- Numeros de score: cyan reservado exclusivamente para esto ---- */
.score-num{
  font-family:var(--font-display);font-weight:700;
  color:var(--ion-300);text-shadow:var(--glow-ion);
  font-variant-numeric:tabular-nums;
}

/* ---- Palabra en gradiente ("AURA"): color solido declarado antes ---- */
.grad-word{
  color:var(--aura-300);
  background:var(--grad-aura);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}