/* ========================================
   THENETWORK COLOR PALETTE
   Centralized color variables for light and dark modes
   ======================================== */

/* ========================================
   LIGHT MODE (Default)
   ======================================== */
:root {
    /* === Primary Accent Colors === */
    --tn-primary: #ff9c00;           /* Orange - main accent */
    --tn-secondary: #14947c;         /* Teal - secondary accent */
    --tn-tertiary: #FF3D00;          /* Red-Orange - tertiary accent */
    
    /* === Background Colors === */
    --tn-bg-base: #ffffff;           /* Main page background */
    --tn-bg-primary: #ffffff;        /* Primary containers */
    --tn-bg-secondary: #f5f5f5;      /* Secondary containers */
    --tn-bg-elevated: #ffffff;       /* Elevated elements (cards, modals) */
    --tn-bg-hover: #f9f9f9;          /* Hover state backgrounds */
    --tn-bg-input: #ffffff;          /* Input field backgrounds */
    
    /* === Text Colors === */
    --tn-text-primary: #333333;      /* Main text */
    --tn-text-secondary: #666666;    /* Secondary text */
    --tn-text-muted: #999999;        /* Muted/placeholder text */
    --tn-text-inverse: #ffffff;      /* Text on dark backgrounds */
    
    /* === Link Colors === */
    --tn-link: #ff9c00;              /* Default links - ORANGE */
    --tn-link-hover: #cc7a00;        /* Link hover state - DARKER ORANGE */
    --tn-link-visited: #7c3aed;      /* Visited links */
    
    /* === Border Colors === */
    --tn-border: #dddddd;            /* Default borders */
    --tn-border-light: #eeeeee;      /* Light borders */
    --tn-border-focus: #ff9c00;      /* Focused input borders - ORANGE */
    
    /* === Standardized Border === */
    --tn-border-radius: 8px;
    --tn-border-style: 1px solid var(--tn-border);
    
    /* === Status Colors === */
    --tn-success: #22c55e;           /* Success states */
    --tn-success-bg: #d4edda;        /* Success backgrounds */
    --tn-error: #ef4444;             /* Error states */
    --tn-error-bg: #f8d7da;          /* Error backgrounds */
    --tn-warning: #ffc107;           /* Warning states */
    --tn-warning-bg: #fff3cd;        /* Warning backgrounds */
    --tn-info: #4285f4;              /* Info states */
    --tn-info-bg: #cce5ff;           /* Info backgrounds */
    
    /* === UI Component Colors === */
    --tn-btn-primary-bg: var(--tn-primary);
    --tn-btn-primary-text: #000000;
    --tn-btn-secondary-bg: #e8e8e8;
    --tn-btn-secondary-text: #333333;
    
    /* === Category/Badge Colors === */
    --tn-badge-bg: #ffe8cc;
    --tn-badge-text: #cc7a00;
    
    /* === Loader Animation Colors === */
    --tn-loader-outer: var(--tn-secondary);   /* Teal outer ring */
    --tn-loader-middle: var(--tn-tertiary);   /* Red-orange middle ring */
    --tn-loader-inner: var(--tn-primary);     /* Orange inner ring */
    
    /* === Torrent/File Status Colors === */
    --tn-seeds: #22c55e;             /* Seeders (green) */
    --tn-leeches: #ef4444;           /* Leechers (red) */
    --tn-magnet: #7c3aed;            /* Magnet links (purple) */
    --tn-torrent: #9334e6;           /* Torrent files (purple) */
    
    /* === Gradient Definitions === */
    --tn-gradient-primary: linear-gradient(135deg, var(--tn-primary) 0%, var(--tn-tertiary) 100%);
    --tn-gradient-answer: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    
    /* === Shadow Definitions === */
    --tn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --tn-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --tn-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================
   DARK MODE (Neutral Grays - No Blue)
   ======================================== */
:root.theme-dark {
    /* === Primary Accent Colors (same as light) === */
    --tn-primary: #ff9c00;           /* Orange - main accent */
    --tn-secondary: #14947c;         /* Teal - secondary accent */
    --tn-tertiary: #FF3D00;          /* Red-Orange - tertiary accent */
    
    /* === Background Colors (Neutral Grays) === */
    --tn-bg-base: #18181b;           /* Main page background - zinc-900 */
    --tn-bg-primary: #1f1f23;        /* Primary containers */
    --tn-bg-secondary: #27272a;      /* Secondary containers - zinc-800 */
    --tn-bg-elevated: #2d2d32;       /* Elevated elements (cards, modals) */
    --tn-bg-hover: #3f3f46;          /* Hover state backgrounds - zinc-700 */
    --tn-bg-input: #27272a;          /* Input field backgrounds */
    
    /* === Text Colors === */
    --tn-text-primary: #fafafa;      /* Main text - zinc-50 */
    --tn-text-secondary: #a1a1aa;    /* Secondary text - zinc-400 */
    --tn-text-muted: #71717a;        /* Muted/placeholder text - zinc-500 */
    --tn-text-inverse: #18181b;      /* Text on light backgrounds */
    
    /* === Link Colors (Amber to match orange theme) === */
    --tn-link: #fbbf24;              /* Default links - amber-400 */
    --tn-link-hover: #fcd34d;        /* Link hover state - amber-300 */
    --tn-link-visited: #c084fc;      /* Visited links - purple-400 */
    
    /* === Border Colors (Neutral Grays) === */
    --tn-border: #3f3f46;            /* Default borders - zinc-700 */
    --tn-border-light: #27272a;      /* Light borders - zinc-800 */
    --tn-border-focus: var(--tn-primary); /* Focused input borders - orange */
    
    /* === Status Colors === */
    --tn-success: #4ade80;           /* Success states - green-400 */
    --tn-success-bg: #14532d;        /* Success backgrounds */
    --tn-error: #f87171;             /* Error states - red-400 */
    --tn-error-bg: #450a0a;          /* Error backgrounds */
    --tn-warning: #fbbf24;           /* Warning states - amber-400 */
    --tn-warning-bg: #451a03;        /* Warning backgrounds */
    --tn-info: #60a5fa;              /* Info states - blue-400 */
    --tn-info-bg: #27272a;           /* Info backgrounds - gray */
    
    /* === UI Component Colors === */
    --tn-btn-primary-bg: var(--tn-primary);
    --tn-btn-primary-text: #18181b;
    --tn-btn-secondary-bg: #3f3f46;
    --tn-btn-secondary-text: #fafafa;
    
    /* === Category/Badge Colors === */
    --tn-badge-bg: #3f3f46;
    --tn-badge-text: #fbbf24;
    
    /* === Loader Animation Colors (same as light) === */
    --tn-loader-outer: var(--tn-secondary);   /* Teal outer ring */
    --tn-loader-middle: var(--tn-tertiary);   /* Red-orange middle ring */
    --tn-loader-inner: var(--tn-primary);     /* Orange inner ring */
    
    /* === Torrent/File Status Colors === */
    --tn-seeds: #4ade80;             /* Seeders (green) */
    --tn-leeches: #f87171;           /* Leechers (red) */
    --tn-magnet: #c084fc;            /* Magnet links (purple) */
    --tn-torrent: #a78bfa;           /* Torrent files (purple) */
    
    /* === Gradient Definitions === */
    --tn-gradient-primary: linear-gradient(135deg, var(--tn-primary) 0%, var(--tn-tertiary) 100%);
    --tn-gradient-answer: linear-gradient(135deg, #27272a 0%, #18181b 100%);
    
    /* === Shadow Definitions === */
    --tn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --tn-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --tn-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ========================================
   SOCIAL/BRAND COLORS (Constant)
   These don't change between light/dark modes
   ======================================== */
:root,
:root.theme-dark {
    /* Social Media Brand Colors */
    --tn-brand-youtube: #ff0000;
    --tn-brand-twitter: #000000;
    --tn-brand-facebook: #1877f2;
    --tn-brand-instagram: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    --tn-brand-spotify: #1db954;
    --tn-brand-soundcloud: #ff5500;
    --tn-brand-github: #24292e;
    --tn-brand-linkedin: #0077b5;
    --tn-brand-discord: #5865f2;
    --tn-brand-twitch: #9146ff;
    --tn-brand-reddit: #ff4500;
    --tn-brand-tiktok: #000000;
    --tn-brand-wikipedia: #000000;
    --tn-brand-wikidata: #006699;
    --tn-brand-musicbrainz: #eb743b;
    --tn-brand-imdb: #f5c518;
    
    /* Google Colors */
    --tn-google-blue: #4285f4;
    --tn-google-green: #34a853;
    --tn-google-yellow: #f4b400;
    --tn-google-red: #ea4335;
}