/* ═══════════════════════════════════════════════════════════════
   TOKENS.CSS — Design tokens de Tallermueblero Estudio Digital
   Toda variable de color, tipografía, espaciado y easing vive aquí.
   Ningún otro archivo CSS debe declarar valores "mágicos" sueltos.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Color — dark mode (default) ─────────────────────────── */
  --color-bg:          #030303;
  --color-surface:     #0d0d0d;
  --color-surface-2:   #141414;
  --color-surface-3:   #1c1c1c;
  --color-border:      #1f1f1f;
  --color-border-2:    #2a2a2a;

  --color-accent:      #f0a500;
  --color-accent-h:    #d4920a;
  --color-accent-dim:  rgba(240, 165, 0, 0.12);
  --color-accent-glow: rgba(240, 165, 0, 0.35);

  --color-text:        #f5f5f5;
  --color-text-2:      #999999;
  --color-text-3:      #555555;

  --color-success:     #22c55e;
  --color-danger:      #ef4444;
  --color-wa:          #25D366;

  /* Colores de marca de redes sociales (uso puntual en hover) */
  --color-tiktok:      #ffffff;
  --color-instagram:   #e1306c;
  --color-youtube:     #ff0000;
  --color-google-blue: #4285f4;
  --color-google-red:  #ea4335;
  --color-google-yellow:#fbbc05;
  --color-google-green:#34a853;

  /* ── Tipografía ───────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  3.75rem;
  --fs-5xl:  4.75rem;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.8;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* ── Espaciado (escala base 4px) ──────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max:  1280px;
  --container-pad:  1.25rem;
  --section-pad-y:  var(--space-24);

  /* ── Bordes y radios ──────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 999px;

  /* ── Sombras ──────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 40px var(--color-accent-glow);

  /* ── Transiciones ─────────────────────────────────────────── */
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ease-out:    cubic-bezier(.25, .46, .45, .94);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;
  --dur-slower: 800ms;

  /* ── Z-index ──────────────────────────────────────────────── */
  --z-base:        1;
  --z-header:      100;
  --z-cursor:      200;
  --z-admin:       300;
  --z-modal:       400;
  --z-toast:       500;
  --z-preloader:   600;

  /* ── Estado semántico (referencia; los breakpoints reales
       se definen como literales en responsive.css) ───────────── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}

/* ── Light mode — tono marfil cálido, premium y artesanal ─────── */
:root[data-theme="light"] {
  --color-bg:          #faf9f6;
  --color-surface:     #ffffff;
  --color-surface-2:   #f5f3ee;
  --color-surface-3:   #efece4;
  --color-border:      #e8e3d8;
  --color-border-2:    #ddd6c4;

  --color-accent:      #d4920a;
  --color-accent-h:    #b87c08;
  --color-accent-dim:  rgba(212, 146, 10, 0.10);
  --color-accent-glow: rgba(212, 146, 10, 0.25);

  --color-text:        #1a1712;
  --color-text-2:      #6b6559;
  --color-text-3:      #a39c8c;

  --shadow-sm: 0 2px 8px rgba(30, 25, 15, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 25, 15, 0.10);
  --shadow-lg: 0 16px 48px rgba(30, 25, 15, 0.14);
}

/* Respeta el modo del sistema cuando no hay preferencia guardada */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg:          #faf9f6;
    --color-surface:     #ffffff;
    --color-surface-2:   #f5f3ee;
    --color-surface-3:   #efece4;
    --color-border:      #e8e3d8;
    --color-border-2:    #ddd6c4;

    --color-accent:      #d4920a;
    --color-accent-h:    #b87c08;
    --color-accent-dim:  rgba(212, 146, 10, 0.10);
    --color-accent-glow: rgba(212, 146, 10, 0.25);

    --color-text:        #1a1712;
    --color-text-2:      #6b6559;
    --color-text-3:      #a39c8c;
  }
}