/* ============================================================
   TCG Chile — Design System Tokens
   Fuente unica de verdad para colores, tipografia, espaciados,
   radios, sombras y transiciones del sitio.
   Creado: 2026-04-01
   Direccion estetica: Dark Marketplace Premium
   ============================================================ */

:root {
    /* ── Paleta base ── */
    --tcg-bg-base:        #0d0f14;
    --tcg-bg-surface:     #111318;
    --tcg-bg-card:        #181b22;
    --tcg-bg-elevated:    #1e2128;
    --tcg-bg-overlay:     rgba(13, 15, 20, 0.7);

    /* ── Bordes ── */
    --tcg-border:         #2a2e38;
    --tcg-border-subtle:  #22252e;
    --tcg-border-strong:  #3a3f4b;

    /* ── Acento principal (dorado) ── */
    --tcg-accent:         #c9a84c;
    --tcg-accent-light:   #f2c15c;
    --tcg-accent-bright:  #ffd97a;
    --tcg-accent-dark:    #a07e2e;
    --tcg-accent-muted:   rgba(201, 168, 76, 0.15);

    /* ── Purpura secundario ── */
    --tcg-purple:         #7f3cff;
    --tcg-purple-light:   #a06eff;
    --tcg-purple-muted:   rgba(127, 60, 255, 0.12);

    /* ── Semanticos ── */
    --tcg-success:        #22c55e;
    --tcg-success-muted:  rgba(34, 197, 94, 0.12);
    --tcg-danger:         #ef4444;
    --tcg-danger-muted:   rgba(239, 68, 68, 0.12);
    --tcg-warning:        #f59e0b;
    --tcg-warning-muted:  rgba(245, 158, 11, 0.12);
    --tcg-info:           #60a5fa;
    --tcg-info-muted:     rgba(96, 165, 250, 0.12);

    /* ── Texto ── */
    --tcg-text:           #e8e6e3;
    --tcg-text-secondary: #9ca3af;
    --tcg-text-muted:     #6b7280;
    --tcg-text-on-accent: #0d0f14;
    --tcg-text-link:      #60a5fa;
    --tcg-text-link-hover:#93c5fd;

    /* ── Tipografia ── */
    --tcg-font-sans:      'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --tcg-font-display:   'Cinzel', 'Marcellus', Georgia, serif;
    --tcg-font-mono:      'JetBrains Mono', 'Fira Code', monospace;

    /* Tamanos (escala modular ~1.25) */
    --tcg-text-xs:        0.75rem;    /* 12px */
    --tcg-text-sm:        0.875rem;   /* 14px */
    --tcg-text-base:      1rem;       /* 16px */
    --tcg-text-lg:        1.125rem;   /* 18px */
    --tcg-text-xl:        1.25rem;    /* 20px */
    --tcg-text-2xl:       1.5rem;     /* 24px */
    --tcg-text-3xl:       1.875rem;   /* 30px */
    --tcg-text-4xl:       2.25rem;    /* 36px */

    /* Pesos */
    --tcg-font-normal:    400;
    --tcg-font-medium:    500;
    --tcg-font-semibold:  600;
    --tcg-font-bold:      700;

    /* Line heights */
    --tcg-leading-tight:  1.2;
    --tcg-leading-normal: 1.5;
    --tcg-leading-relaxed:1.75;

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

    /* ── Border radius ── */
    --tcg-radius-sm:      4px;
    --tcg-radius-md:      8px;
    --tcg-radius-lg:      12px;
    --tcg-radius-xl:      16px;
    --tcg-radius-full:    9999px;

    /* ── Sombras ── */
    --tcg-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3);
    --tcg-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.4);
    --tcg-shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.5);
    --tcg-shadow-xl:      0 12px 40px rgba(0, 0, 0, 0.6);
    --tcg-shadow-accent:  0 4px 14px rgba(201, 168, 76, 0.2);
    --tcg-shadow-glow:    0 0 20px rgba(201, 168, 76, 0.12);

    /* ── Transiciones ── */
    --tcg-transition-fast:    150ms ease;
    --tcg-transition-normal:  200ms ease;
    --tcg-transition-slow:    300ms ease;
    --tcg-transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index ── */
    --tcg-z-dropdown:     100;
    --tcg-z-sticky:       200;
    --tcg-z-navbar:       300;
    --tcg-z-modal:        400;
    --tcg-z-toast:        500;

    /* ── Navbar ── */
    --tcg-navbar-bg:      linear-gradient(180deg, #0f1118 0%, #141720 100%);
    --tcg-navbar-height:  64px;

    /* ── Cards de producto ── */
    --tcg-card-bg:        var(--tcg-bg-card);
    --tcg-card-border:    var(--tcg-border);
    --tcg-card-radius:    var(--tcg-radius-lg);
    --tcg-card-hover-y:   -4px;
}