/* ============================================================
   tokens.css — Design tokens (single source of truth)
   AutoTipTop · v1.0
   ------------------------------------------------------------
   La paleta de marca está PENDIENTE de cerrar con el cliente.
   Para repintar toda la web, basta cambiar el bloque "BRAND".
   El resto del sistema referencia siempre estas variables.
   ============================================================ */

:root {
  /* ---- BRAND (lo único a tocar al cambiar de paleta) ---- */
  --brand-accent:        #e8ff3b;   /* color de acento principal */
  --brand-accent-ink:    #0a0a0a;   /* texto sobre el acento (contraste AA) */
  --brand-accent-rgb:    232, 255, 59; /* mismo acento en RGB para rgba() */

  /* ---- Superficies (escala de oscuridad) ---- */
  --c-bg:        #0a0a0a;   /* fondo base de la página */
  --c-bg-alt:    #0d0d0d;   /* secciones alternas */
  --c-surface:   #1e1e1e;   /* tarjetas */
  --c-surface-2: #252525;   /* hover de tarjetas / inputs elevados */
  --c-surface-3: #111111;   /* inputs */
  --c-footer:    #060606;

  /* ---- Bordes ---- */
  --c-border:    #2a2a2a;
  --c-border-2:  #333333;
  --c-border-strong: #666666;

  /* ---- Texto ---- */
  --c-text:        #f5f3ef;   /* texto principal */
  --c-text-muted:  #aaaaaa;   /* párrafos secundarios */
  --c-text-dim:    #888888;   /* labels, metadatos */
  --c-text-faint:  #444444;   /* copyright, líneas finas */

  /* ---- Acento derivado (no tocar; deriva de BRAND) ---- */
  --c-accent:        var(--brand-accent);
  --c-accent-ink:    var(--brand-accent-ink);
  --c-accent-soft:   rgba(var(--brand-accent-rgb), 0.10);
  --c-accent-softer: rgba(var(--brand-accent-rgb), 0.07);
  --c-accent-line:   rgba(var(--brand-accent-rgb), 0.30);
  --c-accent-glow:   rgba(var(--brand-accent-rgb), 0.12);

  /* Acento usado como TEXTO/icono (en claro debe ser legible sobre fondo claro).
     En oscuro = el lima de marca; en claro = un olivo profundo de marca. */
  --c-accent-text:   var(--brand-accent);

  /* Superficies translúcidas / detalles dependientes del tema */
  --c-nav-bg:        rgba(10, 10, 10, 0.92);
  --c-step-num:      rgba(255, 255, 255, 0.04);

  /* ---- Estados semánticos ---- */
  --c-error:        #ff4d4d;
  --c-error-soft:   rgba(255, 77, 77, 0.12);
  --c-success:      #4dff91;
  --c-success-ink:  #0a0a0a;

  /* ---- Tipografía ---- */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --fw-body:    400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-display: 800;

  /* ---- Escala de espaciado (8px base) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---- Radios ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 8px 24px rgba(var(--brand-accent-rgb), 0.18);

  /* ---- Easings ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-std:      cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Duraciones ---- */
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-step:  260ms;
  --dur-slow:  600ms;

  /* ---- Layout ---- */
  --nav-h:        64px;
  --lang-h:       36px;
  --page-pad-x:   40px;
  --page-pad-x-m: 20px;
  --container-max: 1280px;

  /* ---- Z-index (escala clara, sin números mágicos sueltos) ---- */
  --z-base:     1;
  --z-sticky:   100;
  --z-nav:      110;
  --z-mobilebar: 120;
  --z-drawer:   200;
  --z-overlay:  190;
  --z-toast:    300;
}

/* ============================================================
   TEMA CLARO — solo redefine superficies, texto y detalles.
   El acento de marca (botones/badges) sigue siendo lima con
   texto oscuro; el acento-como-texto pasa a olivo legible.
   ============================================================ */
[data-theme="light"] {
  --c-bg:        #f6f4ef;
  --c-bg-alt:    #efece5;
  --c-surface:   #ffffff;
  --c-surface-2: #f0eee8;
  --c-surface-3: #f3f1eb;
  --c-footer:    #efece5;

  --c-border:        #e4e1d9;
  --c-border-2:      #d6d3ca;
  --c-border-strong: #b1aea4;

  --c-text:        #0f0e0c;
  --c-text-muted:  #4a4843;
  --c-text-dim:    #6e6b63;
  --c-text-faint:  #a8a59c;

  --c-accent-text: #3c4a00;

  --c-nav-bg:   rgba(246, 244, 239, 0.85);
  --c-step-num: rgba(0, 0, 0, 0.05);

  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-accent: 0 8px 24px rgba(var(--brand-accent-rgb), 0.45);
}

/* Respeta el modo de alto contraste / preferencias del SO si aplica */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-step: 0ms;
    --dur-slow: 0ms;
  }
}