/* ============================================================
   TOKENS — Google Fonts · CSS variables · Dark mode
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Instrument+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap");

:root {
  --bg: #f5f3ef;
  --bg-alt: #eceae5;
  --bg-card: #ffffff;
  --surface: #dedbd4;
  --border: #d3d0c9;
  --border-subtle: #e8e5df;
  --ink: #1a1916;
  --ink-2: #3d3b36;
  /* a11y: --ink-3 es el tono MÁS CLARO permitido para texto legible (>=4.5:1
     sobre --bg/--bg-alt/--bg-card/--surface en ambos temas — validado por
     scripts/a11y-contrast.js). --ink-4 es SOLO decorativo (numerales
     aria-hidden, placeholders, bordes), nunca texto. */
  --ink-3: #5f5c55;
  --ink-4: #9c9991;
  --accent: #7c4abf;
  /* a11y: acento usado COMO TEXTO sobre fondos de página (CTAs de cards,
     phases, hovers) y como color del focus ring. --accent queda para
     superficies (btn primary) y texto sobre --accent-pale. */
  --accent-ink: #6b3aa8;
  --accent-dim: #a97ad4;
  --accent-pale: #ede0f7;
  --accent-2: #3d2a8f;
  --accent-3: #2a7a5c;
  /* Venn del hero (labels + trazos). En light heredan de los acentos; en dark
     se aclaran para mantener >=3:1 sin tocar --accent-2/3 (que también
     alimentan el filtro duotono de la foto). */
  --venn-user: var(--accent);
  --venn-biz: var(--accent-2);
  --venn-tech: var(--accent-3);
  --color-success: #2d7a4f;
  --color-warning: #b87820;
  --color-danger: #c0392b;
  --color-danger-bg: #fef2f2;
  /* Case-study image placeholder, derived from the accent so it tracks the brand.
     Faint accent fill, dashed accent border, dimmed accent icon. */
  --img-ph-fill: color-mix(in srgb, var(--accent) 7%, transparent);
  --img-ph-border: color-mix(in srgb, var(--accent-dim) 45%, transparent);
  --img-ph-icon: var(--accent-dim);
  /* Dark stage for mobile / low-contrast media (see .image-block--canvas-dark): a warm
     near-black from the dark palette, so a white-background screenshot reads as a phone
     screen on a dark stage in BOTH themes. */
  --media-canvas-dark: #211f1c;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", "Courier New", monospace;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 2.75rem;
  --text-2xl: 3.25rem;
  --text-3xl: 4rem;
  --text-4xl: 5rem;
  --text-5xl: 6.5rem;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --max-w: 1200px;
  --max-w-text: 720px;
  --col-gap: clamp(1.5rem, 4vw, 3rem);
  --r-sm: 3px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-mid: 300ms;
  --dur-slow: 600ms;
  --shadow-sm:
    0 1px 3px rgba(26, 25, 22, 0.06), 0 1px 2px rgba(26, 25, 22, 0.04);
  --shadow-md:
    0 4px 16px rgba(26, 25, 22, 0.08), 0 2px 6px rgba(26, 25, 22, 0.05);
  --shadow-lg:
    0 12px 40px rgba(26, 25, 22, 0.1), 0 4px 12px rgba(26, 25, 22, 0.06);
}

/* .preview-dark permite previsualizar los tokens de dark mode en cualquier
   contenedor sin activar el tema globalmente (usado en styleguide.html) */
html.theme-dark,
.preview-dark {
  --bg: #141311;
  --bg-alt: #1c1b18;
  --bg-card: #211f1c;
  --surface: #2c2a26;
  --border: #383530;
  --border-subtle: #2a2825;
  --ink: #f0ede8;
  --ink-2: #d4d0c8;
  --ink-3: #98948b; /* a11y: >=4.5:1 sobre los 4 fondos dark (ver :root) */
  --ink-4: #5c5a55;
  --accent: #7c4abf;
  --accent-ink: #b28ad9; /* a11y: acento-texto legible sobre fondos dark */
  --accent-dim: #a97ad4;
  --accent-pale: #ede0f7;
  --accent-2: #3d2a8f;
  --accent-3: #2a7a5c;
  --venn-user: #a97ad4;
  --venn-biz: #8b7fe0;
  --venn-tech: #4da583;
  --color-success: #2d7a4f;
  --color-warning: #b87820;
  --color-danger: #c0392b;
  --color-danger-bg: #1f0a08;
  --img-ph-fill: color-mix(in srgb, var(--accent) 14%, transparent);
  --img-ph-border: color-mix(in srgb, var(--accent-dim) 40%, transparent);
  --img-ph-icon: var(--accent-dim);
  --media-canvas-dark: #2c2a26;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}