/* ============================================================
   Singular Things — Design System F0 · Design Tokens
   v1.1 · light-first · fuente única de verdad
   Marca (del logo): magenta #E40D7E · negro #1E1E1C · blanco.
   Tipografía: Geist (+ Geist Mono).
   Uso: enlazar antes de css/main.css · pegar en Elementor →
        Custom Code para disponer de las variables --st-* en widgets.
   ============================================================ */
:root{
  /* ---- Neutrales (warm-neutral, light-first) ---- */
  --st-ink-900:#1E1E1C; --st-ink-800:#2C2C2A; --st-ink-700:#3D3D3A;
  --st-ink-600:#565654; --st-ink-500:#6E6E6B; --st-ink-400:#8C8C88;
  --st-ink-300:#B6B6B2; --st-ink-200:#D9D9D5; --st-ink-100:#ECECEA;
  --st-ink-050:#F2F3F5; --st-white:#FFFFFF;

  /* Petróleo · solo secciones puntuales (premium/footer) */
  --st-petrol-900:#0F1420; --st-petrol-700:#1C2433;

  /* ---- Magenta · acción / marca ---- */
  --st-magenta-700:#990850; --st-magenta-600:#C00A6A; --st-magenta-500:#E40D7E;
  --st-magenta-400:#FF3D9E; --st-magenta-200:#FFA9D6; --st-magenta-050:#FFE7F4;

  /* ---- Estados (funcional, no marca) ---- */
  --st-success-500:#1FB57A; --st-warning-500:#F5A623; --st-error-500:#E5484D; --st-info-500:#2F6FED;

  /* ---- Semánticos · tema claro (por defecto) ---- */
  --st-bg:var(--st-white); --st-surface:var(--st-ink-050); --st-border:var(--st-ink-100);
  --st-text:var(--st-ink-900); --st-text-muted:var(--st-ink-600);
  --st-accent:var(--st-magenta-500); --st-accent-hover:var(--st-magenta-600);
  --st-on-accent:var(--st-white); --st-focus:var(--st-magenta-500);

  /* ---- Tipografía ---- */
  --st-font-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --st-font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --st-display:4rem; --st-h1:3rem; --st-h2:2.25rem; --st-h3:1.75rem; --st-h4:1.375rem; --st-h5:1.125rem;
  --st-body-l:1.125rem; --st-body:1rem; --st-body-s:0.875rem; --st-caption:0.8125rem; --st-kicker:0.75rem;

  /* ---- Spacing · base 8pt ---- */
  --st-space-1:0.25rem; --st-space-2:0.5rem; --st-space-3:0.75rem; --st-space-4:1rem;
  --st-space-5:1.5rem; --st-space-6:2rem; --st-space-7:2.5rem; --st-space-8:3rem;
  --st-space-9:4rem; --st-space-10:5rem; --st-space-11:6rem; --st-space-12:8rem;

  /* ---- Radios / sombras ---- */
  --st-radius-sm:6px; --st-radius-md:10px; --st-radius-lg:14px; --st-radius-xl:20px; --st-radius-pill:999px;
  --st-shadow-sm:0 1px 2px rgba(30,30,28,.06); --st-shadow-md:0 4px 12px rgba(30,30,28,.08); --st-shadow-lg:0 12px 32px rgba(30,30,28,.12);

  /* ---- Motion (criterio Emil Kowalski) ---- */
  --st-dur-fast:150ms; --st-dur:200ms; --st-dur-slow:300ms;            /* máx UI 300ms */
  --st-ease-standard:cubic-bezier(.4,0,.2,1);
  --st-ease-out:cubic-bezier(0,0,.2,1);                                /* entradas */
  --st-ease-emphasis:cubic-bezier(.2,.8,.2,1);
  --st-ease-reveal:cubic-bezier(.23,1,.32,1);                          /* reveals de scroll */

  /* ---- Grid / layout ---- */
  --st-container-max:1248px; --st-grid-cols:12; --st-grid-gutter:24px;
}

/* ---- Tema oscuro · solo secciones sobre petróleo ---- */
[data-theme="dark"]{
  --st-bg:var(--st-petrol-900); --st-surface:var(--st-petrol-700); --st-border:#28313F;
  --st-text:var(--st-white); --st-text-muted:#8B94A6;
  --st-accent:var(--st-magenta-400); --st-accent-hover:var(--st-magenta-200); --st-on-accent:var(--st-white);
}
/* Grid: Desktop 1440/12/g24/m96 (máx 1248) · Tablet 768/8/g16/m32 · Móvil 375/4/g16/m20 */