/*
 * TrendingPunjabi - Canonical CSS Variables
 * Single source of truth for all design tokens
 * v1.0 - March 2026
 */

/* ==========================================
   DARK THEME (Default)
   ========================================== */
:root {
  /* Colors - Primary palette */
  --tp-bg-body: #0d1117;
  --tp-bg-card: #161b22;
  --tp-bg-elevated: #1c2128;
  --tp-bg-input: #0d1117;
  --tp-bg-surface: #12121a;

  /* Text */
  --tp-text-primary: #e6edf3;
  --tp-text-secondary: #8b949e;
  --tp-text-muted: #848d97; /* Fixed: was #6e7681, now meets WCAG AA 4.5:1 */

  /* Accent - Gold */
  --tp-accent: #e8b84a;
  --tp-accent-hover: #d4a53f;
  --tp-accent-soft: rgba(232, 184, 74, 0.15);
  --tp-accent-glow: rgba(232, 184, 74, 0.12);

  /* Semantic */
  --tp-link: #58a6ff;
  --tp-success: #3fb950;
  --tp-danger: #f85149;
  --tp-warning: #d29922;

  /* Borders */
  --tp-border: #30363d;
  --tp-border-light: #21262d;

  /* Shadows */
  --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --tp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --tp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Table */
  --tp-table-header: #161b22;
  --tp-table-row-odd: #0d1117;
  --tp-table-row-even: #161b22;
  --tp-table-hover: rgba(232, 184, 74, 0.08);

  /* Data colors */
  --tp-color-views: #4ecdc4;
  --tp-color-rating: #ffc107;
  --tp-color-likes: #7ee787;
  --tp-color-rank: #e8b84a;
  --tp-color-song: #e8b84a;
  --tp-color-artist: #e6edf3;

  /* Rank medals */
  --tp-gold: linear-gradient(135deg, #fbbf24, #f59e0b);
  --tp-silver: linear-gradient(135deg, #9ca3af, #6b7280);
  --tp-bronze: linear-gradient(135deg, #d97706, #b45309);

  /* Spacing scale */
  --tp-space-xs: 4px;
  --tp-space-sm: 8px;
  --tp-space-md: 16px;
  --tp-space-lg: 24px;
  --tp-space-xl: 32px;
  --tp-space-2xl: 48px;
  --tp-space-3xl: 64px;

  /* Border radius */
  --tp-radius-sm: 6px;
  --tp-radius-md: 10px;
  --tp-radius-lg: 14px;
  --tp-radius-xl: 20px;
  --tp-radius-full: 9999px;

  /* Typography */
  --tp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tp-font-size-xs: 0.7rem;
  --tp-font-size-sm: 0.8rem;
  --tp-font-size-base: 0.9rem;
  --tp-font-size-md: 1rem;
  --tp-font-size-lg: 1.15rem;
  --tp-font-size-xl: 1.4rem;
  --tp-font-size-2xl: 1.8rem;
  --tp-font-size-3xl: 2.2rem;

  /* Transitions */
  --tp-transition-fast: 0.15s ease;
  --tp-transition: 0.2s ease;
  --tp-transition-slow: 0.3s ease;

  /* Navbar */
  --tp-navbar-bg: rgba(10, 10, 15, 0.97);
  --tp-navbar-border: rgba(255, 255, 255, 0.08);
  --tp-dropdown-bg: #12121a;
  --tp-bottom-nav-bg: rgba(10, 10, 15, 0.98);
}

/* ==========================================
   LIGHT THEME
   ========================================== */
[data-theme="light"] {
  --tp-bg-body: #ffffff;
  --tp-bg-card: #f6f8fa;
  --tp-bg-elevated: #ffffff;
  --tp-bg-input: #ffffff;
  --tp-bg-surface: #f6f8fa;

  --tp-text-primary: #1f2328;
  --tp-text-secondary: #656d76;
  --tp-text-muted: #8b949e;

  --tp-accent: #b8860b;
  --tp-accent-hover: #a07608;
  --tp-accent-soft: rgba(184, 134, 11, 0.1);
  --tp-accent-glow: rgba(184, 134, 11, 0.08);

  --tp-link: #0969da;
  --tp-success: #1a7f37;
  --tp-danger: #cf222e;
  --tp-warning: #9a6700;

  --tp-border: #d1d9e0;
  --tp-border-light: #e6eaef;

  --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --tp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --tp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --tp-table-header: #f6f8fa;
  --tp-table-row-odd: #ffffff;
  --tp-table-row-even: #f8f8f8;
  --tp-table-hover: rgba(184, 134, 11, 0.06);

  --tp-color-views: #0d9488;
  --tp-color-rating: #d97706;
  --tp-color-likes: #16a34a;
  --tp-color-rank: #b8860b;
  --tp-color-song: #996b00;
  --tp-color-artist: #1f2328;

  --tp-navbar-bg: rgba(255, 255, 255, 0.98);
  --tp-navbar-border: #e5e5e5;
  --tp-dropdown-bg: #ffffff;
  --tp-bottom-nav-bg: rgba(255, 255, 255, 0.98);
}

/* ==========================================
   FOCUS INDICATORS (Accessibility)
   ========================================== */
:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}