/* ═══════════════════════════════════════════════════════════════
   TruRanking Design Tokens
   Centralized design system variables for consistent styling
   Import this BEFORE style.css in all HTML files
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Brand Colors ─── */
    --tr-red: #ef4444;
    --tr-red-dark: #dc2626;
    --tr-red-light: rgba(239, 68, 68, 0.08);
    --tr-red-glow: rgba(239, 68, 68, 0.2);

    --tr-blue: #3b82f6;
    --tr-blue-dark: #2563eb;
    --tr-blue-light: rgba(59, 130, 246, 0.08);
    --tr-blue-glow: rgba(59, 130, 246, 0.2);

    /* ─── Header / Navigation ─── */
    --tr-header-from: #1a1f2e;
    --tr-header-to: #232838;
    --tr-nav-bg: #232838;
    --tr-nav-border: #2d3348;

    /* ─── Semantic Colors ─── */
    --tr-success: #10b981;
    --tr-success-dark: #059669;
    --tr-success-light: rgba(16, 185, 129, 0.08);

    --tr-warning: #f59e0b;
    --tr-warning-dark: #d97706;
    --tr-warning-light: rgba(245, 158, 11, 0.08);

    --tr-danger: #ef4444;
    --tr-danger-light: rgba(239, 68, 68, 0.08);

    /* ─── Amber / Best Bets / Featured ─── */
    --tr-amber: #f59e0b;
    --tr-amber-dark: #d97706;
    --tr-amber-light: rgba(245, 158, 11, 0.06);
    --tr-amber-glow: rgba(245, 158, 11, 0.15);

    /* ─── Text Colors ─── */
    --tr-text-primary: #1e293b;
    --tr-text-secondary: #64748b;
    --tr-text-muted: #94a3b8;
    --tr-text-faint: #cbd5e1;

    /* ─── Backgrounds ─── */
    --tr-bg-page: #f8fafc;
    --tr-bg-card: #ffffff;
    --tr-bg-card-alt: rgba(248, 250, 252, 0.4);
    --tr-bg-elevated: #ffffff;

    /* ─── Borders ─── */
    --tr-border: #e2e8f0;
    --tr-border-light: #f1f5f9;
    --tr-border-hover: #cbd5e1;

    /* ─── Shadows ─── */
    --tr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --tr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --tr-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
    --tr-shadow-xl: 0 14px 35px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);

    /* ─── Border Radius ─── */
    --tr-radius-sm: 6px;
    --tr-radius-md: 10px;
    --tr-radius-lg: 14px;
    --tr-radius-xl: 18px;
    --tr-radius-full: 9999px;

    /* ─── Spacing (4px grid) ─── */
    --tr-space-1: 4px;
    --tr-space-2: 8px;
    --tr-space-3: 12px;
    --tr-space-4: 16px;
    --tr-space-5: 20px;
    --tr-space-6: 24px;
    --tr-space-8: 32px;
    --tr-space-10: 40px;
    --tr-space-12: 48px;

    /* ─── Typography ─── */
    --tr-font-sans: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tr-text-xs: 0.7rem;
    --tr-text-sm: 0.8125rem;
    --tr-text-base: 0.875rem;
    --tr-text-lg: 1rem;
    --tr-text-xl: 1.25rem;
    --tr-text-2xl: 1.5rem;
    --tr-text-3xl: 2rem;

    /* ─── Transitions ─── */
    --tr-transition-fast: 150ms ease-out;
    --tr-transition-normal: 200ms ease-out;
    --tr-transition-slow: 300ms ease-out;

    /* ─── Percentile Color Coding (for metric cells) ─── */
    --tr-pct-top: #059669;       /* top 10% */
    --tr-pct-high: #10b981;      /* top 25% */
    --tr-pct-mid: var(--tr-text-primary);  /* middle 50% */
    --tr-pct-low: #ea580c;       /* bottom 25% */
    --tr-pct-bottom: #dc2626;    /* bottom 10% */

    --tr-pct-top-bg: rgba(16, 185, 129, 0.08);
    --tr-pct-high-bg: rgba(16, 185, 129, 0.05);
    --tr-pct-low-bg: rgba(234, 88, 12, 0.06);
    --tr-pct-bottom-bg: rgba(220, 38, 38, 0.06);

    /* ─── Page-specific accent gradients ─── */
    --tr-accent-rankings: linear-gradient(180deg, rgba(239, 68, 68, 0.04) 0%, transparent 200px);
    --tr-accent-predictions: linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, transparent 200px);
    --tr-accent-brackets: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, transparent 200px);
    --tr-accent-tourney: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, transparent 200px);
    --tr-accent-pool: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, transparent 200px);
}

/* ═══════════════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════════════ */

@keyframes tr-fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes tr-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes tr-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.1); }
}

@keyframes tr-top-pick-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes tr-bar-grow {
    from { width: 0; }
}

.tr-fade-in-up {
    animation: tr-fade-in-up 0.4s ease-out forwards;
    opacity: 0;
}

.tr-shimmer-bg {
    background: linear-gradient(
        90deg,
        rgba(245, 158, 11, 0.03) 0%,
        rgba(245, 158, 11, 0.08) 25%,
        rgba(217, 119, 6, 0.04) 50%,
        rgba(245, 158, 11, 0.08) 75%,
        rgba(245, 158, 11, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: tr-shimmer 6s ease-in-out infinite;
}

.tr-glow-pulse {
    animation: tr-glow-pulse 3s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════════════════════════ */

/* 3D tilt card base */
.tr-card-3d {
    transition: transform var(--tr-transition-normal), box-shadow var(--tr-transition-slow);
    transform: perspective(800px) rotateY(-0.8deg) rotateX(1.2deg);
    will-change: transform;
}
.tr-card-3d:hover {
    transform: perspective(800px) rotateY(0deg) rotateX(0deg) translateZ(4px) scale(1.01);
    box-shadow: var(--tr-shadow-lg);
}

/* Page-specific accent gradient backgrounds — applied to body or main content */
body.predictions-page { background-image: var(--tr-accent-predictions); background-color: var(--tr-bg-page); }
body.trubrackets-page { background-image: var(--tr-accent-brackets); background-color: var(--tr-bg-page); }
body.trutourney-page { background-image: var(--tr-accent-tourney); background-color: var(--tr-bg-page); }
body.pool-page { background-image: var(--tr-accent-pool); background-color: var(--tr-bg-page); }
/* Rankings (index.html) doesn't have a body class, so use the main-content-area */
.main-content-area { background-image: var(--tr-accent-rankings); }

/* Efficiency margin color classes (used by SSR) */
.eff-margin-positive { color: var(--tr-success); }
.eff-margin-negative { color: var(--tr-red); }

/* Scrollbar hide */
.tr-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.tr-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hover lift */
.tr-hover-lift {
    transition: transform var(--tr-transition-normal), box-shadow var(--tr-transition-slow);
}
.tr-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--tr-shadow-lg);
}

/* Active sort column highlight */
.tr-sort-active {
    background: rgba(59, 130, 246, 0.25) !important;
}

/* About page collapsible pill */
.tr-about-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--tr-radius-full);
    font-size: var(--tr-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tr-transition-fast);
    background: var(--tr-bg-card);
    color: var(--tr-text-secondary);
    border: 1px solid var(--tr-border);
}
.tr-about-pill:hover,
.tr-about-pill[open] {
    background: var(--tr-blue-light);
    color: var(--tr-blue);
    border-color: var(--tr-blue);
}
.tr-about-content {
    margin-top: var(--tr-space-2);
    background: var(--tr-bg-card);
    border: 1px solid var(--tr-border-light);
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-4);
    box-shadow: var(--tr-shadow-sm);
    font-size: var(--tr-text-sm);
    color: var(--tr-text-secondary);
    line-height: 1.6;
}

/* Top Pick badge */
.tr-top-pick-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--tr-radius-full);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: linear-gradient(135deg, var(--tr-red), var(--tr-red-dark));
    animation: tr-top-pick-pulse 2s ease-in-out infinite;
    box-shadow: 0 2px 6px var(--tr-red-glow);
}

/* Outcome badges */
.tr-badge-win {
    background: var(--tr-success-light);
    color: var(--tr-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.tr-badge-loss {
    background: var(--tr-danger-light);
    color: var(--tr-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.tr-badge-push {
    background: var(--tr-warning-light);
    color: var(--tr-warning-dark);
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.tr-badge-win,
.tr-badge-loss,
.tr-badge-push {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: var(--tr-radius-full);
    font-size: 0.65rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Lucide Icon Defaults
   ═══════════════════════════════════════════════════════════════ */

[data-lucide] {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    display: inline-block;
    stroke-width: 2.5;
}

.rating-arrow [data-lucide] {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

.hero-card-trend [data-lucide] {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

.tier-chevron [data-lucide] {
    width: 14px;
    height: 14px;
    transition: transform var(--tr-transition-fast);
}

.mover-delta [data-lucide],
.movers-column-header [data-lucide] {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.data-flow-arrow [data-lucide] {
    width: 20px;
    height: 20px;
}