/* ==========================================================================
   guiadeo-tokens.css — SISTEMA DE DISEÑO GUIADEO (fuente única)
   --------------------------------------------------------------------------
   Identidad: Apple (espacio) + Lego/Imanix (bloques) + Notion (densidad).
   Lo importan: webs de cliente (base, con override de --brand-* por dirección),
   panel, piezas de redes (via renderer), emails (transpilado a inline).

   REGLA DE ORO: ninguna pieza nace del promedio. Nace de estos tokens + una
   dirección de arte del catálogo + un brief con anchor. El genérico (Inter,
   #2563eb, negro titanium, hero foto+gradiente-negro) es imposible por default.

   En webs de cliente, --brand-50..900 se PISAN con la rampa OKLCH que emite
   derive-palette a partir del hex real del comercio. NUNCA usar #2563eb crudo.
   ========================================================================== */

:root {
  /* ===== COLOR — Notion: neutros CÁLIDOS densos, NO slate frío ===== */
  --surface-0: oklch(0.99 0.004 90);    /* blanco cálido, no #fff puro   */
  --surface-1: oklch(0.975 0.005 90);   /* bloque nivel 1                */
  --surface-2: oklch(0.955 0.006 90);   /* bloque nivel 2 (Lego: capa por superficie, no por sombra) */
  --line:        oklch(0.90 0.008 90);
  --line-strong: oklch(0.84 0.010 90);
  --ink:   oklch(0.22 0.01 80);          /* texto — NUNCA #000            */
  --ink-2: oklch(0.48 0.012 80);
  --ink-3: oklch(0.64 0.010 80);

  /* BRAND — placeholder; en webs de cliente lo pisa derive-palette con la
     rampa derivada del hex real. Prohibido dejar este azul en un entregable. */
  --brand-50:  oklch(0.97 0.02 255);
  --brand-100: oklch(0.93 0.05 255);
  --brand-500: oklch(0.55 0.16 255);
  --brand-600: oklch(0.48 0.16 255);
  --brand-900: oklch(0.30 0.10 255);

  /* ESTADOS semánticos — 4 y basta */
  --ok:   oklch(0.55 0.15 150);  --ok-bg:   oklch(0.96 0.03 150);
  --warn: oklch(0.62 0.16 55);   --warn-bg: oklch(0.96 0.04 75);
  --bad:  oklch(0.55 0.19 27);   --bad-bg:  oklch(0.96 0.03 20);
  --info: var(--brand-500);      --info-bg: var(--brand-50);

  /* ===== TIPOGRAFÍA — escala tokenizada. Inter/Poppins/Roboto BANEADAS como protagonista ===== */
  /* Pairing default (Google Fonts, display=swap, máx 2 familias).
     display: "Bricolage Grotesque" (carácter chunky = Lego)
              alternativas por dirección: Fraunces, Sora, Space Grotesk
     texto:   "Instrument Sans" | alternativa: system-ui stack */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);   /* cuerpo */
  --step-1:  clamp(1.25rem, 1.17rem + 0.39vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.42rem + 0.66vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.73rem + 1.06vw, 2.66rem);
  --step-4:  clamp(2.44rem, 2.10rem + 1.64vw, 3.55rem);
  --step-5:  clamp(3.05rem, 2.54rem + 2.47vw, 4.73rem);   /* hero */
  --leading-body: 1.5;  --leading-tight: 1.1;
  --measure: 66ch;                                        /* Notion: medida de lectura */
  --tracking-display: -0.02em;  --tracking-kicker: 0.08em;

  /* ===== ESPACIADO — Apple: ritmo 8pt, saltos generosos ===== */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;
  /* secciones web: --s24 mobile / --s32 desktop. Panel content: --s8. */

  /* ===== BLOQUES — Lego/Imanix: chunky, táctil, encastrable ===== */
  --radius-block: 20px;   /* cards/bloques — no 6px tímido */
  --radius-inner: 12px;   /* elementos dentro de un bloque (encastre: outer - padding/2) */
  --radius-pill: 999px;
  --border-block: 1px solid var(--line);
  /* Elevación con intención: máx 2 niveles. Default = plano + borde (Notion).
     Nivel 1 (shadow) solo para overlay/popover: */
  --shadow-pop: 0 8px 30px oklch(0.2 0.02 80 / 0.10);

  /* ===== MOTION — presupuesto, no decoración ===== */
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* máx 1 secuencia firma por página (la provee la dirección de arte).
     Micro-interacciones solo opacity/transform. prefers-reduced-motion SIEMPRE. */

  /* ===== GRID ===== */
  --container: 1120px;      /* web   */
  --container-wide: 1360px; /* panel */
  --grid-gap: var(--s6);
  /* 12 col desktop / 6 tablet / 4 mobile. Breakpoints: 375 / 768 / 1280. */
}

/* Base mínima recomendada (opt-in; no pisa reset del proyecto) */
.gd-base {
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}
.gd-base h1, .gd-base h2, .gd-base h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}