/* ========================================================
   TIKLIVE GAMES DESIGN SYSTEM - css/design-system.css
   ======================================================== */

:root {
    /* 1. DESIGN TOKENS - CORES */
    --color-primary: #8a2be2;         /* Roxo Neon */
    --color-primary-hover: #9d4edd;
    --color-secondary: #00ffff;       /* Ciano Neon */
    --color-secondary-hover: #33ffff;
    --color-success: #39ff14;         /* Verde Neon */
    --color-success-hover: #54ff3c;
    --color-warning: #ffaa00;
    --color-warning-hover: #ffbb33;
    --color-danger: #ff007f;          /* Rosa Pink/Vermelho Neon */
    --color-danger-hover: #ff3399;
    --color-info: #00bfff;
    --color-info-hover: #33ccff;
    
    --color-bg: #0b0c10;
    --color-surface: #1f2833;
    --color-card: #121824;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-focus: var(--color-primary);
    
    --color-text-primary: #ffffff;
    --color-text-secondary: #c5c6c7;
    --color-text-muted: #66fcf1;
    --color-text-disabled: #4e5d6c;
    
    --color-disabled-bg: #1a1f29;
    --color-disabled-border: rgba(255, 255, 255, 0.03);

    /* 2. DESIGN TOKENS - ESPACAMENTOS */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-64: 64px;
    --spacing-80: 80px;
    --spacing-96: 96px;

    /* 3. DESIGN TOKENS - BORDAS */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-pill: 9999px;
    --border-radius-circle: 50%;

    /* 4. DESIGN TOKENS - SOMBRAS (GLOW EFFECTS NEON) */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.6);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.7);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.8), 0 0 15px rgba(138, 43, 226, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.9), 0 0 30px rgba(0, 255, 255, 0.4);

    /* 5. DESIGN TOKENS - FONTS (TYPOGRAPHY) */
    --font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ========================================================
   REGRAS DE TIPOGRAFIA
   ======================================================== */
.font-display { font-family: var(--font-family); font-size: 3.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.font-h1      { font-family: var(--font-family); font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.font-h2      { font-family: var(--font-family); font-size: 2rem; font-weight: 700; line-height: 1.3; }
.font-h3      { font-family: var(--font-family); font-size: 1.75rem; font-weight: 600; line-height: 1.4; }
.font-h4      { font-family: var(--font-family); font-size: 1.5rem; font-weight: 600; line-height: 1.4; }
.font-h5      { font-family: var(--font-family); font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
.font-h6      { font-family: var(--font-family); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.font-subtitle { font-family: var(--font-family); font-size: 1.1rem; font-weight: 400; line-height: 1.6; color: var(--color-text-secondary); }
.font-body    { font-family: var(--font-family); font-size: 0.95rem; font-weight: 400; line-height: 1.6; color: var(--color-text-secondary); }
.font-small   { font-family: var(--font-family); font-size: 0.85rem; font-weight: 400; line-height: 1.5; }
.font-caption { font-family: var(--font-family); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.font-button  { font-family: var(--font-family); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* ========================================================
   COMPONENTE: BOTÕES
   ======================================================== */
.btn-ds {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    padding: var(--spacing-12) var(--spacing-24);
    border-radius: var(--border-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-ds:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Variações */
.btn-ds-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
}
.btn-ds-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
    transform: translateY(-1px);
}

.btn-ds-secondary {
    background: var(--color-secondary);
    color: #000;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}
.btn-ds-secondary:hover:not(:disabled) {
    background: var(--color-secondary-hover);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    transform: translateY(-1px);
}

.btn-ds-outline {
    background: transparent;
    border-color: var(--color-primary);
    color: #fff;
}
.btn-ds-outline:hover:not(:disabled) {
    background: rgba(138, 43, 226, 0.1);
    border-color: var(--color-primary-hover);
}

.btn-ds-ghost {
    background: transparent;
    color: var(--color-text-secondary);
}
.btn-ds-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.btn-ds:disabled {
    background: var(--color-disabled-bg);
    border-color: var(--color-disabled-border);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ========================================================
   COMPONENTE: INPUTS
   ======================================================== */
.input-ds {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-12) var(--spacing-16);
    color: #fff;
    font-family: var(--font-family);
    font-size: 0.95rem;
    transition: all 0.3s;
}
.input-ds:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
}

/* ========================================================
   COMPONENTE: CARDS
   ======================================================== */
.card-ds {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-24);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}
.card-ds:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ========================================================
   COMPONENTE: BADGES
   ======================================================== */
.badge-ds {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-12);
    border-radius: var(--border-radius-pill);
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.badge-ds-new   { background: rgba(0, 255, 255, 0.1); border-color: var(--color-secondary); color: var(--color-secondary); }
.badge-ds-promo { background: rgba(255, 0, 127, 0.1); border-color: var(--color-danger); color: var(--color-danger); }
.badge-ds-free  { background: rgba(57, 255, 20, 0.1); border-color: var(--color-success); color: var(--color-success); }

/* ========================================================
   COMPONENTE: ALERTAS
   ======================================================== */
.alert-ds {
    padding: var(--spacing-16) var(--spacing-20);
    border-radius: var(--border-radius-md);
    border-left: 4px solid transparent;
    font-family: var(--font-family);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-16);
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
}
.alert-ds-success { background: rgba(57, 255, 20, 0.05); border-left-color: var(--color-success); color: #fff; }
.alert-ds-danger  { background: rgba(255, 0, 127, 0.05); border-left-color: var(--color-danger); color: #fff; }

/* ========================================================
   COMPONENTE: TIMELINE
   ======================================================== */
.timeline-ds {
    position: relative;
    border-left: 2px solid var(--color-border);
    padding-left: var(--spacing-24);
    margin-left: var(--spacing-8);
}
.timeline-item-ds {
    position: relative;
    margin-bottom: var(--spacing-32);
}
.timeline-item-ds::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid var(--color-bg);
    box-shadow: 0 0 8px var(--color-primary);
}

/* ========================================================
   ANIMAÇÕES REUTILIZÁVEIS
   ======================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.anim-fade { animation: fadeIn 0.3s ease-out forwards; }
.anim-scale { animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }