/* ==========================================================================
   ANSELTRONICA — Design tokens
   Sistema visual: laboratorio, precisión, ingeniería aplicada, educación.
   Tema claro: blanco técnico + verde limón instrumental + verde profundo.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Color: superficies ------------------------------------------------ */
  --c-void: #eef4e0;
  --c-bg: #fbfdf6;
  --c-surface-1: #ffffff;
  --c-surface-2: #f4f8e9;
  --c-surface-3: #e8f0d5;
  --c-surface-glass: rgba(255, 255, 255, 0.82);

  /* --- Color: texto ------------------------------------------------------ */
  --c-text: #1a2413;
  --c-text-soft: #4b5840;
  --c-text-muted: #6f7d5e;

  /* --- Color: bordes ----------------------------------------------------- */
  --c-border: rgba(58, 82, 32, 0.14);
  --c-border-strong: rgba(58, 82, 32, 0.26);
  --c-border-accent: rgba(101, 163, 13, 0.45);

  /* --- Color: marca ------------------------------------------------------ */
  --c-primary: #4d7c0f;
  --c-primary-soft: #65a30d;
  --c-primary-deep: #365314;
  --c-accent: #84cc16;
  --c-accent-soft: #bef264;
  --c-accent-deep: #4d7c0f;
  --c-energy: #f59e0b;
  --c-danger: #dc2626;
  --c-success: #16a34a;

  /* --- Color: gradientes ------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, #a3e635 0%, #65a30d 55%, #365314 100%);
  --grad-accent: linear-gradient(120deg, #bef264, #84cc16);
  --grad-energy: linear-gradient(120deg, #fcd34d, #f59e0b);
  --grad-surface: linear-gradient(160deg, rgba(132, 204, 22, 0.12), rgba(101, 163, 13, 0.05) 42%, transparent 78%);
  --grad-text: linear-gradient(100deg, #14210a 4%, #3f6212 45%, #65a30d 95%);

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --fs-eyebrow: 0.75rem;
  --fs-label: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-body: clamp(0.975rem, 0.94rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h3: clamp(1.1875rem, 1.09rem + 0.5vw, 1.4375rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.5vw, 2.5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 3.2vw, 3.9rem);
  --fs-hero: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  --fs-display: clamp(3.4rem, 2rem + 7vw, 7.5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-heading: 1.16;
  --lh-body: 1.68;

  --ls-eyebrow: 0.16em;
  --ls-tight: -0.02em;
  --ls-tighter: -0.035em;

  /* --- Espaciado (escala fluida) ----------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 880px;
  --container-wide: 1440px;

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

  /* --- Sombras ----------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(24, 40, 12, 0.06);
  --sh-md: 0 12px 28px -16px rgba(24, 40, 12, 0.2);
  --sh-lg: 0 26px 56px -30px rgba(24, 40, 12, 0.26);
  --sh-xl: 0 40px 84px -42px rgba(24, 40, 12, 0.3);
  --sh-glow: 0 0 0 1px rgba(132, 204, 22, 0.3), 0 22px 60px -28px rgba(132, 204, 22, 0.45);
  --sh-glow-primary: 0 16px 38px -18px rgba(101, 163, 13, 0.45);

  /* --- Movimiento -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.6, 0.02, 0.2, 1);
  --ease-spring: cubic-bezier(0.32, 1.4, 0.5, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 520ms;

  /* --- Capas ------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 90;
  --z-drawer: 100;
  --z-toast: 120;

  /* --- Detalles técnicos -------------------------------------------------- */
  --grid-line: rgba(101, 163, 13, 0.075);
  --grid-size: 56px;
  --header-h: 74px;
}