/* ===========================================================================
   tokens.css  ·  Sistema de diseño de Chanchito
   Blanco y negro de alto contraste. El acento casi no se usa: queda reservado
   para un único detalle por pantalla (punto de marca, dato vivo). Negros
   profundos aunque el relieve neuomórfico se vuelva más sutil.
   =========================================================================== */

:root {
  /* --- Tema claro (por defecto) --- */
  color-scheme: light;

  /* Lienzo claro, casi blanco */
  --bg: #ececee;
  --bg-sunken: #e4e4e7;
  --bg-elevated: #f7f7f8;

  /* Tinta: negro casi puro */
  --text: #0a0a0b;
  --text-soft: #44454c;
  --text-faint: #8a8b93;

  /* Bordes/separadores sutiles */
  --line: color-mix(in srgb, var(--text) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 22%, transparent);

  /* Luces y sombras del relieve neuomórfico */
  --shadow-light: #ffffff;
  --shadow-dark: #c3c4ca;

  /* Acento de marca: rosa del chanchito (fijo, no personalizable).
     En tema claro va más oscuro (rosa seco) para buen contraste. */
  --accent: #c14d68;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-contrast: #ffffff;

  /* Estados semánticos (se usan con mesura) */
  --danger: #d92d20;
  --success: #16794c;
  --warning: #b5820a;

  /* Radios */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* Tipografía */
  --font-sans: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* Escala mayor y más atrevida */
  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.1rem;
  --fs-2xl: 3rem;
  --fs-3xl: 4.2rem;
  --fs-4xl: 5.5rem;

  /* Pesos */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 700;

  /* Tracking */
  --tracking-tight: -0.04em;
  --tracking-tighter: -0.055em;
  --tracking-wide: 0.18em;

  /* Transiciones */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;

  /* Recetas neuomórficas (relieve hacia afuera / hundido) */
  --nm-raised: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
  --nm-raised-sm: 4px 4px 9px var(--shadow-dark), -4px -4px 9px var(--shadow-light);
  --nm-raised-lg: 12px 12px 28px var(--shadow-dark), -12px -12px 28px var(--shadow-light);
  --nm-inset: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
  --nm-inset-sm: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  --nm-pressed: inset 4px 4px 9px var(--shadow-dark), inset -4px -4px 9px var(--shadow-light);

  /* Anillo de foco: tinta (no acento) para mantener el B/N */
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Lienzo oscuro: negro profundo */
  --bg: #0a0a0b;
  --bg-sunken: #050506;
  --bg-elevated: #161618;

  /* Tinta: blanco casi puro */
  --text: #fafafa;
  --text-soft: #b4b5bd;
  --text-faint: #6c6d76;

  --line: color-mix(in srgb, var(--text) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 26%, transparent);

  /* Acento más claro en oscuro, cercano al rosa del chanchito */
  --accent: #ff9aa9;

  /* Relieve sutil sobre negro profundo (sacrificamos contraste de sombra
     a propósito para lograr negros más profundos) */
  --shadow-light: #1c1c20;
  --shadow-dark: #000000;

  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-contrast: #0a0a0b;

  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}