/* ══════════════════════════════════════════════════════════════════════════
   TuKomercio — Design Tokens (Sistema de Diseño v1)   ·  M0.4
   ──────────────────────────────────────────────────────────────────────────
   Fuente ÚNICA de verdad de la identidad visual. Inclúyelo en cualquier vista:
       <link rel="stylesheet" href="/assets/css/design-tokens.css">
   y usa las variables --tk-* (NO hardcodear colores/fuentes).

   Sistema oficial:
     · Logo:     /assets/img/tuko-logo.gif (esfera)
     · Wordmark: Orbitron   (SOLO para el logotipo "TuKomercio")
     · Títulos:  Sora
     · Texto:    Plus Jakarta Sans
   © 2024-2026 Carlos Eduardo Huérfano Bermúdez.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Orbitron:wght@400;500;700;800&display=swap');
/* Bootstrap Icons 1.13.1 (1.800+ íconos SVG, MIT) — disponibles como <i class="bi bi-..."></i> */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css');

:root{
  /* ── Marca · color ─────────────────────────────────────────────── */
  --tk-indigo:        #4F46E5;
  --tk-indigo-dark:   #4338CA;
  --tk-indigo-soft:   #EEF2FF;
  --tk-violet:        #7C3AED;
  --tk-grad-1:        #667eea;
  --tk-grad-2:        #764ba2;
  --tk-gradient:      linear-gradient(135deg, var(--tk-grad-1), var(--tk-grad-2));
  --tk-gradient-hero: linear-gradient(160deg, #f6f5ff 0%, #fdfcff 55%, #fff 100%);

  /* ── Neutros (slate) ───────────────────────────────────────────── */
  --tk-ink:      #0F172A;   /* texto principal */
  --tk-slate:    #475569;   /* texto secundario */
  --tk-slate-2:  #64748B;   /* texto terciario / muted */
  --tk-line:     #E7E9F0;   /* bordes/divisores */
  --tk-bg:       #F7F8FC;   /* fondo app */
  --tk-card:     #FFFFFF;   /* superficies */
  --tk-soft:     #F1F2F9;   /* superficies suaves */

  /* ── Superficies oscuras (login / studio) ──────────────────────── */
  --tk-dark:      #0F0F1A;
  --tk-dark-2:    #1E293B;
  --tk-dark-line: rgba(255,255,255,.10);
  --tk-on-dark:   #E4E4F0;

  /* ── Estados / acentos ─────────────────────────────────────────── */
  --tk-amber:    #F59E0B;
  --tk-wa:       #25D366;   /* WhatsApp */
  --tk-success:  #10B981;
  --tk-warning:  #F59E0B;
  --tk-danger:   #EF4444;
  --tk-success-soft: #D1FAE5;
  --tk-amber-soft:   #FEF3C7;

  /* ── Tipografía ────────────────────────────────────────────────── */
  --tk-font-wordmark: 'Orbitron', sans-serif;          /* solo el logotipo */
  --tk-font-display:  'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tk-font-ui:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tk-fs-d1: clamp(2rem, 6vw, 3.2rem);    /* display grande */
  --tk-fs-h1: clamp(1.7rem, 4.5vw, 2.5rem);
  --tk-fs-h2: clamp(1.35rem, 3vw, 1.8rem);
  --tk-fs-h3: 1.25rem;
  --tk-fs-body: 1rem;
  --tk-fs-sm: .9rem;
  --tk-fs-xs: .8rem;
  --tk-tracking-tight: -.02em;
  --tk-tracking-wordmark: .01em;

  /* ── Radios ────────────────────────────────────────────────────── */
  --tk-r-xs: 8px;
  --tk-r-sm: 12px;
  --tk-r:    16px;
  --tk-r-lg: 22px;
  --tk-r-pill: 999px;

  /* ── Sombras ───────────────────────────────────────────────────── */
  --tk-shadow:    0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(79,70,229,.14);
  --tk-shadow-lg: 0 1px 2px rgba(16,24,40,.04), 0 24px 60px -24px rgba(79,70,229,.22);
  --tk-shadow-hover: 0 8px 24px -6px rgba(79,70,229,.28);
  --tk-glow: 0 0 30px rgba(102,126,234,.55);

  /* ── Espaciado / layout ────────────────────────────────────────── */
  --tk-gap: 16px;
  --tk-pad: 20px;
  --tk-maxw: 1120px;

  /* ── Movimiento ────────────────────────────────────────────────── */
  --tk-ease: cubic-bezier(.4,0,.2,1);
  --tk-fast: .15s var(--tk-ease);
  --tk-med:  .25s var(--tk-ease);

  /* ── Z-index ───────────────────────────────────────────────────── */
  --tk-z-header: 50;
  --tk-z-modal: 1000;
  --tk-z-toast: 1500;
}

/* ── Utilidades opt-in (no afectan nada hasta que se usen) ─────────── */
.tk-wordmark{ font-family:var(--tk-font-wordmark); font-weight:800; letter-spacing:var(--tk-tracking-wordmark); }
.tk-display { font-family:var(--tk-font-display);  letter-spacing:var(--tk-tracking-tight); }
.tk-ui      { font-family:var(--tk-font-ui); }
.tk-gradient-text{
  background:var(--tk-gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.tk-btn-primary{
  font-family:var(--tk-font-ui); font-weight:700; color:#fff; border:none; cursor:pointer;
  background:var(--tk-gradient); border-radius:var(--tk-r-sm); padding:13px 22px;
  box-shadow:0 12px 24px -10px rgba(118,75,162,.6); transition:transform var(--tk-fast), filter var(--tk-fast);
}
.tk-btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.tk-card{ background:var(--tk-card); border:1px solid var(--tk-line); border-radius:var(--tk-r); box-shadow:var(--tk-shadow); }
.tk-logo{ object-fit:contain; filter:drop-shadow(0 4px 12px rgba(102,126,234,.5)); }

/* Accesibilidad: respeta a quien reduce el movimiento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}