/* ============================================
   ROCKITALIA - COLOR DESIGN SYSTEM
   Light/Dark mode con variabili CSS complete
   ============================================ */

:root {
    --color-primary: #00d4ff;
    --color-secondary: #7c3aed;
    --color-accent: #ff006e;
    --color-background: #0a0e27;
    --color-card-bg: rgba(255, 255, 255, 0.05);
    --color-text: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-light: rgba(255, 255, 255, 0.05);


    /* RGB versioni per trasparenze */
    --color-primary-rgb: 0, 212, 255;
    --color-secondary-rgb: 124, 58, 237;
    --color-accent-rgb: 255, 0, 110;

    /* Primary Blue */
    --btn-primary-bg: #3b82f6;
    --btn-primary-hover: #2563eb;
    --btn-primary-active: #1d4ed8;
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: rgba(59, 130, 246, 0.3);

    /* Secondary Gray */
    --btn-secondary-bg: #6b7280;
    --btn-secondary-hover: #4b5563;
    --btn-secondary-active: #374151;
    --btn-secondary-text: #ffffff;
    --btn-secondary-shadow: rgba(107, 114, 128, 0.3);

    /* Success Green */
    --btn-success-bg: #10b981;
    --btn-success-hover: #059669;
    --btn-success-active: #047857;
    --btn-success-text: #ffffff;
    --btn-success-shadow: rgba(16, 185, 129, 0.3);

    /* Warning Yellow */
    --btn-warning-bg: #f59e0b;
    --btn-warning-hover: #d97706;
    --btn-warning-active: #b45309;
    --btn-warning-text: #ffffff;
    --btn-warning-shadow: rgba(245, 158, 11, 0.3);

    /* Danger Red */
    --btn-danger-bg: #ef4444;
    --btn-danger-hover: #dc2626;
    --btn-danger-active: #b91c1c;
    --btn-danger-text: #ffffff;
    --btn-danger-shadow: rgba(239, 68, 68, 0.3);

    /* Info Cyan */
    --btn-info-bg: #06b6d4;
    --btn-info-hover: #0891b2;
    --btn-info-active: #0e7490;
    --btn-info-text: #ffffff;
    --btn-info-shadow: rgba(6, 182, 212, 0.3);

    /* Light Neutral */
    --btn-light-bg: #f9fafb;
    --btn-light-hover: #f3f4f6;
    --btn-light-active: #e5e7eb;
    --btn-light-text: #374151;
    --btn-light-shadow: rgba(249, 250, 251, 0.5);

    /* Dark Neutral */
    --btn-dark-bg: #111827;
    --btn-dark-hover: #1f2937;
    --btn-dark-active: #374151;
    --btn-dark-text: #ffffff;
    --btn-dark-shadow: rgba(17, 24, 39, 0.4);

    /* Outline Primary */
    --btn-outline-primary-border: #3b82f6;
    --btn-outline-primary-text: #3b82f6;
    --btn-outline-primary-hover-bg: rgba(59, 130, 246, 0.1);

    /* Glassmorphism */
    --btn-glass-bg: #3b82f626;
    --btn-glass-hover: rgba(255, 255, 255, 0.2);
    --btn-glass-shadow: rgba(255, 255, 255, 0.1);

    /* 🔥 VARIABILI MANCANTI PER CANALI E COMPONENTI */
    --bg-secondary: var(--color-surface);
    --text-muted: var(--color-text-tertiary);

    /* Variabili aggiuntive per consistenza */
    --bg-primary: var(--color-background);
    --bg-tertiary: var(--color-surface-elevated);

    /* Stati interattivi */
    --bg-hover: var(--color-secondary);
    --bg-active: var(--color-secondary-active);

    /* Border aggiuntivi */
    --border-light: var(--color-border-light);
    --border-strong: var(--color-border-strong);

    /* Text variants */
    --text-secondary: var(--color-text-secondary);
    --text-inverse: var(--color-text-inverse);


    /* Home backgrounds */
    --home-bg-1: linear-gradient(135deg, #d8eafe 0%, #f5fafe 100%);
    --home-bg-2: linear-gradient(135deg, #fce6ec 0%, #ffeaf1 100%);
    --home-bg-3: linear-gradient(135deg, #fffbe6 0%, #f7fff0 100%);
    --home-bg-4: linear-gradient(135deg, #e6ffe9 0%, #e6f7ff 100%);
    --home-bg-5: linear-gradient(135deg, #ffe6e6 0%, #ffe9f7 100%);
    --home-bg-6: linear-gradient(135deg, #f2e6ff 0%, #e9e6ff 100%);
    --home-bg-7: linear-gradient(135deg, #f0edf9 0%, #eafae3 100%);
    --home-bg-8: linear-gradient(135deg, #e6f4fa 0%, #fbf8ff 100%);
    --home-bg-9: linear-gradient(135deg, #ffe6cb 0%, #ffecd2 100%);
    --home-bg-10: linear-gradient(135deg, #c7fafd 0%, #d4f0f5 100%);
    --home-bg-11: linear-gradient(135deg, #fff8e6 0%, #fdffe9 100%);
    --home-bg-12: linear-gradient(135deg, #e6fbff 0%, #fff5e3 100%);

    /* Body backgrounds */
    --body-bg-1: #f9fbfc;
    --body-bg-2: #fcf7f2;
    --body-bg-3: #f6fff7;
    --body-bg-4: #f2f6ff;
    --body-bg-5: #f1f1f8;
    --body-bg-6: #f7f3ff;
    --body-bg-7: #edf6fa;
    --body-bg-8: #f8faf5;
    --body-bg-9: #f5eee6;
    --body-bg-10: #efecff;
    --body-bg-11: #eff2f6;
    --body-bg-12: #fff9f5;

    /* Article backgrounds */
    --article-bg-1: #ffffff;
    --article-bg-2: #f4faff;
    --article-bg-3: #f6f9fa;
    --article-bg-4: #fefff2;
    --article-bg-5: #f5efff;
    --article-bg-6: #fff7fb;
    --article-bg-7: #fbffe4;
    --article-bg-8: #f0ebf9;
    --article-bg-9: #eef6ff;
    --article-bg-10: #f9f9ef;
    --article-bg-11: #ffe6f2;
    --article-bg-12: #e7fffa;

    /* Search backgrounds */
    --search-bg-1: #e6f0fa;
    --search-bg-2: #fff8e1;
    --search-bg-3: #e6fffb;
    --search-bg-4: #e6ffe8;
    --search-bg-5: #ffe6ec;
    --search-bg-6: #f2e6ff;
    --search-bg-7: #f6fdfa;
    --search-bg-8: #f4feff;
    --search-bg-9: #f8e6fe;
    --search-bg-10: #fbfcf8;
    --search-bg-11: #f6ffd8;
    --search-bg-12: #e7e8ff;

    /* Channel backgrounds */
    --channel-bg-1: linear-gradient(135deg, #8ec0e4 0%, #cfdae8 100%);
    --channel-bg-2: linear-gradient(135deg, #edb2ff 0%, #f0d6ff 100%);
    --channel-bg-3: linear-gradient(135deg, #fde5c7 0%, #ffe7cb 100%);
    --channel-bg-4: linear-gradient(135deg, #e1ffe2 0%, #d6fff7 100%);
    --channel-bg-5: linear-gradient(135deg, #ffecc7 0%, #f7c4ea 100%);
    --channel-bg-6: linear-gradient(135deg, #e1edff 0%, #d8eafe 100%);
    --channel-bg-7: linear-gradient(135deg, #b3f5fc 0%, #b8dafa 100%);
    --channel-bg-8: linear-gradient(135deg, #ffd8e7 0%, #f7e7ff 100%);
    --channel-bg-9: linear-gradient(135deg, #bff9e7 0%, #f7ffd8 100%);
    --channel-bg-10: linear-gradient(135deg, #d8c7ec 0%, #f5fafe 100%);
    --channel-bg-11: linear-gradient(135deg, #f4edc6 0%, #fbfae8 100%);
    --channel-bg-12: linear-gradient(135deg, #e7fff7 0%, #f3f3ff 100%);
    --footer-bg-1: linear-gradient(135deg, #eaf6fe 0%, #f0f7fa 100%);
    --footer-bg-2: linear-gradient(135deg, #ffe6f1 0%, #f8ecf8 100%);
    --footer-bg-3: linear-gradient(135deg, #fffde6 0%, #fffaf5 100%);
    --footer-bg-4: linear-gradient(135deg, #e6eaff 0%, #f6fbff 100%);
    --footer-bg-5: linear-gradient(135deg, #f7eafc 0%, #fee6f7 100%);
    --footer-bg-6: linear-gradient(135deg, #eeedff 0%, #eceff9 100%);
    --footer-bg-7: linear-gradient(135deg, #f0eee7 0%, #f6f1f5 100%);
    --footer-bg-8: linear-gradient(135deg, #eaf7ec 0%, #eef8ea 100%);
    --footer-bg-9: linear-gradient(135deg, #ffe6e9 0%, #fae7f8 100%);
    --footer-bg-10: linear-gradient(135deg, #eafff6 0%, #f5fcfa 100%);
    --footer-bg-11: linear-gradient(135deg, #eefff8 0%, #ffeef6 100%);
    --footer-bg-12: linear-gradient(135deg, #f8f7ff 0%, #eaf1ff 100%);

    /* Home text colors */
    --home-text-1: #22222a;
    --home-text-2: #353543;
    --home-text-3: #363650;
    --home-text-4: #205c45;
    --home-text-5: #262626;
    --home-text-6: #393943;
    --home-text-7: #3e3a36;
    --home-text-8: #305064;
    --home-text-9: #593e2c;
    --home-text-10: #3a5339;
    --home-text-11: #4a4b39;
    --home-text-12: #2a3a4a;

    /* Body text colors */
    --body-text-1: #262626;
    --body-text-2: #333333;
    --body-text-3: #2b2b2b;
    --body-text-4: #1f2536;
    --body-text-5: #343443;
    --body-text-6: #494949;
    --body-text-7: #212231;
    --body-text-8: #44444f;
    --body-text-9: #393939;
    --body-text-10: #678199;
    --body-text-11: #5c5c5c;
    --body-text-12: #292930;

    /* Article text colors */
    --article-text-1: #16171a;
    --article-text-2: #223354;
    --article-text-3: #252533;
    --article-text-4: #32324f;
    --article-text-5: #35365a;
    --article-text-6: #222643;
    --article-text-7: #192633;
    --article-text-8: #354131;
    --article-text-9: #304331;
    --article-text-10: #36394f;
    --article-text-11: #221c2e;
    --article-text-12: #2a3345;

    /* Search text colors */
    --search-text-1: #223354;
    --search-text-2: #936711;
    --search-text-3: #167351;
    --search-text-4: #227d4b;
    --search-text-5: #8a3b57;
    --search-text-6: #533994;
    --search-text-7: #212e28;
    --search-text-8: #2e5364;
    --search-text-9: #914ba6;
    --search-text-10: #73736b;
    --search-text-11: #7e772f;
    --search-text-12: #4347a6;

    /* Channel text colors */
    --channel-text-1: #2b475e;
    --channel-text-2: #6e277f;
    --channel-text-3: #8e692f;
    --channel-text-4: #2d5c3c;
    --channel-text-5: #9c357a;
    --channel-text-6: #2d3d6e;
    --channel-text-7: #237373;
    --channel-text-8: #962367;
    --channel-text-9: #39895f;
    --channel-text-10: #342872;
    --channel-text-11: #888730;
    --channel-text-12: #2b6e64;

    /* Footer text colors */
    --footer-text-1: #f7f7f7;
    --footer-text-2: #e0e0e0;
    --footer-text-3: #cfcfd7;
    --footer-text-4: #b8b8bf;
    --footer-text-5: #f3eaff;
    --footer-text-6: #e9f9ff;
    --footer-text-7: #b8e3ff;
    --footer-text-8: #e2f4f6;
    --footer-text-9: #ffdeef;
    --footer-text-10: #fdeff9;
    --footer-text-11: #d6ffe2;
    --footer-text-12: #e7ffa6;

    /* ========== TAG/TAG SYSTEM ========== */
    --tag-bg-1: rgba(59, 130, 246, 0.12);
    --tag-bg-2: rgba(245, 158, 11, 0.12);
    --tag-bg-3: rgba(34, 197, 94, 0.12);
    --tag-bg-4: rgba(239, 68, 68, 0.12);
    --tag-bg-5: rgba(147, 51, 234, 0.12);
    --tag-bg-6: rgba(249, 115, 22, 0.12);
    --tag-bg-7: rgba(236, 72, 153, 0.12);
    --tag-bg-8: rgba(6, 182, 212, 0.12);
    --tag-bg-9: rgba(101, 163, 13, 0.12);
    --tag-bg-10: rgba(180, 83, 9, 0.12);
    --tag-bg-11: rgba(124, 58, 237, 0.12);
    --tag-bg-12: rgba(16, 185, 129, 0.12);
    --tag-text-1: #1d4ed8;
    --tag-text-2: #b45309;
    --tag-text-3: #15803d;
    --tag-text-4: #dc2626;
    --tag-text-5: #7c3aed;
    --tag-text-6: #ea580c;
    --tag-text-7: #db2777;
    --tag-text-8: #0891b2;
    --tag-text-9: #4d7c0f;
    --tag-text-10: #c2410c;
    --tag-text-11: #7e22ce;
    --tag-text-12: #047857;
    --tag-border-1: rgba(59, 130, 246, 0.3);
    --tag-border-2: rgba(245, 158, 11, 0.3);
    --tag-border-3: rgba(34, 197, 94, 0.3);
    --tag-border-4: rgba(239, 68, 68, 0.3);
    --tag-border-5: rgba(147, 51, 234, 0.3);
    --tag-border-6: rgba(249, 115, 22, 0.3);
    --tag-border-7: rgba(236, 72, 153, 0.3);
    --tag-border-8: rgba(6, 182, 212, 0.3);
    --tag-border-9: rgba(101, 163, 13, 0.3);
    --tag-border-10: rgba(180, 83, 9, 0.3);
    --tag-border-11: rgba(124, 58, 237, 0.3);
    --tag-border-12: rgba(16, 185, 129, 0.3);

    /* ========== BADGE SYSTEM ========== */
    --badge-bg-success: rgba(34, 197, 94, 0.15);
    --badge-bg-warning: rgba(245, 158, 11, 0.15);
    --badge-bg-error: rgba(239, 68, 68, 0.15);
    --badge-bg-info: rgba(59, 130, 246, 0.15);
    --badge-bg-premium: rgba(147, 51, 234, 0.15);
    --badge-bg-new: rgba(16, 185, 129, 0.15);
    --badge-bg-trending: rgba(236, 72, 153, 0.15);
    --badge-bg-featured: rgba(249, 115, 22, 0.15);
    --badge-text-success: #15803d;
    --badge-text-warning: #b45309;
    --badge-text-error: #dc2626;
    --badge-text-info: #1d4ed8;
    --badge-text-premium: #7c3aed;
    --badge-text-new: #047857;
    --badge-text-trending: #db2777;
    --badge-text-featured: #ea580c;

    /* ========== BUTTON VARIANTS ========== */
    --btn-gradient-primary: linear-gradient(135deg, var(--color-teal-500), var(--color-teal-600));
    --btn-gradient-secondary: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
    --btn-gradient-success: linear-gradient(135deg, #10b981, #059669);
    --btn-gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
    --btn-gradient-error: linear-gradient(135deg, #ef4444, #dc2626);
    --btn-gradient-premium: linear-gradient(135deg, #8b5cf6, #7c3aed);
    --btn-shadow-primary: 0 4px 14px 0 rgba(33, 128, 141, 0.3);
    --btn-shadow-hover: 0 6px 20px rgba(33, 128, 141, 0.4);

    /* ========== CARD ELEVATIONS ========== */
    --card-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --card-shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --card-shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --card-shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --card-gradient-1: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --card-gradient-2: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    --card-gradient-3: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    --card-gradient-4: linear-gradient(135deg, #fef7ff 0%, #f3e8ff 100%);
    --card-gradient-5: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);

    /* ========== LOADING & SKELETON ========== */
    --skeleton-bg: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    --skeleton-bg-animated: linear-gradient(90deg,
            rgba(240, 240, 240, 0.8) 25%,
            rgba(224, 224, 224, 0.9) 50%,
            rgba(240, 240, 240, 0.8) 75%);
    --loading-spinner-primary: var(--color-teal-500);
    --loading-spinner-secondary: var(--color-gray-300);
    --loading-overlay: rgba(255, 255, 255, 0.8);

    /* ========== OVERLAY & BACKDROP ========== */
    --overlay-light: rgba(255, 255, 255, 0.8);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-darker: rgba(0, 0, 0, 0.7);
    --backdrop-blur: blur(8px);
    --backdrop-saturate: saturate(180%);

    /* ========== GRADIENT TEXT ========== */
    --gradient-text-1: linear-gradient(135deg, var(--color-teal-500), var(--color-teal-700));
    --gradient-text-2: linear-gradient(135deg, #8b5cf6, #ec4899);
    --gradient-text-3: linear-gradient(135deg, #f59e0b, #ef4444);
    --gradient-text-4: linear-gradient(135deg, #10b981, #3b82f6);
    --gradient-text-5: linear-gradient(135deg, #6366f1, #8b5cf6);

    /* ========== BORDER GRADIENTS ========== */
    --border-gradient-1: linear-gradient(135deg, var(--color-teal-500), var(--color-teal-300));
    --border-gradient-2: linear-gradient(135deg, #8b5cf6, #ec4899);
    --border-gradient-3: linear-gradient(135deg, #f59e0b, #ef4444);
    --border-gradient-4: linear-gradient(135deg, #10b981, #3b82f6);

    /* ========== MODERN SHADOWS ========== */
    --shadow-glow-primary: 0 0 20px rgba(33, 128, 141, 0.15);
    --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.15);
    --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.15);
    --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.15);
    --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-strong: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --code-background-color: hsl(0, 0%, 94.9%);
    --code-border-color: hsl(0, 0%, 90.6%);
    --code-text-color: hsl(0, 0%, 26.7%);
    --note-background-color: hsl(50, 100%, 94%);
    --note-border-color: hsl(40, 100%, 90%);
    --code-selection-background-color: hsl(212.3, 97.8%, 81.8%);

    /* ========== MODERN NEUMORPHISM ========== */
    --neumorph-light:
        -5px -5px 15px rgba(255, 255, 255, 0.8),
        5px 5px 15px rgba(0, 0, 0, 0.1);
    --neumorph-dark:
        -5px -5px 15px rgba(255, 255, 255, 0.05),
        5px 5px 15px rgba(0, 0, 0, 0.3);
    --neumorph-inset-light:
        inset -2px -2px 5px rgba(255, 255, 255, 0.8),
        inset 2px 2px 5px rgba(0, 0, 0, 0.1);
    --neumorph-inset-dark:
        inset -2px -2px 5px rgba(255, 255, 255, 0.05),
        inset 2px 2px 5px rgba(0, 0, 0, 0.3);

    /* ========== MODERN GRADIENTS ========== */
    --gradient-glass: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%);
    --gradient-glass-dark: linear-gradient(135deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.05) 100%);
    --gradient-shimmer: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);

    /* ========== PRIMITIVE COLOR TOKENS ========== */
    --gradient-bg: linear-gradient(var(--color-charcoal-500), var(--color-charcoal-600));
    --color-text-footer: white;
    --color-white: rgba(255, 255, 255, 1);
    --color-black: rgba(0, 0, 0, 1);
    --color-cream-50: rgba(252, 252, 249, 1);
    --color-cream-100: rgba(255, 255, 253, 1);
    --color-gray-50: rgba(250, 250, 250, 1);
    --color-gray-100: rgba(245, 245, 245, 1);
    --color-gray-200: rgba(229, 229, 229, 1);
    --color-gray-300: rgba(167, 169, 169, 1);
    --color-gray-400: rgba(119, 124, 124, 1);
    --color-gray-500: rgba(107, 114, 128, 1);
    --color-gray-600: rgba(75, 85, 99, 1);
    --color-gray-700: rgba(55, 65, 81, 1);
    --color-gray-800: rgba(31, 41, 55, 1);
    --color-gray-900: rgba(17, 24, 39, 1);
    --color-slate-500: rgba(98, 108, 113, 1);
    --color-brown-600: rgba(94, 82, 64, 1);
    --color-charcoal-500: rgb(118 125 125);
    --color-charcoal-600: rgb(81 86 86);
    --color-charcoal-700: rgba(31, 33, 33, 1);
    --color-charcoal-800: rgba(38, 40, 40, 1);
    --color-charcoal-900: rgb(38 38 40);
    --color-slate-900: rgba(19, 52, 59, 1);

    /* Teal Colors */
    --color-teal-50: rgba(240, 253, 250, 1);
    --color-teal-100: rgba(204, 251, 241, 1);
    --color-teal-200: rgba(153, 246, 228, 1);
    --color-teal-300: rgba(50, 184, 198, 1);
    --color-teal-400: rgba(45, 166, 178, 1);
    --color-teal-500: rgba(33, 128, 141, 1);
    --color-teal-600: rgba(29, 116, 128, 1);
    --color-teal-700: rgba(26, 104, 115, 1);
    --color-teal-800: rgba(41, 150, 161, 1);
    --color-teal-900: rgba(19, 78, 74, 1);

    /* Red Colors */
    --color-red-50: rgba(254, 242, 242, 1);
    --color-red-100: rgba(254, 226, 226, 1);
    --color-red-200: rgba(254, 202, 202, 1);
    --color-red-300: rgba(252, 165, 165, 1);
    --color-red-400: rgba(255, 84, 89, 1);
    --color-red-500: rgba(192, 21, 47, 1);
    --color-red-600: rgba(220, 38, 38, 1);
    --color-red-700: rgba(185, 28, 28, 1);
    --color-red-800: rgba(153, 27, 27, 1);
    --color-red-900: rgba(127, 29, 29, 1);

    /* Orange Colors */
    --color-orange-50: rgba(255, 247, 237, 1);
    --color-orange-100: rgba(255, 237, 213, 1);
    --color-orange-200: rgba(254, 215, 170, 1);
    --color-orange-300: rgba(253, 186, 116, 1);
    --color-orange-400: rgba(230, 129, 97, 1);
    --color-orange-500: rgba(168, 75, 47, 1);
    --color-orange-600: rgba(234, 88, 12, 1);
    --color-orange-700: rgba(194, 65, 12, 1);
    --color-orange-800: rgba(154, 52, 18, 1);
    --color-orange-900: rgba(124, 45, 18, 1);

    /* ========== RGB VERSIONS FOR OPACITY ========== */
    --color-brown-600-rgb: 94, 82, 64;
    --color-teal-500-rgb: 33, 128, 141;
    --color-teal-300-rgb: 50, 184, 198;
    --color-slate-900-rgb: 19, 52, 59;
    --color-slate-500-rgb: 98, 108, 113;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-400-rgb: 119, 124, 124;
    --color-gray-200-rgb: 245, 245, 245;
    --color-red-500-rgb: 192, 21, 47;
    --color-red-400-rgb: 255, 84, 89;
    --color-orange-500-rgb: 168, 75, 47;
    --color-orange-400-rgb: 230, 129, 97;

    /* ========== BACKGROUND COLOR TOKENS ========== */
    --color-bg-1: rgba(59, 130, 246, 0.08);
    --color-bg-2: rgba(245, 158, 11, 0.08);
    --color-bg-3: rgba(34, 197, 94, 0.08);
    --color-bg-4: rgba(239, 68, 68, 0.08);
    --color-bg-5: rgba(147, 51, 234, 0.08);
    --color-bg-6: rgba(249, 115, 22, 0.08);
    --color-bg-7: rgba(236, 72, 153, 0.08);
    --color-bg-8: rgba(6, 182, 212, 0.08);

    /* ========== SEMANTIC COLORS - LIGHT MODE (DEFAULT) ========== */

    /* Background & Surface */
    --color-background: var(--color-cream-50);
    --color-surface: var(--color-cream-100);
    --color-surface-elevated: var(--color-white);

    /* Text Colors */
    --color-text: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-500);
    --color-text-tertiary: var(--color-gray-400);
    --color-text-muted: var(--color-gray-500);
    --color-text-inverse: var(--color-white);

    /* Primary Colors */
    --color-primary: var(--color-teal-500);
    --color-primary-hover: var(--color-teal-600);
    --color-primary-active: var(--color-teal-700);
    --color-primary-light: var(--color-teal-100);
    --color-primary-dark: var(--color-teal-800);

    /* Secondary Colors */
    --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
    --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
    --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
    --color-secondary-border: rgba(var(--color-brown-600-rgb), 0.3);

    /* Border Colors */
    --color-border: rgba(var(--color-brown-600-rgb), 0.2);
    --color-border-light: rgba(var(--color-brown-600-rgb), 0.1);
    --color-border-strong: rgba(var(--color-brown-600-rgb), 0.3);

    /* Card Colors */
    --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-background: var(--color-surface);
    --color-card-background-hover: var(--color-gray-50);

    /* Button Colors */
    --color-btn-primary-text: var(--color-white);
    --color-btn-secondary-text: var(--color-text);
    --color-btn-outline-border: var(--color-border);

    /* Status Colors */
    --color-success: var(--color-teal-500);
    --color-success-light: var(--color-teal-100);
    --color-error: var(--color-red-500);
    --color-error-light: var(--color-red-100);
    --color-warning: var(--color-orange-500);
    --color-warning-light: var(--color-orange-100);
    --color-info: var(--color-slate-500);
    --color-info-light: var(--color-gray-100);

    /* Focus & Interactive */
    --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
    --color-focus-outline: var(--color-teal-500);
    --color-link: var(--color-teal-600);
    --color-link-hover: var(--color-teal-700);

    /* Selection */
    --color-selection-bg: rgba(var(--color-teal-500-rgb), 0.2);
    --color-selection-text: var(--color-text);

    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-strong: rgba(0, 0, 0, 0.15);

    /* Icon Colors */
    --color-icon-primary: var(--color-text);
    --color-icon-secondary: var(--color-text-secondary);
    --color-icon-tertiary: var(--color-text-tertiary);
    --color-icon-inverse: var(--color-white);

    /* Form Colors */
    --color-input-background: var(--color-surface);
    --color-input-border: var(--color-border);
    --color-input-border-focus: var(--color-primary);
    --color-input-text: var(--color-text);
    --color-input-placeholder: var(--color-text-tertiary);
    --color-input-disabled: var(--color-gray-100);
    --color-input-disabled-text: var(--color-text-tertiary);

    /* Select Caret */
    --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* ========== RGB VERSIONS FOR SEMANTIC COLORS ========== */
    --color-success-rgb: var(--color-teal-500-rgb);
    --color-error-rgb: var(--color-red-500-rgb);
    --color-warning-rgb: var(--color-orange-500-rgb);
    --color-info-rgb: var(--color-slate-500-rgb);

    /* ========== COMMON STYLE PATTERNS ========== */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;

    /* ========== LEGACY COMPATIBILITY ========== */
    --bg-body: var(--color-background);
    --bg-body-nav: var(--color-surface);
    --bg-article: var(--color-surface);
    --text-color: var(--color-text);
    --bg-color-hover: var(--color-secondary);
    --bg-body-block: var(--color-surface);
    --bg-body-block-hover: var(--color-secondary);
    --icon-primary: var(--color-primary);
    --icon-primary-hover: var(--color-primary-hover);
}

/* ============================================
   DARK MODE - SYSTEM PREFERENCE
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --btn-primary-text: #eff6ff;
        --btn-light-bg: #1f2937;
        --btn-light-hover: #374151;
        --btn-light-active: #4b5563;
        --btn-light-text: #f9fafb;
        --btn-outline-primary-hover-bg: rgba(59, 130, 246, 0.2);
        --btn-glass-bg: rgba(0, 0, 0, 0.4);
        --btn-glass-hover: rgba(0, 0, 0, 0.6);

        --bg-secondary: var(--color-surface);
        --text-muted: var(--color-text-tertiary);
        --bg-primary: var(--color-background);
        --bg-tertiary: var(--color-surface-elevated);
        --bg-hover: var(--color-secondary);
        --bg-active: var(--color-secondary-active);
        --border-light: var(--color-border-light);
        --border-strong: var(--color-border-strong);
        --text-secondary: var(--color-text-secondary);
        --text-inverse: var(--color-text-inverse);

        /* HOME BACKGROUNDS (Dark Mode) */
        --home-bg-1: linear-gradient(135deg, #202a3a 0%, #283646 100%);
        --home-bg-2: linear-gradient(135deg, #461c31 0%, #1e293b 100%);
        --home-bg-3: linear-gradient(135deg, #23293a 0%, #323845 100%);
        --home-bg-4: linear-gradient(135deg, #273e2c 0%, #232d26 100%);
        --home-bg-5: linear-gradient(135deg, #332328 0%, #2d232a 100%);
        --home-bg-6: linear-gradient(135deg, #22243a 0%, #1a2247 100%);
        --home-bg-7: linear-gradient(135deg, #271f33 0%, #292638 100%);
        --home-bg-8: linear-gradient(135deg, #23405c 0%, #1b2736 100%);
        --home-bg-9: linear-gradient(135deg, #31261d 0%, #393220 100%);
        --home-bg-10: linear-gradient(135deg, #1e3a37 0%, #203240 100%);
        --home-bg-11: linear-gradient(135deg, #393d28 0%, #2c2e2a 100%);
        --home-bg-12: linear-gradient(135deg, #22333a 0%, #232a36 100%);

        /* BODY BACKGROUNDS (Dark Mode) */
        --body-bg-1: #181c20;
        --body-bg-2: #171720;
        --body-bg-3: #191e21;
        --body-bg-4: #232730;
        --body-bg-5: #1b1f24;
        --body-bg-6: #20223a;
        --body-bg-7: #202334;
        --body-bg-8: #141a20;
        --body-bg-9: #232127;
        --body-bg-10: #23191c;
        --body-bg-11: #282631;
        --body-bg-12: #251f21;

        /* ARTICLE BACKGROUNDS (Dark Mode) */
        --article-bg-1: #23242b;
        --article-bg-2: #24293a;
        --article-bg-3: #161b22;
        --article-bg-4: #24292f;
        --article-bg-5: #1a1923;
        --article-bg-6: #1a1f27;
        --article-bg-7: #232336;
        --article-bg-8: #221a24;
        --article-bg-9: #191d1e;
        --article-bg-10: #222d23;
        --article-bg-11: #2d1f2f;
        --article-bg-12: #21191e;

        /* SEARCH BACKGROUNDS (Dark Mode) */
        --search-bg-1: #182131;
        --search-bg-2: #231d13;
        --search-bg-3: #122423;
        --search-bg-4: #1a261d;
        --search-bg-5: #271722;
        --search-bg-6: #1e1731;
        --search-bg-7: #212d22;
        --search-bg-8: #16281e;
        --search-bg-9: #23172b;
        --search-bg-10: #191f27;
        --search-bg-11: #232619;
        --search-bg-12: #1b222a;

        /* CHANNEL BACKGROUNDS (Dark Mode) */
        --channel-bg-1: linear-gradient(135deg, #395f74 0%, #23415b 100%);
        --channel-bg-2: linear-gradient(135deg, #571757 0%, #3b2341 100%);
        --channel-bg-3: linear-gradient(135deg, #635029 0%, #42331e 100%);
        --channel-bg-4: linear-gradient(135deg, #2f6042 0%, #21372c 100%);
        --channel-bg-5: linear-gradient(135deg, #776337 0%, #473c1e 100%);
        --channel-bg-6: linear-gradient(135deg, #3b345a 0%, #23296b 100%);
        --channel-bg-7: linear-gradient(135deg, #225656 0%, #163c3c 100%);
        --channel-bg-8: linear-gradient(135deg, #4a2d47 0%, #231d2a 100%);
        --channel-bg-9: linear-gradient(135deg, #387457 0%, #1e3b29 100%);
        --channel-bg-10: linear-gradient(135deg, #343670 0%, #232547 100%);
        --channel-bg-11: linear-gradient(135deg, #6d6b33 0%, #2b2a1e 100%);
        --channel-bg-12: linear-gradient(135deg, #222b2a 0%, #1e2326 100%);

        /* Footer backgrounds - dark */
        --footer-bg-1: linear-gradient(135deg, #202b39 0%, #223045 100%);
        --footer-bg-2: linear-gradient(135deg, #2d1a26 0%, #271f36 100%);
        --footer-bg-3: linear-gradient(135deg, #2b2930 0%, #2c2a36 100%);
        --footer-bg-4: linear-gradient(135deg, #1a1e2c 0%, #22253b 100%);
        --footer-bg-5: linear-gradient(135deg, #241a2e 0%, #23193b 100%);
        --footer-bg-6: linear-gradient(135deg, #1c191d 0%, #232136 100%);
        --footer-bg-7: linear-gradient(135deg, #181924 0%, #1c1d2a 100%);
        --footer-bg-8: linear-gradient(135deg, #1c241e 0%, #13271e 100%);
        --footer-bg-9: linear-gradient(135deg, #23171f 0%, #2c192a 100%);
        --footer-bg-10: linear-gradient(135deg, #181e29 0%, #232d2a 100%);
        --footer-bg-11: linear-gradient(135deg, #201f26 0%, #1c1d22 100%);
        --footer-bg-12: linear-gradient(135deg, #1b1c2c 0%, #232a2f 100%);

        /* Home text colors */
        --home-text-1: #f3f3f3;
        --home-text-2: #dedee5;
        --home-text-3: #c5c5dc;
        --home-text-4: #a8dddd;
        --home-text-5: #eec0e2;
        --home-text-6: #c5c1ea;
        --home-text-7: #ecffe6;
        --home-text-8: #bde3ff;
        --home-text-9: #ffe6cb;
        --home-text-10: #c7fafd;
        --home-text-11: #fdffe9;
        --home-text-12: #e7fffa;

        /* Body text colors */
        --body-text-1: #d4d2d2;
        --body-text-2: #aaa;
        --body-text-3: #bdbdbd;
        --body-text-4: #abb0c3;
        --body-text-5: #8d8daf;
        --body-text-6: #bfbfbf;
        --body-text-7: #bbbad6;
        --body-text-8: #e8e8ee;
        --body-text-9: #eaeaea;
        --body-text-10: #a3bccc;
        --body-text-11: #b8bee0;
        --body-text-12: #e7e7eb;

        /* Article text colors */
        --article-text-1: #ccc;
        --article-text-2: #c1c6d5;
        --article-text-3: #c6cfd5;
        --article-text-4: #e3e3ee;
        --article-text-5: #e4e5ef;
        --article-text-6: #c1ded5;
        --article-text-7: #a4bedb;
        --article-text-8: #c0cbba;
        --article-text-9: #b8e6cc;
        --article-text-10: #d6e7cf;
        --article-text-11: #e4aedd;
        --article-text-12: #bdcdf6;

        /* Search text colors */
        --search-text-1: #c1d6e7;
        --search-text-2: #ecd68e;
        --search-text-3: #68debe;
        --search-text-4: #70e7ad;
        --search-text-5: #fbafd1;
        --search-text-6: #bbb3e7;
        --search-text-7: #c3cfcd;
        --search-text-8: #9ed8fa;
        --search-text-9: #d899db;
        --search-text-10: #b5b5a2;
        --search-text-11: #dbe06e;
        --search-text-12: #95a6e4;

        /* Channel text colors */
        --channel-text-1: #a9cbdb;
        --channel-text-2: #c681db;
        --channel-text-3: #f9d97b;
        --channel-text-4: #a4dfbc;
        --channel-text-5: #dbb2d3;
        --channel-text-6: #c9c9e4;
        --channel-text-7: #52dccd;
        --channel-text-8: #fdafea;
        --channel-text-9: #aaf5cc;
        --channel-text-10: #a5acee;
        --channel-text-11: #eedc96;
        --channel-text-12: #abdacc;

        /* Footer text colors */
        --footer-text-1: #e6e6e6;
        --footer-text-2: #bfbfc7;
        --footer-text-3: #d7d7e0;
        --footer-text-4: #a6f4ff;
        --footer-text-5: #ffd6ef;
        --footer-text-6: #ffb8e6;
        --footer-text-7: #9afeff;
        --footer-text-8: #f6faf8;
        --footer-text-9: #f8f8f6;
        --footer-text-10: #e3fbff;
        --footer-text-11: #b2ffbe;
        --footer-text-12: #c0c0e0;

        /* Tag System - Dark */
        --tag-bg-1: rgba(59, 130, 246, 0.2);
        --tag-bg-2: rgba(245, 158, 11, 0.2);
        --tag-bg-3: rgba(34, 197, 94, 0.2);
        --tag-bg-4: rgba(239, 68, 68, 0.2);
        --tag-bg-5: rgba(147, 51, 234, 0.2);
        --tag-bg-6: rgba(249, 115, 22, 0.2);
        --tag-bg-7: rgba(236, 72, 153, 0.2);
        --tag-bg-8: rgba(6, 182, 212, 0.2);

        --tag-text-1: #60a5fa;
        --tag-text-2: #fbbf24;
        --tag-text-3: #4ade80;
        --tag-text-4: #f87171;
        --tag-text-5: #a78bfa;
        --tag-text-6: #fb923c;
        --tag-text-7: #f472b6;
        --tag-text-8: #22d3ee;

        /* Loading & Skeleton - Dark */
        --skeleton-bg: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        --loading-overlay: rgba(0, 0, 0, 0.7);

        /* Modern Shadows - Dark */
        --shadow-glow-primary: 0 0 20px rgba(33, 128, 141, 0.3);
        --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.3);
        --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.3);
        --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.3);


        --gradient-bg: linear-gradient(var(--color-charcoal-700), var(--color-charcoal-900));
        --color-text-footer: #f2f2f2;
        /* ========== BACKGROUND COLOR TOKENS (DARK MODE) ========== */
        --color-bg-1: rgba(29, 78, 216, 0.15);
        --color-bg-2: rgba(180, 83, 9, 0.15);
        --color-bg-3: rgba(21, 128, 61, 0.15);
        --color-bg-4: rgba(185, 28, 28, 0.15);
        --color-bg-5: rgba(107, 33, 168, 0.15);
        --color-bg-6: rgba(194, 65, 12, 0.15);
        --color-bg-7: rgba(190, 24, 93, 0.15);
        --color-bg-8: rgba(8, 145, 178, 0.15);

        /* ========== SEMANTIC COLORS (DARK MODE) ========== */

        /* Background & Surface */
        --color-background: var(--color-charcoal-700);
        --color-surface: var(--color-charcoal-800);
        --color-surface-elevated: var(--color-gray-800);

        /* Text Colors */
        --color-text: var(--color-gray-200);
        --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.8);
        --color-text-tertiary: var(--color-gray-400);
        --color-text-muted: var(--color-gray-500);
        --color-text-inverse: var(--color-gray-900);

        /* Primary Colors */
        --color-primary: var(--color-teal-300);
        --color-primary-hover: var(--color-teal-400);
        --color-primary-active: var(--color-teal-800);
        --color-primary-light: rgba(var(--color-teal-300-rgb), 0.2);
        --color-primary-dark: var(--color-teal-800);

        /* Secondary Colors */
        --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
        --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
        --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
        --color-secondary-border: rgba(var(--color-gray-400-rgb), 0.4);

        /* Border Colors */
        --color-border: rgba(var(--color-gray-400-rgb), 0.3);
        --color-border-light: rgba(var(--color-gray-400-rgb), 0.2);
        --color-border-strong: rgba(var(--color-gray-400-rgb), 0.4);

        /* Card Colors */
        --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
        --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
        --color-card-background: var(--color-surface);
        --color-card-background-hover: var(--color-gray-800);

        /* Button Colors */
        --color-btn-primary-text: var(--color-slate-900);
        --color-btn-secondary-text: var(--color-text);
        --color-btn-outline-border: rgba(var(--color-gray-400-rgb), 0.4);

        /* Status Colors */
        --color-success: var(--color-teal-300);
        --color-success-light: rgba(var(--color-teal-300-rgb), 0.2);
        --color-error: var(--color-red-400);
        --color-error-light: rgba(var(--color-red-400-rgb), 0.2);
        --color-warning: var(--color-orange-400);
        --color-warning-light: rgba(var(--color-orange-400-rgb), 0.2);
        --color-info: var(--color-gray-300);
        --color-info-light: rgba(var(--color-gray-300-rgb), 0.2);

        /* Focus & Interactive */
        --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
        --color-focus-outline: var(--color-teal-300);
        --color-link: var(--color-teal-300);
        --color-link-hover: var(--color-teal-400);

        /* Selection */
        --color-selection-bg: rgba(var(--color-teal-300-rgb), 0.3);
        --color-selection-text: var(--color-text);

        /* Shadow Colors */
        --shadow-color: rgba(0, 0, 0, 0.3);
        --shadow-color-strong: rgba(0, 0, 0, 0.5);

        /* Icon Colors */
        --color-icon-primary: var(--color-text);
        --color-icon-secondary: var(--color-text-secondary);
        --color-icon-tertiary: var(--color-text-tertiary);
        --color-icon-inverse: var(--color-gray-900);

        /* Form Colors */
        --color-input-background: var(--color-surface);
        --color-input-border: var(--color-border);
        --color-input-border-focus: var(--color-primary);
        --color-input-text: var(--color-text);
        --color-input-placeholder: var(--color-text-tertiary);
        --color-input-disabled: var(--color-gray-800);
        --color-input-disabled-text: var(--color-text-tertiary);

        /* Select Caret */
        --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

        /* ========== RGB VERSIONS FOR DARK MODE ========== */
        --color-success-rgb: var(--color-teal-300-rgb);
        --color-error-rgb: var(--color-red-400-rgb);
        --color-warning-rgb: var(--color-orange-400-rgb);
        --color-info-rgb: var(--color-gray-300-rgb);

        /* ========== LEGACY COMPATIBILITY ========== */
        --bg-body: var(--color-background);
        --bg-body-nav: var(--color-surface);
        --bg-article: var(--color-surface);
        --text-color: var(--color-text);
        --bg-color-hover: var(--color-secondary);
        --bg-body-block: var(--color-surface);
        --bg-body-block-hover: var(--color-secondary);
        --icon-primary: var(--color-primary);
        --icon-primary-hover: var(--color-primary-hover);
    }
}

/* ============================================
   MANUAL THEME SWITCHING - data-color-scheme
   ============================================ */

[data-color-scheme="light"],
[data-theme="light"] {
    --bg-secondary: var(--color-surface);
    --text-muted: var(--color-text-tertiary);
    --bg-primary: var(--color-background);
    --bg-tertiary: var(--color-surface-elevated);
    --bg-hover: var(--color-secondary);
    --bg-active: var(--color-secondary-active);
    --border-light: var(--color-border-light);
    --border-strong: var(--color-border-strong);
    --text-secondary: var(--color-text-secondary);
    --text-inverse: var(--color-text-inverse);

    /* Home backgrounds */
    --home-bg-1: linear-gradient(135deg, #d8eafe 0%, #f5fafe 100%);
    --home-bg-2: linear-gradient(135deg, #fce6ec 0%, #ffeaf1 100%);
    --home-bg-3: linear-gradient(135deg, #fffbe6 0%, #f7fff0 100%);
    --home-bg-4: linear-gradient(135deg, #e6ffe9 0%, #e6f7ff 100%);
    --home-bg-5: linear-gradient(135deg, #ffe6e6 0%, #ffe9f7 100%);
    --home-bg-6: linear-gradient(135deg, #f2e6ff 0%, #e9e6ff 100%);
    --home-bg-7: linear-gradient(135deg, #f0edf9 0%, #eafae3 100%);
    --home-bg-8: linear-gradient(135deg, #e6f4fa 0%, #fbf8ff 100%);
    --home-bg-9: linear-gradient(135deg, #ffe6cb 0%, #ffecd2 100%);
    --home-bg-10: linear-gradient(135deg, #c7fafd 0%, #d4f0f5 100%);
    --home-bg-11: linear-gradient(135deg, #fff8e6 0%, #fdffe9 100%);
    --home-bg-12: linear-gradient(135deg, #e6fbff 0%, #fff5e3 100%);

    /* Body backgrounds */
    --body-bg-1: #f9fbfc;
    --body-bg-2: #fcf7f2;
    --body-bg-3: #f6fff7;
    --body-bg-4: #f2f6ff;
    --body-bg-5: #f1f1f8;
    --body-bg-6: #f7f3ff;
    --body-bg-7: #edf6fa;
    --body-bg-8: #f8faf5;
    --body-bg-9: #f5eee6;
    --body-bg-10: #efecff;
    --body-bg-11: #eff2f6;
    --body-bg-12: #fff9f5;

    /* Article backgrounds */
    --article-bg-1: #ffffff;
    --article-bg-2: #f4faff;
    --article-bg-3: #f6f9fa;
    --article-bg-4: #fefff2;
    --article-bg-5: #f5efff;
    --article-bg-6: #fff7fb;
    --article-bg-7: #fbffe4;
    --article-bg-8: #f0ebf9;
    --article-bg-9: #eef6ff;
    --article-bg-10: #f9f9ef;
    --article-bg-11: #ffe6f2;
    --article-bg-12: #e7fffa;

    /* Search backgrounds */
    --search-bg-1: #e6f0fa;
    --search-bg-2: #fff8e1;
    --search-bg-3: #e6fffb;
    --search-bg-4: #e6ffe8;
    --search-bg-5: #ffe6ec;
    --search-bg-6: #f2e6ff;
    --search-bg-7: #f6fdfa;
    --search-bg-8: #f4feff;
    --search-bg-9: #f8e6fe;
    --search-bg-10: #fbfcf8;
    --search-bg-11: #f6ffd8;
    --search-bg-12: #e7e8ff;

    /* Channel backgrounds */
    --channel-bg-1: linear-gradient(135deg, #8ec0e4 0%, #cfdae8 100%);
    --channel-bg-2: linear-gradient(135deg, #edb2ff 0%, #f0d6ff 100%);
    --channel-bg-3: linear-gradient(135deg, #fde5c7 0%, #ffe7cb 100%);
    --channel-bg-4: linear-gradient(135deg, #e1ffe2 0%, #d6fff7 100%);
    --channel-bg-5: linear-gradient(135deg, #ffecc7 0%, #f7c4ea 100%);
    --channel-bg-6: linear-gradient(135deg, #e1edff 0%, #d8eafe 100%);
    --channel-bg-7: linear-gradient(135deg, #b3f5fc 0%, #b8dafa 100%);
    --channel-bg-8: linear-gradient(135deg, #ffd8e7 0%, #f7e7ff 100%);
    --channel-bg-9: linear-gradient(135deg, #bff9e7 0%, #f7ffd8 100%);
    --channel-bg-10: linear-gradient(135deg, #d8c7ec 0%, #f5fafe 100%);
    --channel-bg-11: linear-gradient(135deg, #f4edc6 0%, #fbfae8 100%);
    --channel-bg-12: linear-gradient(135deg, #e7fff7 0%, #f3f3ff 100%);

    /* Footer backgrounds - tonalità scure */
    --footer-bg-1: linear-gradient(135deg, #363637 0%, #2e2e30 100%);
    --footer-bg-2: linear-gradient(135deg, #36323f 0%, #23202a 100%);
    --footer-bg-3: linear-gradient(135deg, #3a393a 0%, #23232c 100%);
    --footer-bg-4: linear-gradient(135deg, #353840 0%, #24262b 100%);
    --footer-bg-5: linear-gradient(135deg, #2c2a2a 0%, #232020 100%);
    --footer-bg-6: linear-gradient(135deg, #474350 0%, #312334 100%);
    --footer-bg-7: linear-gradient(135deg, #3f3e3d 0%, #373737 100%);
    --footer-bg-8: linear-gradient(135deg, #23292f 0%, #222230 100%);
    --footer-bg-9: linear-gradient(135deg, #37313c 0%, #292430 100%);
    --footer-bg-10: linear-gradient(135deg, #42424b 0%, #2d2d36 100%);
    --footer-bg-11: linear-gradient(135deg, #26263a 0%, #23244b 100%);
    --footer-bg-12: linear-gradient(135deg, #242533 0%, #222238 100%);

    /* Footer backgrounds - tonalità scure */
    --footer-bg-1: linear-gradient(135deg, #363637 0%, #2e2e30 100%);
    --footer-bg-2: linear-gradient(135deg, #36323f 0%, #23202a 100%);
    --footer-bg-3: linear-gradient(135deg, #3a393a 0%, #23232c 100%);
    --footer-bg-4: linear-gradient(135deg, #353840 0%, #24262b 100%);
    --footer-bg-5: linear-gradient(135deg, #2c2a2a 0%, #232020 100%);
    --footer-bg-6: linear-gradient(135deg, #474350 0%, #312334 100%);
    --footer-bg-7: linear-gradient(135deg, #3f3e3d 0%, #373737 100%);
    --footer-bg-8: linear-gradient(135deg, #23292f 0%, #222230 100%);
    --footer-bg-9: linear-gradient(135deg, #37313c 0%, #292430 100%);
    --footer-bg-10: linear-gradient(135deg, #42424b 0%, #2d2d36 100%);
    --footer-bg-11: linear-gradient(135deg, #26263a 0%, #23244b 100%);
    --footer-bg-12: linear-gradient(135deg, #242533 0%, #222238 100%);

    /* Home text colors */
    --home-text-1: #22222a;
    --home-text-2: #353543;
    --home-text-3: #363650;
    --home-text-4: #205c45;
    --home-text-5: #262626;
    --home-text-6: #393943;
    --home-text-7: #3e3a36;
    --home-text-8: #305064;
    --home-text-9: #593e2c;
    --home-text-10: #3a5339;
    --home-text-11: #4a4b39;
    --home-text-12: #2a3a4a;

    /* Body text colors */
    --body-text-1: #262626;
    --body-text-2: #333333;
    --body-text-3: #2b2b2b;
    --body-text-4: #1f2536;
    --body-text-5: #343443;
    --body-text-6: #494949;
    --body-text-7: #212231;
    --body-text-8: #44444f;
    --body-text-9: #393939;
    --body-text-10: #678199;
    --body-text-11: #5c5c5c;
    --body-text-12: #292930;

    /* Article text colors */
    --article-text-1: #16171a;
    --article-text-2: #223354;
    --article-text-3: #252533;
    --article-text-4: #32324f;
    --article-text-5: #35365a;
    --article-text-6: #222643;
    --article-text-7: #192633;
    --article-text-8: #354131;
    --article-text-9: #304331;
    --article-text-10: #36394f;
    --article-text-11: #221c2e;
    --article-text-12: #2a3345;

    /* Search text colors */
    --search-text-1: #223354;
    --search-text-2: #936711;
    --search-text-3: #167351;
    --search-text-4: #227d4b;
    --search-text-5: #8a3b57;
    --search-text-6: #533994;
    --search-text-7: #212e28;
    --search-text-8: #2e5364;
    --search-text-9: #914ba6;
    --search-text-10: #73736b;
    --search-text-11: #7e772f;
    --search-text-12: #4347a6;

    /* Channel text colors */
    --channel-text-1: #2b475e;
    --channel-text-2: #6e277f;
    --channel-text-3: #8e692f;
    --channel-text-4: #2d5c3c;
    --channel-text-5: #9c357a;
    --channel-text-6: #2d3d6e;
    --channel-text-7: #237373;
    --channel-text-8: #962367;
    --channel-text-9: #39895f;
    --channel-text-10: #342872;
    --channel-text-11: #888730;
    --channel-text-12: #2b6e64;

    /* Footer text colors */
    --footer-text-1: #f7f7f7;
    --footer-text-2: #e0e0e0;
    --footer-text-3: #cfcfd7;
    --footer-text-4: #b8b8bf;
    --footer-text-5: #f3eaff;
    --footer-text-6: #e9f9ff;
    --footer-text-7: #b8e3ff;
    --footer-text-8: #e2f4f6;
    --footer-text-9: #ffdeef;
    --footer-text-10: #fdeff9;
    --footer-text-11: #d6ffe2;
    --footer-text-12: #e7ffa6;
    --gradient-bg: linear-gradient(var(--color-charcoal-500), var(--color-charcoal-600));
    --color-text-footer: #f2f2f2;
    /* Light mode overrides */
    --bg-color-hover: #fffde8;
    --bg-body: #f5f5f5;
    --bg-body-nav: #f6f6f6;
    --bg-article: #ffffff;
    --text-color: #1d1d1d;
    --bg-body-block: #ebf9ff;
    --bg-body-block-hover: rgb(235 235 235 / 88%);
    --icon-primary: #86c9ff;
    --icon-primary-hover: #4dadf7;
    --color-background: var(--color-cream-50);
    --color-surface: var(--color-cream-50);
    --color-surface-elevated: var(--color-white);
    --color-text: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-500);
    --color-text-tertiary: var(--color-gray-400);
    --color-primary: var(--color-teal-500);
    --color-primary-hover: var(--color-teal-600);
    --color-primary-active: var(--color-teal-700);
    --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
    --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
    --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
    --color-border: rgba(var(--color-brown-600-rgb), 0.2);
    --color-btn-primary-text: var(--color-white);
    --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
    --color-error: var(--color-red-500);
    --color-success: var(--color-teal-500);
    --color-warning: var(--color-orange-500);
    --color-info: var(--color-slate-500);
    --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
    --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

    /* Legacy */
    --bg-body-nav: #f6f6f6;
    --bg-body: var(--color-background);
    --bg-article: var(--color-surface);
    --text-color: var(--color-text);
}

[data-color-scheme="dark"],
[data-theme="dark"] {

    --bg-secondary: var(--color-surface);
    --text-muted: var(--color-text-tertiary);
    --bg-primary: var(--color-background);
    --bg-tertiary: var(--color-surface-elevated);
    --bg-hover: var(--color-secondary);
    --bg-active: var(--color-secondary-active);
    --border-light: var(--color-border-light);
    --border-strong: var(--color-border-strong);
    --text-secondary: var(--color-text-secondary);
    --text-inverse: var(--color-text-inverse);

    /* Home backgrounds */
    --home-bg-1: linear-gradient(135deg, #202a3a 0%, #283646 100%);
    --home-bg-2: linear-gradient(135deg, #461c31 0%, #1e293b 100%);
    --home-bg-3: linear-gradient(135deg, #23293a 0%, #323845 100%);
    --home-bg-4: linear-gradient(135deg, #273e2c 0%, #232d26 100%);
    --home-bg-5: linear-gradient(135deg, #332328 0%, #2d232a 100%);
    --home-bg-6: linear-gradient(135deg, #22243a 0%, #1a2247 100%);
    --home-bg-7: linear-gradient(135deg, #271f33 0%, #292638 100%);
    --home-bg-8: linear-gradient(135deg, #23405c 0%, #1b2736 100%);
    --home-bg-9: linear-gradient(135deg, #31261d 0%, #393220 100%);
    --home-bg-10: linear-gradient(135deg, #1e3a37 0%, #203240 100%);
    --home-bg-11: linear-gradient(135deg, #393d28 0%, #2c2e2a 100%);
    --home-bg-12: linear-gradient(135deg, #22333a 0%, #232a36 100%);

    /* Body backgrounds */
    --body-bg-1: #181c20;
    --body-bg-2: #171720;
    --body-bg-3: #191e21;
    --body-bg-4: #232730;
    --body-bg-5: #1b1f24;
    --body-bg-6: #20223a;
    --body-bg-7: #202334;
    --body-bg-8: #141a20;
    --body-bg-9: #232127;
    --body-bg-10: #23191c;
    --body-bg-11: #282631;
    --body-bg-12: #251f21;

    /* Article backgrounds */
    --article-bg-1: #23242b;
    --article-bg-2: #24293a;
    --article-bg-3: #161b22;
    --article-bg-4: #24292f;
    --article-bg-5: #1a1923;
    --article-bg-6: #1a1f27;
    --article-bg-7: #232336;
    --article-bg-8: #221a24;
    --article-bg-9: #191d1e;
    --article-bg-10: #222d23;
    --article-bg-11: #2d1f2f;
    --article-bg-12: #21191e;

    /* Search backgrounds */
    --search-bg-1: #182131;
    --search-bg-2: #231d13;
    --search-bg-3: #122423;
    --search-bg-4: #1a261d;
    --search-bg-5: #271722;
    --search-bg-6: #1e1731;
    --search-bg-7: #212d22;
    --search-bg-8: #16281e;
    --search-bg-9: #23172b;
    --search-bg-10: #191f27;
    --search-bg-11: #232619;
    --search-bg-12: #1b222a;

    /* Channel backgrounds */
    --channel-bg-1: linear-gradient(135deg, #395f74 0%, #23415b 100%);
    --channel-bg-2: linear-gradient(135deg, #571757 0%, #3b2341 100%);
    --channel-bg-3: linear-gradient(135deg, #635029 0%, #42331e 100%);
    --channel-bg-4: linear-gradient(135deg, #2f6042 0%, #21372c 100%);
    --channel-bg-5: linear-gradient(135deg, #776337 0%, #473c1e 100%);
    --channel-bg-6: linear-gradient(135deg, #3b345a 0%, #23296b 100%);
    --channel-bg-7: linear-gradient(135deg, #225656 0%, #163c3c 100%);
    --channel-bg-8: linear-gradient(135deg, #4a2d47 0%, #231d2a 100%);
    --channel-bg-9: linear-gradient(135deg, #387457 0%, #1e3b29 100%);
    --channel-bg-10: linear-gradient(135deg, #343670 0%, #232547 100%);
    --channel-bg-11: linear-gradient(135deg, #6d6b33 0%, #2b2a1e 100%);
    --channel-bg-12: linear-gradient(135deg, #222b2a 0%, #1e2326 100%);

    /* Footer backgrounds - dark */
    --footer-bg-1: linear-gradient(135deg, #202b39 0%, #223045 100%);
    --footer-bg-2: linear-gradient(135deg, #2d1a26 0%, #271f36 100%);
    --footer-bg-3: linear-gradient(135deg, #2b2930 0%, #2c2a36 100%);
    --footer-bg-4: linear-gradient(135deg, #1a1e2c 0%, #22253b 100%);
    --footer-bg-5: linear-gradient(135deg, #241a2e 0%, #23193b 100%);
    --footer-bg-6: linear-gradient(135deg, #1c191d 0%, #232136 100%);
    --footer-bg-7: linear-gradient(135deg, #181924 0%, #1c1d2a 100%);
    --footer-bg-8: linear-gradient(135deg, #1c241e 0%, #13271e 100%);
    --footer-bg-9: linear-gradient(135deg, #23171f 0%, #2c192a 100%);
    --footer-bg-10: linear-gradient(135deg, #181e29 0%, #232d2a 100%);
    --footer-bg-11: linear-gradient(135deg, #201f26 0%, #1c1d22 100%);
    --footer-bg-12: linear-gradient(135deg, #1b1c2c 0%, #232a2f 100%);

    /* Home text colors */
    --home-text-1: #f3f3f3;
    --home-text-2: #dedee5;
    --home-text-3: #c5c5dc;
    --home-text-4: #a8dddd;
    --home-text-5: #eec0e2;
    --home-text-6: #c5c1ea;
    --home-text-7: #ecffe6;
    --home-text-8: #bde3ff;
    --home-text-9: #ffe6cb;
    --home-text-10: #c7fafd;
    --home-text-11: #fdffe9;
    --home-text-12: #e7fffa;

    /* Body text colors */
    --body-text-1: #d4d2d2;
    --body-text-2: #aaa;
    --body-text-3: #bdbdbd;
    --body-text-4: #abb0c3;
    --body-text-5: #8d8daf;
    --body-text-6: #bfbfbf;
    --body-text-7: #bbbad6;
    --body-text-8: #e8e8ee;
    --body-text-9: #eaeaea;
    --body-text-10: #a3bccc;
    --body-text-11: #b8bee0;
    --body-text-12: #e7e7eb;

    /* Article text colors */
    --article-text-1: #ccc;
    --article-text-2: #c1c6d5;
    --article-text-3: #c6cfd5;
    --article-text-4: #e3e3ee;
    --article-text-5: #e4e5ef;
    --article-text-6: #c1ded5;
    --article-text-7: #a4bedb;
    --article-text-8: #c0cbba;
    --article-text-9: #b8e6cc;
    --article-text-10: #d6e7cf;
    --article-text-11: #e4aedd;
    --article-text-12: #bdcdf6;

    /* Search text colors */
    --search-text-1: #c1d6e7;
    --search-text-2: #ecd68e;
    --search-text-3: #68debe;
    --search-text-4: #70e7ad;
    --search-text-5: #fbafd1;
    --search-text-6: #bbb3e7;
    --search-text-7: #c3cfcd;
    --search-text-8: #9ed8fa;
    --search-text-9: #d899db;
    --search-text-10: #b5b5a2;
    --search-text-11: #dbe06e;
    --search-text-12: #95a6e4;

    /* Channel text colors */
    --channel-text-1: #a9cbdb;
    --channel-text-2: #c681db;
    --channel-text-3: #f9d97b;
    --channel-text-4: #a4dfbc;
    --channel-text-5: #dbb2d3;
    --channel-text-6: #c9c9e4;
    --channel-text-7: #52dccd;
    --channel-text-8: #fdafea;
    --channel-text-9: #aaf5cc;
    --channel-text-10: #a5acee;
    --channel-text-11: #eedc96;
    --channel-text-12: #abdacc;

    /* Footer text colors */
    --footer-text-1: #e6e6e6;
    --footer-text-2: #bfbfc7;
    --footer-text-3: #d7d7e0;
    --footer-text-4: #a6f4ff;
    --footer-text-5: #ffd6ef;
    --footer-text-6: #ffb8e6;
    --footer-text-7: #9afeff;
    --footer-text-8: #f6faf8;
    --footer-text-9: #f8f8f6;
    --footer-text-10: #e3fbff;
    --footer-text-11: #b2ffbe;
    --footer-text-12: #c0c0e0;

    /* Tag System - Dark */
    --tag-bg-1: rgba(59, 130, 246, 0.2);
    --tag-bg-2: rgba(245, 158, 11, 0.2);
    --tag-bg-3: rgba(34, 197, 94, 0.2);
    --tag-bg-4: rgba(239, 68, 68, 0.2);
    --tag-bg-5: rgba(147, 51, 234, 0.2);
    --tag-bg-6: rgba(249, 115, 22, 0.2);
    --tag-bg-7: rgba(236, 72, 153, 0.2);
    --tag-bg-8: rgba(6, 182, 212, 0.2);

    --tag-text-1: #60a5fa;
    --tag-text-2: #fbbf24;
    --tag-text-3: #4ade80;
    --tag-text-4: #f87171;
    --tag-text-5: #a78bfa;
    --tag-text-6: #fb923c;
    --tag-text-7: #f472b6;
    --tag-text-8: #22d3ee;

    /* Loading & Skeleton - Dark */
    --skeleton-bg: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    --loading-overlay: rgba(0, 0, 0, 0.7);

    /* Modern Shadows - Dark */
    --shadow-glow-primary: 0 0 20px rgba(33, 128, 141, 0.3);
    --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.3);
    --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.3);
    --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.3);

    --gradient-bg: linear-gradient(var(--color-charcoal-800), var(--color-charcoal-900));
    --color-text-footer: #f2f2f2;
    /* Dark mode overrides */
    --color-surface: #020519;
    --bg-color-hover: #212121;
    --bg-body: #1a1f23;
    --bg-body-nav: #121618;
    --bg-body-block: #202020;
    --bg-body-block-hover: rgb(38 42 45 / 88%);
    --bg-article: #222222;
    --text-color: #dadada;
    --icon-primary: #2094f0;
    --icon-primary-hover: #1c82d2;
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-surface-elevated: var(--color-gray-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.8);
    --color-text-tertiary: var(--color-gray-400);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Legacy */
    --color-surface: #020519;
    --bg-body-nav: #121618;
    --bg-body: var(--color-background);
    --bg-article: var(--color-surface);
    --text-color: var(--color-text);
}

/* ============================================
   UTILITY CLASSES FOR COLORS
   ============================================ */

/* Background Colors */
.bg-background {
    background-color: var(--color-background);
}

.bg-surface {
    background-color: var(--color-surface);
}

.bg-surface-elevated {
    background-color: var(--color-surface-elevated);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-light {
    background-color: var(--color-primary-light);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-success {
    background-color: var(--color-success);
}

.bg-error {
    background-color: var(--color-error);
}

.bg-warning {
    background-color: var(--color-warning);
}

.bg-info {
    background-color: var(--color-info);
}

/* Text Colors */
.text-primary {
    color: var(--color-text);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-inverse {
    color: var(--color-text-inverse);
}

.text-brand {
    color: var(--color-primary);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text-warning {
    color: var(--color-warning);
}

.text-info {
    color: var(--color-info);
}

/* Border Colors */
.border {
    border-color: var(--color-border);
}

.border-light {
    border-color: var(--color-border-light);
}

.border-strong {
    border-color: var(--color-border-strong);
}

.border-primary {
    border-color: var(--color-primary);
}

.border-success {
    border-color: var(--color-success);
}

.border-error {
    border-color: var(--color-error);
}

.border-warning {
    border-color: var(--color-warning);
}

.border-info {
    border-color: var(--color-info);
}

/* Fill Colors (for SVGs) */
.fill-primary {
    fill: var(--color-primary);
}

.fill-secondary {
    fill: var(--color-text-secondary);
}

.fill-tertiary {
    fill: var(--color-text-tertiary);
}

.fill-current {
    fill: currentColor;
}

/* Stroke Colors (for SVGs) */
.stroke-primary {
    stroke: var(--color-primary);
}

.stroke-secondary {
    stroke: var(--color-text-secondary);
}

.stroke-tertiary {
    stroke: var(--color-text-tertiary);
}

.stroke-current {
    stroke: currentColor;
}

/* ============================================
   SHADOW VARIABLES WITH COLOR AWARENESS
   ============================================ */

:root {
    --shadow-xs: 0 1px 2px var(--shadow-color);
    --shadow-sm: 0 1px 3px var(--shadow-color), 0 1px 2px var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color), 0 10px 10px -5px var(--shadow-color);
    --shadow-2xl: 0 25px 50px -12px var(--shadow-color-strong);
    --shadow-inner: inset 0 2px 4px 0 var(--shadow-color);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Dark mode specific shadow adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
}

[data-color-scheme="dark"] {
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ============================================
   LEGACY COMPATIBILITY - Map old theme to new
   ============================================ */

.btn--primary {
    background: var(--color-primary);
    color: var(--color-btn-primary-text);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-card-border);
}



.materialize-red {
    background-color: #e51c23 !important
}

.materialize-red-text {
    color: #e51c23 !important
}

.materialize-red.lighten-5 {
    background-color: #fdeaeb !important
}

.materialize-red-text.text-lighten-5 {
    color: #fdeaeb !important
}

.materialize-red.lighten-4 {
    background-color: #f8c1c3 !important
}

.materialize-red-text.text-lighten-4 {
    color: #f8c1c3 !important
}

.materialize-red.lighten-3 {
    background-color: #f3989b !important
}

.materialize-red-text.text-lighten-3 {
    color: #f3989b !important
}

.materialize-red.lighten-2 {
    background-color: #ee6e73 !important
}

.materialize-red-text.text-lighten-2 {
    color: #ee6e73 !important
}

.materialize-red.lighten-1 {
    background-color: #ea454b !important
}

.materialize-red-text.text-lighten-1 {
    color: #ea454b !important
}

.materialize-red.darken-1 {
    background-color: #d0181e !important
}

.materialize-red-text.text-darken-1 {
    color: #d0181e !important
}

.materialize-red.darken-2 {
    background-color: #b9151b !important
}

.materialize-red-text.text-darken-2 {
    color: #b9151b !important
}

.materialize-red.darken-3 {
    background-color: #a21318 !important
}

.materialize-red-text.text-darken-3 {
    color: #a21318 !important
}

.materialize-red.darken-4 {
    background-color: #8b1014 !important
}

.materialize-red-text.text-darken-4 {
    color: #8b1014 !important
}

.red {
    background-color: #f44336 !important;
    color: #fff
}

.red-text {
    color: #f44336 !important
}

.red.lighten-5 {
    background-color: #ffebee !important
}

.red-text.text-lighten-5 {
    color: #ffebee !important
}

.red.lighten-4 {
    background-color: #ffcdd2 !important
}

.red-text.text-lighten-4 {
    color: #ffcdd2 !important
}

.red.lighten-3 {
    background-color: #ef9a9a !important
}

.red-text.text-lighten-3 {
    color: #ef9a9a !important
}

.red.lighten-2 {
    background-color: #e57373 !important
}

.red-text.text-lighten-2 {
    color: #e57373 !important
}

.red.lighten-1 {
    background-color: #ef5350 !important
}

.red-text.text-lighten-1 {
    color: #ef5350 !important
}

.red.darken-1 {
    background-color: #e53935 !important
}

.red-text.text-darken-1 {
    color: #e53935 !important
}

.red.darken-2 {
    background-color: #d32f2f !important
}

.red-text.text-darken-2 {
    color: #d32f2f !important
}

.red.darken-3 {
    background-color: #c62828 !important
}

.red-text.text-darken-3 {
    color: #c62828 !important
}

.red.darken-4 {
    background-color: #b71c1c !important
}

.red-text.text-darken-4 {
    color: #b71c1c !important
}

.red.accent-1 {
    background-color: #ff8a80 !important
}

.red-text.text-accent-1 {
    color: #ff8a80 !important
}

.red.accent-2 {
    background-color: #ff5252 !important
}

.red-text.text-accent-2 {
    color: #ff5252 !important
}

.red.accent-3 {
    background-color: #ff1744 !important
}

.red-text.text-accent-3 {
    color: #ff1744 !important
}

.red.accent-4 {
    background-color: #d50000 !important
}

.red-text.text-accent-4 {
    color: #d50000 !important
}

.pink {
    background-color: #e91e63 !important
}

.pink-text {
    color: #e91e63 !important
}

.pink.lighten-5 {
    background-color: #fce4ec !important
}

.pink-text.text-lighten-5 {
    color: #fce4ec !important
}

.pink.lighten-4 {
    background-color: #f8bbd0 !important
}

.pink-text.text-lighten-4 {
    color: #f8bbd0 !important
}

.pink.lighten-3 {
    background-color: #f48fb1 !important
}

.pink-text.text-lighten-3 {
    color: #f48fb1 !important
}

.pink.lighten-2 {
    background-color: #f06292 !important
}

.pink-text.text-lighten-2 {
    color: #f06292 !important
}

.pink.lighten-1 {
    background-color: #ec407a !important
}

.pink-text.text-lighten-1 {
    color: #ec407a !important
}

.pink.darken-1 {
    background-color: #d81b60 !important
}

.pink-text.text-darken-1 {
    color: #d81b60 !important
}

.pink.darken-2 {
    background-color: #c2185b !important
}

.pink-text.text-darken-2 {
    color: #c2185b !important
}

.pink.darken-3 {
    background-color: #ad1457 !important
}

.pink-text.text-darken-3 {
    color: #ad1457 !important
}

.pink.darken-4 {
    background-color: #880e4f !important
}

.pink-text.text-darken-4 {
    color: #880e4f !important
}

.pink.accent-1 {
    background-color: #ff80ab !important
}

.pink-text.text-accent-1 {
    color: #ff80ab !important
}

.pink.accent-2 {
    background-color: #ff4081 !important
}

.pink-text.text-accent-2 {
    color: #ff4081 !important
}

.pink.accent-3 {
    background-color: #f50057 !important
}

.pink-text.text-accent-3 {
    color: #f50057 !important
}

.pink.accent-4 {
    background-color: #c51162 !important
}

.pink-text.text-accent-4 {
    color: #c51162 !important
}

.purple {
    background-color: #9c27b0 !important
}

.purple-text {
    color: #9c27b0 !important
}

.purple.lighten-5 {
    background-color: #f3e5f5 !important
}

.purple-text.text-lighten-5 {
    color: #f3e5f5 !important
}

.purple.lighten-4 {
    background-color: #e1bee7 !important
}

.purple-text.text-lighten-4 {
    color: #e1bee7 !important
}

.purple.lighten-3 {
    background-color: #ce93d8 !important
}

.purple-text.text-lighten-3 {
    color: #ce93d8 !important
}

.purple.lighten-2 {
    background-color: #ba68c8 !important
}

.purple-text.text-lighten-2 {
    color: #ba68c8 !important
}

.purple.lighten-1 {
    background-color: #ab47bc !important
}

.purple-text.text-lighten-1 {
    color: #ab47bc !important
}

.purple.darken-1 {
    background-color: #8e24aa !important
}

.purple-text.text-darken-1 {
    color: #8e24aa !important
}

.purple.darken-2 {
    background-color: #7b1fa2 !important
}

.purple-text.text-darken-2 {
    color: #7b1fa2 !important
}

.purple.darken-3 {
    background-color: #6a1b9a !important
}

.purple-text.text-darken-3 {
    color: #6a1b9a !important
}

.purple.darken-4 {
    background-color: #4a148c !important
}

.purple-text.text-darken-4 {
    color: #4a148c !important
}

.purple.accent-1 {
    background-color: #ea80fc !important
}

.purple-text.text-accent-1 {
    color: #ea80fc !important
}

.purple.accent-2 {
    background-color: #e040fb !important
}

.purple-text.text-accent-2 {
    color: #e040fb !important
}

.purple.accent-3 {
    background-color: #d500f9 !important
}

.purple-text.text-accent-3 {
    color: #d500f9 !important
}

.purple.accent-4 {
    background-color: #a0f !important
}

.purple-text.text-accent-4 {
    color: #a0f !important
}

.deep-purple {
    background-color: #673ab7 !important
}

.deep-purple-text {
    color: #673ab7 !important
}

.deep-purple.lighten-5 {
    background-color: #ede7f6 !important
}

.deep-purple-text.text-lighten-5 {
    color: #ede7f6 !important
}

.deep-purple.lighten-4 {
    background-color: #d1c4e9 !important
}

.deep-purple-text.text-lighten-4 {
    color: #d1c4e9 !important
}

.deep-purple.lighten-3 {
    background-color: #b39ddb !important
}

.deep-purple-text.text-lighten-3 {
    color: #b39ddb !important
}

.deep-purple.lighten-2 {
    background-color: #9575cd !important
}

.deep-purple-text.text-lighten-2 {
    color: #9575cd !important
}

.deep-purple.lighten-1 {
    background-color: #7e57c2 !important
}

.deep-purple-text.text-lighten-1 {
    color: #7e57c2 !important
}

.deep-purple.darken-1 {
    background-color: #5e35b1 !important
}

.deep-purple-text.text-darken-1 {
    color: #5e35b1 !important
}

.deep-purple.darken-2 {
    background-color: #512da8 !important
}

.deep-purple-text.text-darken-2 {
    color: #512da8 !important
}

.deep-purple.darken-3 {
    background-color: #4527a0 !important
}

.deep-purple-text.text-darken-3 {
    color: #4527a0 !important
}

.deep-purple.darken-4 {
    background-color: #311b92 !important
}

.deep-purple-text.text-darken-4 {
    color: #311b92 !important
}

.deep-purple.accent-1 {
    background-color: #b388ff !important
}

.deep-purple-text.text-accent-1 {
    color: #b388ff !important
}

.deep-purple.accent-2 {
    background-color: #7c4dff !important
}

.deep-purple-text.text-accent-2 {
    color: #7c4dff !important
}

.deep-purple.accent-3 {
    background-color: #651fff !important
}

.deep-purple-text.text-accent-3 {
    color: #651fff !important
}

.deep-purple.accent-4 {
    background-color: #6200ea !important
}

.deep-purple-text.text-accent-4 {
    color: #6200ea !important
}

.indigo {
    background-color: #3f51b5 !important
}

.indigo-text {
    color: #3f51b5 !important
}

.indigo.lighten-5 {
    background-color: #e8eaf6 !important
}

.indigo-text.text-lighten-5 {
    color: #e8eaf6 !important
}

.indigo.lighten-4 {
    background-color: #c5cae9 !important
}

.indigo-text.text-lighten-4 {
    color: #c5cae9 !important
}

.indigo.lighten-3 {
    background-color: #9fa8da !important
}

.indigo-text.text-lighten-3 {
    color: #9fa8da !important
}

.indigo.lighten-2 {
    background-color: #7986cb !important
}

.indigo-text.text-lighten-2 {
    color: #7986cb !important
}

.indigo.lighten-1 {
    background-color: #5c6bc0 !important
}

.indigo-text.text-lighten-1 {
    color: #5c6bc0 !important
}

.indigo.darken-1 {
    background-color: #3949ab !important
}

.indigo-text.text-darken-1 {
    color: #3949ab !important
}

.indigo.darken-2 {
    background-color: #303f9f !important
}

.indigo-text.text-darken-2 {
    color: #303f9f !important
}

.indigo.darken-3 {
    background-color: #283593 !important
}

.indigo-text.text-darken-3 {
    color: #283593 !important
}

.indigo.darken-4 {
    background-color: #1a237e !important
}

.indigo-text.text-darken-4 {
    color: #1a237e !important
}

.indigo.accent-1 {
    background-color: #8c9eff !important
}

.indigo-text.text-accent-1 {
    color: #8c9eff !important
}

.indigo.accent-2 {
    background-color: #536dfe !important
}

.indigo-text.text-accent-2 {
    color: #536dfe !important
}

.indigo.accent-3 {
    background-color: #3d5afe !important
}

.indigo-text.text-accent-3 {
    color: #3d5afe !important
}

.indigo.accent-4 {
    background-color: #304ffe !important
}

.indigo-text.text-accent-4 {
    color: #304ffe !important
}

.blue {
    background-color: #2196f3 !important;
}

.blue-light {
    background-color: #58aff4 !important;
}

.blue-light-1 {
    background-color: #76c1fc !important;
}

.blue-text-light {
    color: #58aff4 !important;
}

.blue-text-light-1 {
    color: #76c1fc !important;
}

.blue-text {
    color: #2196f3 !important
}

.blue.lighten-5 {
    background-color: #e3f2fd !important
}

.blue-text.text-lighten-5 {
    color: #e3f2fd !important
}

.blue.lighten-4 {
    background-color: #bbdefb !important
}

.blue-text.text-lighten-4 {
    color: #bbdefb !important
}

.blue.lighten-3 {
    background-color: #90caf9 !important
}

.blue-text.text-lighten-3 {
    color: #90caf9 !important
}

.blue.lighten-2 {
    background-color: #64b5f6 !important
}

.blue-text.text-lighten-2 {
    color: #64b5f6 !important
}

.blue.lighten-1 {
    background-color: #42a5f5 !important
}

.blue-text.text-lighten-1 {
    color: #42a5f5 !important
}

.blue.darken-text {
    color: #273a64 !important
}

.blue.darken,
.grey.darken-3 {
    background-color: #273a64 !important
}

.blue.darken-1 {
    background-color: #1e88e5 !important
}

.broadcast-color {
    background-color: #182b3a;
    background-image: linear-gradient(315deg, #182b3a 0, #20a4f3 74%)
}

.blue-text.text-darken-1 {
    color: #1e88e5 !important
}

.blue.darken-2 {
    background-color: #1976d2 !important
}

.blue-text.text-darken-2 {
    color: #1976d2 !important
}

.blue.darken-3 {
    background-color: #1565c0 !important
}

.blue-text.text-darken-3 {
    color: #1565c0 !important
}

.blue.darken-4 {
    background-color: #0d47a1 !important
}

.blue-text.text-darken-4 {
    color: #0d47a1 !important
}

.blue.accent-1 {
    background-color: #82b1ff !important
}

.blue-text.text-accent-1 {
    color: #82b1ff !important
}

.blue.accent-2 {
    background-color: #448aff !important
}

.blue-text.text-accent-2 {
    color: #448aff !important
}

.blue.accent-3 {
    background-color: #2979ff !important
}

.blue-text.text-accent-3 {
    color: #2979ff !important
}

.blue.accent-4 {
    background-color: #2962ff !important
}

.blue-text.text-accent-4 {
    color: #2962ff !important
}

.light-blue {
    background-color: #03a9f4 !important
}

.light-blue-text {
    color: #03a9f4 !important
}

.light-blue.lighten-5 {
    background-color: #e1f5fe !important
}

.light-blue-text.text-lighten-5 {
    color: #e1f5fe !important
}

.light-blue.lighten-4 {
    background-color: #b3e5fc !important
}

.light-blue-text.text-lighten-4 {
    color: #b3e5fc !important
}

.light-blue.lighten-3 {
    background-color: #81d4fa !important
}

.light-blue-text.text-lighten-3 {
    color: #81d4fa !important
}

.light-blue.lighten-2 {
    background-color: #4fc3f7 !important
}

.light-blue-text.text-lighten-2 {
    color: #4fc3f7 !important
}

.light-blue.lighten-1 {
    background-color: #29b6f6 !important
}

.light-blue-text.text-lighten-1 {
    color: #29b6f6 !important
}

.light-blue.darken-1 {
    background-color: #039be5 !important
}

.light-blue-text.text-darken-1 {
    color: #039be5 !important
}

.light-blue.darken-2 {
    background-color: #0288d1 !important
}

.light-blue-text.text-darken-2 {
    color: #0288d1 !important
}

.light-blue.darken-3 {
    background-color: #0277bd !important
}

.light-blue-text.text-darken-3 {
    color: #0277bd !important
}

.light-blue.darken-4 {
    background-color: #01579b !important
}

.light-blue-text.text-darken-4 {
    color: #01579b !important
}

.light-blue.accent-1 {
    background-color: #80d8ff !important
}

.light-blue-text.text-accent-1 {
    color: #80d8ff !important
}

.light-blue.accent-2 {
    background-color: #40c4ff !important
}

.light-blue-text.text-accent-2 {
    color: #40c4ff !important
}

.light-blue.accent-3 {
    background-color: #00b0ff !important
}

.light-blue-text.text-accent-3 {
    color: #00b0ff !important
}

.light-blue.accent-4 {
    background-color: #0091ea !important
}

.light-blue-text.text-accent-4 {
    color: #0091ea !important
}

.cyan {
    background-color: #00bcd4 !important
}

.cyan-text {
    color: #00bcd4 !important
}

.cyan.lighten-5 {
    background-color: #e0f7fa !important
}

.cyan-text.text-lighten-5 {
    color: #e0f7fa !important
}

.cyan.lighten-4 {
    background-color: #b2ebf2 !important
}

.cyan-text.text-lighten-4 {
    color: #b2ebf2 !important
}

.cyan.lighten-3 {
    background-color: #80deea !important
}

.cyan-text.text-lighten-3 {
    color: #80deea !important
}

.cyan.lighten-2 {
    background-color: #4dd0e1 !important
}

.cyan-text.text-lighten-2 {
    color: #4dd0e1 !important
}

.cyan.lighten-1 {
    background-color: #26c6da !important
}

.cyan-text.text-lighten-1 {
    color: #26c6da !important
}

.cyan.darken-1 {
    background-color: #00acc1 !important
}

.cyan-text.text-darken-1 {
    color: #00acc1 !important
}

.cyan.darken-2 {
    background-color: #0097a7 !important
}

.cyan-text.text-darken-2 {
    color: #0097a7 !important
}

.cyan.darken-3 {
    background-color: #00838f !important
}

.cyan-text.text-darken-3 {
    color: #00838f !important
}

.cyan.darken-4 {
    background-color: #006064 !important
}

.cyan-text.text-darken-4 {
    color: #006064 !important
}

.cyan.accent-1 {
    background-color: #84ffff !important
}

.cyan-text.text-accent-1 {
    color: #84ffff !important
}

.cyan.accent-2 {
    background-color: #18ffff !important
}

.cyan-text.text-accent-2 {
    color: #18ffff !important
}

.cyan.accent-3 {
    background-color: #00e5ff !important
}

.cyan-text.text-accent-3 {
    color: #00e5ff !important
}

.cyan.accent-4 {
    background-color: #00b8d4 !important
}

.cyan-text.text-accent-4 {
    color: #00b8d4 !important
}

.teal {
    background-color: #009688 !important
}

.teal-text {
    color: #009688 !important
}

.teal.lighten-5 {
    background-color: #e0f2f1 !important
}

.teal-text.text-lighten-5 {
    color: #e0f2f1 !important
}

.teal.lighten-4 {
    background-color: #b2dfdb !important
}

.teal-text.text-lighten-4 {
    color: #b2dfdb !important
}

.teal.lighten-3 {
    background-color: #80cbc4 !important
}

.teal-text.text-lighten-3 {
    color: #80cbc4 !important
}

.teal.lighten-2 {
    background-color: #4db6ac !important
}

.teal-text.text-lighten-2 {
    color: #4db6ac !important
}

.teal.lighten-1 {
    background-color: #26a69a !important
}

.teal-text.text-lighten-1 {
    color: #26a69a !important
}

.teal.darken-1 {
    background-color: #00897b !important
}

.teal-text.text-darken-1 {
    color: #00897b !important
}

.teal.darken-2 {
    background-color: #00796b !important
}

.teal-text.text-darken-2 {
    color: #00796b !important
}

.teal.darken-3 {
    background-color: #00695c !important
}

.teal-text.text-darken-3 {
    color: #00695c !important
}

.teal.darken-4 {
    background-color: #004d40 !important
}

.teal-text.text-darken-4 {
    color: #004d40 !important
}

.teal.accent-1 {
    background-color: #a7ffeb !important
}

.teal-text.text-accent-1 {
    color: #a7ffeb !important
}

.teal.accent-2 {
    background-color: #64ffda !important
}

.teal-text.text-accent-2 {
    color: #64ffda !important
}

.teal.accent-3 {
    background-color: #1de9b6 !important
}

.teal-text.text-accent-3 {
    color: #1de9b6 !important
}

.teal.accent-4 {
    background-color: #00bfa5 !important
}

.teal-text.text-accent-4 {
    color: #00bfa5 !important
}

.green {
    background-color: #4caf50 !important
}

.green-text {
    color: #4caf50 !important
}

.green.lighten-5 {
    background-color: #e8f5e9 !important
}

.green-text.text-lighten-5 {
    color: #e8f5e9 !important
}

.green.lighten-4 {
    background-color: #c8e6c9 !important
}

.green-text.text-lighten-4 {
    color: #c8e6c9 !important
}

.green.lighten-3 {
    background-color: #a5d6a7 !important
}

.green-text.text-lighten-3 {
    color: #a5d6a7 !important
}

.green.lighten-2 {
    background-color: #81c784 !important
}

.green-text.text-lighten-2 {
    color: #81c784 !important
}

.green.lighten-1 {
    background-color: #66bb6a !important
}

.green-text.text-lighten-1 {
    color: #66bb6a !important
}

.green.darken-1 {
    background-color: #43a047 !important
}

.green-text.text-darken-1 {
    color: #43a047 !important
}

.green.darken-2 {
    background-color: #388e3c !important
}

.green-text.text-darken-2 {
    color: #388e3c !important
}

.green.darken-3 {
    background-color: #2e7d32 !important
}

.green-text.text-darken-3 {
    color: #2e7d32 !important
}

.green.darken-4 {
    background-color: #1b5e20 !important
}

.green-text.text-darken-4 {
    color: #1b5e20 !important
}

.green.accent-1 {
    background-color: #b9f6ca !important
}

.green-text.text-accent-1 {
    color: #b9f6ca !important
}

.green.accent-2 {
    background-color: #69f0ae !important
}

.green-text.text-accent-2 {
    color: #69f0ae !important
}

.green.accent-3 {
    background-color: #00e676 !important
}

.green-text.text-accent-3 {
    color: #00e676 !important
}

.green.accent-4 {
    background-color: #00c853 !important
}

.green-text.text-accent-4 {
    color: #00c853 !important
}

.light-green {
    background-color: #8bc34a !important
}

.light-green-text {
    color: #8bc34a !important
}

.light-green.lighten-5 {
    background-color: #f1f8e9 !important
}

.light-green-text.text-lighten-5 {
    color: #f1f8e9 !important
}

.light-green.lighten-4 {
    background-color: #dcedc8 !important
}

.light-green-text.text-lighten-4 {
    color: #dcedc8 !important
}

.light-green.lighten-3 {
    background-color: #c5e1a5 !important
}

.light-green-text.text-lighten-3 {
    color: #c5e1a5 !important
}

.light-green.lighten-2 {
    background-color: #aed581 !important
}

.light-green-text.text-lighten-2 {
    color: #aed581 !important
}

.light-green.lighten-1 {
    background-color: #9ccc65 !important
}

.light-green-text.text-lighten-1 {
    color: #9ccc65 !important
}

.light-green.darken-1 {
    background-color: #7cb342 !important
}

.light-green-text.text-darken-1 {
    color: #7cb342 !important
}

.light-green.darken-2 {
    background-color: #689f38 !important
}

.light-green-text.text-darken-2 {
    color: #689f38 !important
}

.light-green.darken-3 {
    background-color: #558b2f !important
}

.light-green-text.text-darken-3 {
    color: #558b2f !important
}

.light-green.darken-4 {
    background-color: #33691e !important
}

.light-green-text.text-darken-4 {
    color: #33691e !important
}

.light-green.accent-1 {
    background-color: #ccff90 !important
}

.light-green-text.text-accent-1 {
    color: #ccff90 !important
}

.light-green.accent-2 {
    background-color: #b2ff59 !important
}

.light-green-text.text-accent-2 {
    color: #b2ff59 !important
}

.light-green.accent-3 {
    background-color: #76ff03 !important
}

.light-green-text.text-accent-3 {
    color: #76ff03 !important
}

.light-green.accent-4 {
    background-color: #64dd17 !important
}

.light-green-text.text-accent-4 {
    color: #64dd17 !important
}

.lime {
    background-color: #cddc39 !important
}

.lime-text {
    color: #cddc39 !important
}

.lime.lighten-5 {
    background-color: #f9fbe7 !important
}

.lime-text.text-lighten-5 {
    color: #f9fbe7 !important
}

.lime.lighten-4 {
    background-color: #f0f4c3 !important
}

.lime-text.text-lighten-4 {
    color: #f0f4c3 !important
}

.lime.lighten-3 {
    background-color: #e6ee9c !important
}

.lime-text.text-lighten-3 {
    color: #e6ee9c !important
}

.lime.lighten-2 {
    background-color: #dce775 !important
}

.lime-text.text-lighten-2 {
    color: #dce775 !important
}

.lime.lighten-1 {
    background-color: #d4e157 !important
}

.lime-text.text-lighten-1 {
    color: #d4e157 !important
}

.lime.darken-1 {
    background-color: #c0ca33 !important
}

.lime-text.text-darken-1 {
    color: #c0ca33 !important
}

.lime.darken-2 {
    background-color: #afb42b !important
}

.lime-text.text-darken-2 {
    color: #afb42b !important
}

.lime.darken-3 {
    background-color: #9e9d24 !important
}

.lime-text.text-darken-3 {
    color: #9e9d24 !important
}

.lime.darken-4 {
    background-color: #827717 !important
}

.lime-text.text-darken-4 {
    color: #827717 !important
}

.lime.accent-1 {
    background-color: #f4ff81 !important
}

.lime-text.text-accent-1 {
    color: #f4ff81 !important
}

.lime.accent-2 {
    background-color: #eeff41 !important
}

.lime-text.text-accent-2 {
    color: #eeff41 !important
}

.lime.accent-3 {
    background-color: #c6ff00 !important
}

.lime-text.text-accent-3 {
    color: #c6ff00 !important
}

.lime.accent-4 {
    background-color: #aeea00 !important
}

.lime-text.text-accent-4 {
    color: #aeea00 !important
}

.yellow {
    background-color: yellow;
}

.yellow-text {
    color: #ffeb3b !important
}

.yellow.lighten-5 {
    background-color: #fffde7 !important
}

.yellow-text.text-lighten-5 {
    color: #fffde7 !important
}

.yellow.lighten-4 {
    background-color: #fff9c4 !important
}

.yellow-text.text-lighten-4 {
    color: #fff9c4 !important
}

.yellow.lighten-3 {
    background-color: #fff59d !important
}

.yellow-text.text-lighten-3 {
    color: #fff59d !important
}

.yellow.lighten-2 {
    background-color: #fff176 !important
}

.yellow-text.text-lighten-2 {
    color: #fff176 !important
}

.yellow.lighten-1 {
    background-color: #ffee58 !important
}

.yellow-text.text-lighten-1 {
    color: #ffee58 !important
}

.yellow.darken-1 {
    background-color: #fdd835 !important
}

.yellow-text.text-darken-1 {
    color: #fdd835 !important
}

.yellow.darken-2 {
    background-color: #fbc02d !important
}

.yellow-text.text-darken-2 {
    color: #fbc02d !important
}

.yellow.darken-3 {
    background-color: #f9a825 !important
}

.yellow-text.text-darken-3 {
    color: #f9a825 !important
}

.yellow.darken-4 {
    background-color: #f57f17 !important
}

.yellow-text.text-darken-4 {
    color: #f57f17 !important
}

.yellow.accent-1 {
    background-color: #ffff8d !important
}

.yellow-text.text-accent-1 {
    color: #ffff8d !important
}

.yellow.accent-2 {
    background-color: #ff0 !important
}

.yellow-text.text-accent-2 {
    color: #ff0 !important
}

.yellow.accent-3 {
    background-color: #ffea00 !important
}

.yellow-text.text-accent-3 {
    color: #ffea00 !important
}

.yellow.accent-4 {
    background-color: #ffd600 !important
}

.yellow-text.text-accent-4 {
    color: #ffd600 !important
}

.amber {
    background-color: #ffc107 !important
}

.amber-text {
    color: #ffc107 !important
}

.amber.lighten-5 {
    background-color: #fff8e1 !important
}

.amber-text.text-lighten-5 {
    color: #fff8e1 !important
}

.amber.lighten-4 {
    background-color: #ffecb3 !important
}

.amber-text.text-lighten-4 {
    color: #ffecb3 !important
}

.amber.lighten-3 {
    background-color: #ffe082 !important
}

.amber-text.text-lighten-3 {
    color: #ffe082 !important
}

.amber.lighten-2 {
    background-color: #ffd54f !important
}

.amber-text.text-lighten-2 {
    color: #ffd54f !important
}

.amber.lighten-1 {
    background-color: #ffca28 !important
}

.amber-text.text-lighten-1 {
    color: #ffca28 !important
}

.amber.darken-1 {
    background-color: #ffb300 !important
}

.amber-text.text-darken-1 {
    color: #ffb300 !important
}

.amber.darken-2 {
    background-color: #ffa000 !important
}

.amber-text.text-darken-2 {
    color: #ffa000 !important
}

.amber.darken-3 {
    background-color: #ff8f00 !important
}

.amber-text.text-darken-3 {
    color: #ff8f00 !important
}

.amber.darken-4 {
    background-color: #ff6f00 !important
}

.amber-text.text-darken-4 {
    color: #ff6f00 !important
}

.amber.accent-1 {
    background-color: #ffe57f !important
}

.amber-text.text-accent-1 {
    color: #ffe57f !important
}

.amber.accent-2 {
    background-color: #ffd740 !important
}

.amber-text.text-accent-2 {
    color: #ffd740 !important
}

.amber.accent-3 {
    background-color: #ffc400 !important
}

.amber-text.text-accent-3 {
    color: #ffc400 !important
}

.amber.accent-4 {
    background-color: #ffab00 !important
}

.amber-text.text-accent-4 {
    color: #ffab00 !important
}

.orange {
    background-color: #ff9800 !important
}

.orange-text {
    color: #ff9800 !important
}

.orange.lighten-5 {
    background-color: #fff3e0 !important
}

.orange-text.text-lighten-5 {
    color: #fff3e0 !important
}

.orange.lighten-4 {
    background-color: #ffe0b2 !important
}

.orange-text.text-lighten-4 {
    color: #ffe0b2 !important
}

.orange.lighten-3 {
    background-color: #ffcc80 !important
}

.orange-text.text-lighten-3 {
    color: #ffcc80 !important
}

.orange.lighten-2 {
    background-color: #ffb74d !important
}

.orange-text.text-lighten-2 {
    color: #ffb74d !important
}

.orange.lighten-1 {
    background-color: #ffa726 !important
}

.orange-text.text-lighten-1 {
    color: #ffa726 !important
}

.orange.darken-1 {
    background-color: #fb8c00 !important
}

.orange-text.text-darken-1 {
    color: #fb8c00 !important
}

.orange.darken-2 {
    background-color: #f57c00 !important
}

.orange-text.text-darken-2 {
    color: #f57c00 !important
}

.orange.darken-3 {
    background-color: #ef6c00 !important
}

.orange-text.text-darken-3 {
    color: #ef6c00 !important
}

.orange.darken-4 {
    background-color: #e65100 !important
}

.orange-text.text-darken-4 {
    color: #e65100 !important
}

.orange.accent-1 {
    background-color: #ffd180 !important
}

.orange-text.text-accent-1 {
    color: #ffd180 !important
}

.orange.accent-2 {
    background-color: #ffab40 !important
}

.orange-text.text-accent-2 {
    color: #ffab40 !important
}

.orange.accent-3 {
    background-color: #ff9100 !important
}

.orange-text.text-accent-3 {
    color: #ff9100 !important
}

.orange.accent-4 {
    background-color: #ff6d00 !important
}

.orange-text.text-accent-4 {
    color: #ff6d00 !important
}

.deep-orange {
    background-color: #ff5722 !important
}

.deep-orange-text {
    color: #ff5722 !important
}

.deep-orange.lighten-5 {
    background-color: #fbe9e7 !important
}

.deep-orange-text.text-lighten-5 {
    color: #fbe9e7 !important
}

.deep-orange.lighten-4 {
    background-color: #ffccbc !important
}

.deep-orange-text.text-lighten-4 {
    color: #ffccbc !important
}

.deep-orange.lighten-3 {
    background-color: #ffab91 !important
}

.deep-orange-text.text-lighten-3 {
    color: #ffab91 !important
}

.deep-orange.lighten-2 {
    background-color: #ff8a65 !important
}

.deep-orange-text.text-lighten-2 {
    color: #ff8a65 !important
}

.deep-orange.lighten-1 {
    background-color: #ff7043 !important
}

.deep-orange-text.text-lighten-1 {
    color: #ff7043 !important
}

.deep-orange.darken-1 {
    background-color: #f4511e !important
}

.deep-orange-text.text-darken-1 {
    color: #f4511e !important
}

.deep-orange.darken-2 {
    background-color: #e64a19 !important
}

.deep-orange-text.text-darken-2 {
    color: #e64a19 !important
}

.deep-orange.darken-3 {
    background-color: #d84315 !important
}

.deep-orange-text.text-darken-3 {
    color: #d84315 !important
}

.deep-orange.darken-4 {
    background-color: #bf360c !important
}

.deep-orange-text.text-darken-4 {
    color: #bf360c !important
}

.deep-orange.accent-1 {
    background-color: #ff9e80 !important
}

.deep-orange-text.text-accent-1 {
    color: #ff9e80 !important
}

.deep-orange.accent-2 {
    background-color: #ff6e40 !important
}

.deep-orange-text.text-accent-2 {
    color: #ff6e40 !important
}

.deep-orange.accent-3 {
    background-color: #ff3d00 !important
}

.deep-orange-text.text-accent-3 {
    color: #ff3d00 !important
}

.deep-orange.accent-4 {
    background-color: #dd2c00 !important
}

.deep-orange-text.text-accent-4 {
    color: #dd2c00 !important
}

.brown {
    background-color: #795548 !important
}

.brown-text {
    color: #795548 !important
}

.brown.lighten-5 {
    background-color: #efebe9 !important
}

.brown-text.text-lighten-5 {
    color: #efebe9 !important
}

.brown.lighten-4 {
    background-color: #d7ccc8 !important
}

.brown-text.text-lighten-4 {
    color: #d7ccc8 !important
}

.brown.lighten-3 {
    background-color: #bcaaa4 !important
}

.brown-text.text-lighten-3 {
    color: #bcaaa4 !important
}

.brown.lighten-2 {
    background-color: #a1887f !important
}

.brown-text.text-lighten-2 {
    color: #a1887f !important
}

.brown.lighten-1 {
    background-color: #8d6e63 !important
}

.brown-text.text-lighten-1 {
    color: #8d6e63 !important
}

.brown.darken-1 {
    background-color: #6d4c41 !important
}

.brown-text.text-darken-1 {
    color: #6d4c41 !important
}

.brown.darken-2 {
    background-color: #5d4037 !important
}

.brown-text.text-darken-2 {
    color: #5d4037 !important
}

.brown.darken-3 {
    background-color: #4e342e !important
}

.brown-text.text-darken-3 {
    color: #4e342e !important
}

.brown.darken-4 {
    background-color: #3e2723 !important
}

.brown-text.text-darken-4 {
    color: #3e2723 !important
}

.blue-grey {
    background-color: #607d8b !important
}

.blue-grey-text {
    color: #607d8b !important
}

.blue-grey.lighten-5 {
    background-color: #eceff1 !important
}

.blue-grey-text.text-lighten-5 {
    color: #eceff1 !important
}

.blue-grey.lighten-4 {
    background-color: #cfd8dc !important
}

.blue-grey-text.text-lighten-4 {
    color: #cfd8dc !important
}

.blue-grey.lighten-3 {
    background-color: #b0bec5 !important
}

.blue-grey-text.text-lighten-3 {
    color: #b0bec5 !important
}

.blue-grey.lighten-2 {
    background-color: #90a4ae !important
}

.blue-grey-text.text-lighten-2 {
    color: #90a4ae !important
}

.blue-grey.lighten-1 {
    background-color: #78909c !important
}

.blue-grey-text.text-lighten-1 {
    color: #78909c !important
}

.blue-grey.darken-1 {
    background-color: #546e7a !important
}

.blue-grey-text.text-darken-1 {
    color: #546e7a !important
}

.blue-grey.darken-2 {
    background-color: #455a64 !important
}

.blue-grey-text.text-darken-2 {
    color: #455a64 !important
}

.blue-grey.darken-3 {
    background-color: #37474f !important
}

.blue-grey-text.text-darken-3 {
    color: #37474f !important
}

.blue-grey.darken-4 {
    background-color: #263238 !important
}

.blue-grey-text.text-darken-4 {
    color: #263238 !important
}

.grey {
    background-color: #9e9e9e !important
}

.grey-text {
    color: #9e9e9e !important
}

.grey.lighten-5 {
    background-color: #fafafa !important
}

.grey-text.text-lighten-5 {
    color: #fafafa !important
}

.grey.lighten-4 {
    background-color: #f5f5f5 !important
}

.grey-text.text-lighten-4 {
    color: #f5f5f5 !important
}

.grey.lighten-3 {
    background-color: #eee !important
}

.grey-text.text-lighten-3 {
    color: #eee !important
}

.grey.lighten-2 {
    background-color: #e0e0e0 !important
}

.grey-text.text-lighten-2 {
    color: #e0e0e0 !important
}

.grey.lighten-1 {
    background-color: #bdbdbd !important
}

.grey-text.text-lighten-1 {
    color: #bdbdbd !important
}

.grey.darken-1 {
    background-color: #757575 !important
}

.grey-text.text-darken-1 {
    color: #757575 !important
}

.grey.darken-2 {
    background-color: #616161 !important
}

.grey-text.text-darken-2 {
    color: #616161 !important
}

.grey-text.text-darken-3 {
    color: #424242 !important
}

.grey.darken-4 {
    background-color: #212121 !important
}

.grey-text.text-darken-4 {
    color: #212121 !important
}

.black,
.shades.black {
    background-color: #000 !important
}

.black-text,
.shades-text.text-black {
    color: #000 !important
}

.shades.white,
.white {
    background-color: #fff !important
}

.shades-text.text-white,
.white-text {
    color: #fff !important
}

.shades.transparent,
.transparent {
    background-color: transparent !important
}

.shades-text.text-transparent,
.transparent-text {
    color: transparent !important
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    background-color: #777;
    border-radius: 10px
}

.badge:empty {
    display: none
}

.btn .badge {
    position: relative;
    top: -1px
}

.btn-xs .badge {
    top: 0;
    padding: 1px 5px
}

a.badge:focus,
a.badge:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

.nav-pills>.active>a>.badge,
a.list-group-item.active>.badge {
    color: #3498db;
    background-color: #fff
}

.nav-pills>li>a>.badge {
    margin-left: 3px
}

.bg-primary {
    background-color: #3498db !important;
    color: #e1f0fa
}

.bg-primary.darker,
a.bg-primary:hover {
    background-color: #217dbb !important
}

.bg-primary .text-muted {
    color: #b0dbf8
}

.bg-primary .text-darken {
    color: #217dbb
}

.bg-primary.light {
    background-color: #4ea5e0 !important
}

.bg-primary.lighter {
    background-color: #5faee3 !important
}

.bg-primary.dark {
    background-color: #2489cc !important
}

.bg-alert .open>a,
.bg-alert .open>a:focus,
.bg-alert .open>a:hover,
.bg-danger .open>a,
.bg-danger .open>a:focus,
.bg-danger .open>a:hover,
.bg-dark .open>a,
.bg-dark .open>a:focus,
.bg-dark .open>a:hover,
.bg-info .open>a,
.bg-info .open>a:focus,
.bg-info .open>a:hover,
.bg-primary .open>a,
.bg-primary .open>a:focus,
.bg-primary .open>a:hover,
.bg-success .open>a,
.bg-success .open>a:focus,
.bg-success .open>a:hover,
.bg-system .open>a,
.bg-system .open>a:focus,
.bg-system .open>a:hover,
.bg-warning .open>a,
.bg-warning .open>a:focus,
.bg-warning .open>a:hover,
.text-white,
.text-white-light,
.text-white-lighter {
    color: #fff
}

.bg-success {
    background-color: #70ca63 !important;
    color: #fcfefb
}

.bg-success.darker,
a.bg-success:hover {
    background-color: #4fbb3f !important
}

.bg-success .text-muted {
    color: #d6f5d1
}

.bg-success .text-darken {
    color: #4fbb3f
}

.bg-success.light {
    background-color: #85d27a !important
}

.bg-success.lighter {
    background-color: #93d789 !important
}

.bg-success.dark {
    background-color: #5bc24c !important
}

.bg-info {
    background-color: #3bafda !important;
    color: #e7f5fa
}

.bg-info.darker,
a.bg-info:hover {
    background-color: #2494be !important
}

.bg-info .text-muted {
    color: #b6e6f8
}

.bg-info .text-darken {
    color: #2494be
}

.bg-info.light {
    background-color: #55badf !important
}

.bg-info.lighter {
    background-color: #66c1e2 !important
}

.bg-info.dark {
    background-color: #27a2cf !important
}

.bg-warning {
    background-color: #f6bb42 !important;
    color: #fff
}

.bg-warning.darker,
a.bg-warning:hover {
    background-color: #f4a911 !important
}

.bg-warning .text-muted {
    color: #fff0d2
}

.bg-warning .text-darken {
    color: #f4a911
}

.bg-warning.light {
    background-color: #f7c65f !important
}

.bg-warning.lighter {
    background-color: #f8cd73 !important
}

.bg-warning.dark {
    background-color: #f5b025 !important
}

.bg-danger {
    background-color: #df5640 !important;
    color: #fcf1ef
}

.bg-danger.darker,
a.bg-danger:hover {
    background-color: #ca3922 !important
}

.bg-danger .text-muted {
    color: #fac6be
}

.bg-danger .text-darken {
    color: #ca3922
}

.bg-danger.light {
    background-color: #e36d5a !important
}

.bg-danger.lighter {
    background-color: #e67d6c !important
}

.bg-danger.dark {
    background-color: #db3f26 !important
}

.bg-alert {
    background-color: #967adc !important;
    color: #fff
}

.bg-alert.darker,
a.bg-alert:hover {
    background-color: #7652d1 !important
}

.bg-alert .text-muted {
    color: #f5f2fd
}

.bg-alert .text-darken {
    color: #7652d1
}

.bg-alert.light {
    background-color: #a992e2 !important
}

.bg-alert.lighter {
    background-color: #b6a2e7 !important
}

.bg-alert.dark {
    background-color: #8362d6 !important
}

.bg-system {
    background-color: #37bc9b !important;
    color: #cef1e8
}

.bg-system.darker,
a.bg-system:hover {
    background-color: #2b957a !important
}

.bg-system .text-muted {
    color: #9eeeda
}

.bg-system .text-darken {
    color: #2b957a
}

.bg-system.light {
    background-color: #48c9a9 !important
}

.bg-system.lighter {
    background-color: #58ceb1 !important
}

.bg-system.dark {
    background-color: #30a487 !important
}

.bg-dark {
    background-color: rgba(33, 88, 119, .64) !important;
    color: #f3effc
}

.bg-dark.darker,
a.bg-dark:hover {
    background-color: #252832 !important
}

.bg-dark .text-muted {
    color: #717eb2
}

.bg-dark .text-darken {
    color: #252832
}

.bg-dark.light {
    background-color: #484d61 !important
}

.bg-dark.lighter {
    background-color: #51566c !important
}

.bg-dark.dark {
    background-color: #2e313d !important
}

.bg-light {
    background-color: #fafafa;
    color: #666
}

a.bg-light:hover {
    background-color: #e8e8e8 !important
}

.bg-light .text-muted,
.bg-white .text-muted,
.text-muted {
    color: #999
}

.bg-light .text-darken,
.bg-white .text-darken {
    color: #222
}

.bg-light.light,
.bg-white.light {
    background-color: #fefefe
}

.bg-light.lighter,
.bg-white.lighter {
    background-color: #fff
}

.bg-light.dark,
.bg-white.dark {
    background-color: #f2f2f2
}

.bg-light.darker,
.bg-white.darker {
    background-color: #e7e7e7
}

.bg-white {
    color: #666;
    background-color: #fff !important
}

a.bg-white:hover {
    background-color: #ededed !important
}

.badge-default,
.label-default {
    background-color: #777
}

.badge-default[href]:focus,
.badge-default[href]:hover,
.label-default[href]:focus,
.label-default[href]:hover {
    background-color: #5e5e5e
}

.badge-primary,
.label-primary {
    background-color: #3498db
}

.badge-primary[href]:focus,
.badge-primary[href]:hover,
.label-primary[href]:focus,
.label-primary[href]:hover {
    background-color: #217dbb
}

.badge-success,
.label-success {
    background-color: #70ca63
}

.badge-success[href]:focus,
.badge-success[href]:hover,
.label-success[href]:focus,
.label-success[href]:hover {
    background-color: #4fbb3f
}

.badge-info,
.label-info {
    background-color: #3bafda
}

.badge-info[href]:focus,
.badge-info[href]:hover,
.label-info[href]:focus,
.label-info[href]:hover {
    background-color: #2494be
}

.badge-warning,
.label-warning {
    background-color: #f6bb42
}

.badge-warning[href]:focus,
.badge-warning[href]:hover,
.label-warning[href]:focus,
.label-warning[href]:hover {
    background-color: #f4a911
}

.badge-danger,
.label-danger {
    background-color: #df5640
}

.badge-danger[href]:focus,
.badge-danger[href]:hover,
.label-danger[href]:focus,
.label-danger[href]:hover {
    background-color: #ca3922
}

.badge-alert,
.label-alert {
    background-color: #967adc
}

.badge-alert[href]:focus,
.badge-alert[href]:hover,
.label-alert[href]:focus,
.label-alert[href]:hover {
    background-color: #7652d1
}

.badge-system,
.label-system {
    background-color: #37bc9b
}

.badge-system[href]:focus,
.badge-system[href]:hover,
.label-system[href]:focus,
.label-system[href]:hover {
    background-color: #2b957a
}

.badge-dark,
.label-dark {
    background-color: #3b3f4f
}

.badge-dark[href]:focus,
.badge-dark[href]:hover,
.label-dark[href]:focus,
.label-dark[href]:hover {
    background-color: #252832
}

.label-muted {
    background-color: #aaa
}

.label-muted[href]:focus,
.label-muted[href]:hover {
    background-color: #919191
}

a.text-white:hover {
    color: grey
}

.text-white-dark {
    color: #f6f6f6
}

.text-white-darker {
    color: #ececec
}

a.text-muted:hover {
    color: #191919
}

.text-muted-light {
    color: #a2a2a2
}

.text-muted-lighter {
    color: #acacac
}

.text-muted-dark {
    color: #909090
}

.text-muted-darker {
    color: #868686
}

.text-primary {
    color: #3498db
}

a.text-primary:hover {
    color: #02090e
}

.text-primary-light {
    color: #43a0de
}

.text-primary-lighter {
    color: #54a8e1
}

.text-primary-dark {
    color: #2690d7
}

.text-primary-darker {
    color: #2384c6
}

.text-success {
    color: #70ca63
}

a.text-success:hover {
    color: #0f220c
}

.text-success-light {
    color: #7ccf70
}

.text-success-lighter {
    color: #8ad480
}

.text-success-dark {
    color: #64c556
}

.text-success-darker {
    color: #56c046
}

.text-info {
    color: #3bafda
}

a.text-info:hover {
    color: #030e13
}

.text-info-light {
    color: #4ab5dd
}

.text-info-lighter {
    color: #5bbce0
}

.text-info-dark {
    color: #2ca9d7
}

.text-info-darker {
    color: #269dc9
}

.text-warning {
    color: #f6bb42
}

a.text-warning:hover {
    color: #362503
}

.text-warning-light {
    color: #f7c153
}

.text-warning-lighter {
    color: #f8c867
}

.text-warning-dark {
    color: #f5b531
}

.text-warning-darker {
    color: #f4ae1d
}

.text-danger {
    color: #df5640
}

a.text-danger:hover {
    color: #1b0805
}

.text-danger-light {
    color: #e2644f
}

.text-danger-lighter {
    color: #e47361
}

.text-danger-dark {
    color: #dc4831
}

.text-danger-darker {
    color: #d53c24
}

.text-alert {
    color: #967adc
}

a.text-alert:hover {
    color: #211245
}

.text-alert-light {
    color: #a188e0
}

.text-alert-lighter {
    color: #ae98e4
}

.text-alert-dark {
    color: #8b6cd8
}

.text-alert-darker {
    color: #7e5cd4
}

.text-system {
    color: #37bc9b
}

a.text-dark:hover,
a.text-system:hover {
    color: #000
}

.text-system-light {
    color: #3ec7a5
}

.text-system-lighter {
    color: #4ecbac
}

.text-system-dark {
    color: #33ae90
}

.text-system-darker {
    color: #2e9e83
}

.text-dark {
    color: #3b3f4f
}

.text-dark-light {
    color: #434759
}

.text-dark-lighter {
    color: #4b5065
}

.text-dark-dark {
    color: #333745
}

.text-dark-darker {
    color: #2b2e39
}

.text-tp {
    color: rgba(0, 0, 0, .2)
}

a.text-tp:hover {
    color: rgba(0, 0, 0, .3)
}


.twitter {
    background: #1da1f2;
    color: white;
}

.twitter:hover {
    background-color: #0eaad6;
}

.facebook {
    background-color: #1776f1;
    color: white;
}

.facebook:hover {
    background-color: #1463ca;
}

.googleplus {
    background: #dd4b39;
    color: #fff;
}

.googleplus:hover {
    background-color: #ce2616;
}

.pinterest {
    background: #cb2027;
}

.pinterest:hover {
    background: #aa1d22;
}

.linkedin {
    background: #007bb6;
    color: white;
}

.linkedin:hover {
    background: #005983;
}

.linkedin-light {
    background: #0090d5;
    color: white;
}

.youtube {
    background-color: #df1c31;
    color: #fff;
}

.youtube:hover {
    background-color: #b21627;
}

.rumble {
    background: #699c39;
    color: white;
}

.rumble:hover {
    background: #4b6e29;
    color: white;
}

.vimeo {
    background: #aad450;
    color: white;
}

.email {
    background-color: #0a88ff;
    color: white;
}

.email:hover {
    background-color: #006ed6;
}

.tumblr {
    background-color: #32506d;
    color: #fff;
}

.tumblr:hover {
    background-color: #22364a;
}


.pocket {
    background-color: #ed4054;
    color: #fff;
}

.pocket:hover {
    background-color: #e4162d;
}

.github {
    background-color: #444;
    color: #fff;
}


.delicious {
    background-color: #0b79e5;
    color: #fff;
}

.delicious:hover {
    background-color: #095fb4;
}

.vk {
    background-color: #4d71a9;
    color: #fff;
}

.vk:hover {
    background-color: #3d5a86;
}

.whatsapp a,
.whatsapp,
.wp {
    background-color: #25d366;
    color: #fff;
}

.whatsapp:hover,
.wp:hover {
    background-color: #199347;
}

.hackernews {
    background-color: #f60;
    color: #fff;
}

.hackernews:hover {
    background-color: #cc5200;
}

.twitter {
    background: #1da1f2;
    color: white;
}

.twitter:hover {
    background-color: #0eaad6;
}

.twitch {
    background: #6441A4;
    /* Colore di sfondo normale */
    color: white;
}

.twitch:hover {
    background: #52327E;
    /* Colore di sfondo all'hover */
}

/* help section */
/* ============================================
   ROCKITALIA - COLOR DESIGN SYSTEM
   Light/Dark mode con variabili CSS complete
   ============================================ */

:root {
    /* Primary Blue */
    --btn-primary-bg: #3b82f6;
    --btn-primary-hover: #2563eb;
    --btn-primary-active: #1d4ed8;
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: rgba(59, 130, 246, 0.3);

    /* Secondary Gray */
    --btn-secondary-bg: #6b7280;
    --btn-secondary-hover: #4b5563;
    --btn-secondary-active: #374151;
    --btn-secondary-text: #ffffff;
    --btn-secondary-shadow: rgba(107, 114, 128, 0.3);

    /* Success Green */
    --btn-success-bg: #10b981;
    --btn-success-hover: #059669;
    --btn-success-active: #047857;
    --btn-success-text: #ffffff;
    --btn-success-shadow: rgba(16, 185, 129, 0.3);

    /* Warning Yellow */
    --btn-warning-bg: #f59e0b;
    --btn-warning-hover: #d97706;
    --btn-warning-active: #b45309;
    --btn-warning-text: #ffffff;
    --btn-warning-shadow: rgba(245, 158, 11, 0.3);

    /* Danger Red */
    --btn-danger-bg: #ef4444;
    --btn-danger-hover: #dc2626;
    --btn-danger-active: #b91c1c;
    --btn-danger-text: #ffffff;
    --btn-danger-shadow: rgba(239, 68, 68, 0.3);

    /* Info Cyan */
    --btn-info-bg: #06b6d4;
    --btn-info-hover: #0891b2;
    --btn-info-active: #0e7490;
    --btn-info-text: #ffffff;
    --btn-info-shadow: rgba(6, 182, 212, 0.3);

    /* Light Neutral */
    --btn-light-bg: #f9fafb;
    --btn-light-hover: #f3f4f6;
    --btn-light-active: #e5e7eb;
    --btn-light-text: #374151;
    --btn-light-shadow: rgba(249, 250, 251, 0.5);

    /* Dark Neutral */
    --btn-dark-bg: #111827;
    --btn-dark-hover: #1f2937;
    --btn-dark-active: #374151;
    --btn-dark-text: #ffffff;
    --btn-dark-shadow: rgba(17, 24, 39, 0.4);

    /* Outline Primary */
    --btn-outline-primary-border: #3b82f6;
    --btn-outline-primary-text: #3b82f6;
    --btn-outline-primary-hover-bg: rgba(59, 130, 246, 0.1);

    /* Glassmorphism */
    --btn-glass-bg: #3b82f626;
    --btn-glass-hover: rgba(255, 255, 255, 0.2);
    --btn-glass-shadow: rgba(255, 255, 255, 0.1);

    /* 🔥 VARIABILI MANCANTI PER CANALI E COMPONENTI */
    --bg-secondary: var(--color-surface);
    --text-muted: var(--color-text-tertiary);

    /* Variabili aggiuntive per consistenza */
    --bg-primary: var(--color-background);
    --bg-tertiary: var(--color-surface-elevated);

    /* Stati interattivi */
    --bg-hover: var(--color-secondary);
    --bg-active: var(--color-secondary-active);

    /* Border aggiuntivi */
    --border-light: var(--color-border-light);
    --border-strong: var(--color-border-strong);

    /* Text variants */
    --text-secondary: var(--color-text-secondary);
    --text-inverse: var(--color-text-inverse);


    /* Home backgrounds */
    --home-bg-1: linear-gradient(135deg, #d8eafe 0%, #f5fafe 100%);
    --home-bg-2: linear-gradient(135deg, #fce6ec 0%, #ffeaf1 100%);
    --home-bg-3: linear-gradient(135deg, #fffbe6 0%, #f7fff0 100%);
    --home-bg-4: linear-gradient(135deg, #e6ffe9 0%, #e6f7ff 100%);
    --home-bg-5: linear-gradient(135deg, #ffe6e6 0%, #ffe9f7 100%);
    --home-bg-6: linear-gradient(135deg, #f2e6ff 0%, #e9e6ff 100%);
    --home-bg-7: linear-gradient(135deg, #f0edf9 0%, #eafae3 100%);
    --home-bg-8: linear-gradient(135deg, #e6f4fa 0%, #fbf8ff 100%);
    --home-bg-9: linear-gradient(135deg, #ffe6cb 0%, #ffecd2 100%);
    --home-bg-10: linear-gradient(135deg, #c7fafd 0%, #d4f0f5 100%);
    --home-bg-11: linear-gradient(135deg, #fff8e6 0%, #fdffe9 100%);
    --home-bg-12: linear-gradient(135deg, #e6fbff 0%, #fff5e3 100%);

    /* Body backgrounds */
    --body-bg-1: #f9fbfc;
    --body-bg-2: #fcf7f2;
    --body-bg-3: #f6fff7;
    --body-bg-4: #f2f6ff;
    --body-bg-5: #f1f1f8;
    --body-bg-6: #f7f3ff;
    --body-bg-7: #edf6fa;
    --body-bg-8: #f8faf5;
    --body-bg-9: #f5eee6;
    --body-bg-10: #efecff;
    --body-bg-11: #eff2f6;
    --body-bg-12: #fff9f5;

    /* Article backgrounds */
    --article-bg-1: #ffffff;
    --article-bg-2: #f4faff;
    --article-bg-3: #f6f9fa;
    --article-bg-4: #fefff2;
    --article-bg-5: #f5efff;
    --article-bg-6: #fff7fb;
    --article-bg-7: #fbffe4;
    --article-bg-8: #f0ebf9;
    --article-bg-9: #eef6ff;
    --article-bg-10: #f9f9ef;
    --article-bg-11: #ffe6f2;
    --article-bg-12: #e7fffa;

    /* Search backgrounds */
    --search-bg-1: #e6f0fa;
    --search-bg-2: #fff8e1;
    --search-bg-3: #e6fffb;
    --search-bg-4: #e6ffe8;
    --search-bg-5: #ffe6ec;
    --search-bg-6: #f2e6ff;
    --search-bg-7: #f6fdfa;
    --search-bg-8: #f4feff;
    --search-bg-9: #f8e6fe;
    --search-bg-10: #fbfcf8;
    --search-bg-11: #f6ffd8;
    --search-bg-12: #e7e8ff;

    /* Channel backgrounds */
    --channel-bg-1: linear-gradient(135deg, #8ec0e4 0%, #cfdae8 100%);
    --channel-bg-2: linear-gradient(135deg, #edb2ff 0%, #f0d6ff 100%);
    --channel-bg-3: linear-gradient(135deg, #fde5c7 0%, #ffe7cb 100%);
    --channel-bg-4: linear-gradient(135deg, #e1ffe2 0%, #d6fff7 100%);
    --channel-bg-5: linear-gradient(135deg, #ffecc7 0%, #f7c4ea 100%);
    --channel-bg-6: linear-gradient(135deg, #e1edff 0%, #d8eafe 100%);
    --channel-bg-7: linear-gradient(135deg, #b3f5fc 0%, #b8dafa 100%);
    --channel-bg-8: linear-gradient(135deg, #ffd8e7 0%, #f7e7ff 100%);
    --channel-bg-9: linear-gradient(135deg, #bff9e7 0%, #f7ffd8 100%);
    --channel-bg-10: linear-gradient(135deg, #d8c7ec 0%, #f5fafe 100%);
    --channel-bg-11: linear-gradient(135deg, #f4edc6 0%, #fbfae8 100%);
    --channel-bg-12: linear-gradient(135deg, #e7fff7 0%, #f3f3ff 100%);
    --footer-bg-1: linear-gradient(135deg, #eaf6fe 0%, #f0f7fa 100%);
    --footer-bg-2: linear-gradient(135deg, #ffe6f1 0%, #f8ecf8 100%);
    --footer-bg-3: linear-gradient(135deg, #fffde6 0%, #fffaf5 100%);
    --footer-bg-4: linear-gradient(135deg, #e6eaff 0%, #f6fbff 100%);
    --footer-bg-5: linear-gradient(135deg, #f7eafc 0%, #fee6f7 100%);
    --footer-bg-6: linear-gradient(135deg, #eeedff 0%, #eceff9 100%);
    --footer-bg-7: linear-gradient(135deg, #f0eee7 0%, #f6f1f5 100%);
    --footer-bg-8: linear-gradient(135deg, #eaf7ec 0%, #eef8ea 100%);
    --footer-bg-9: linear-gradient(135deg, #ffe6e9 0%, #fae7f8 100%);
    --footer-bg-10: linear-gradient(135deg, #eafff6 0%, #f5fcfa 100%);
    --footer-bg-11: linear-gradient(135deg, #eefff8 0%, #ffeef6 100%);
    --footer-bg-12: linear-gradient(135deg, #f8f7ff 0%, #eaf1ff 100%);

    /* Home text colors */
    --home-text-1: #22222a;
    --home-text-2: #353543;
    --home-text-3: #363650;
    --home-text-4: #205c45;
    --home-text-5: #262626;
    --home-text-6: #393943;
    --home-text-7: #3e3a36;
    --home-text-8: #305064;
    --home-text-9: #593e2c;
    --home-text-10: #3a5339;
    --home-text-11: #4a4b39;
    --home-text-12: #2a3a4a;

    /* Body text colors */
    --body-text-1: #262626;
    --body-text-2: #333333;
    --body-text-3: #2b2b2b;
    --body-text-4: #1f2536;
    --body-text-5: #343443;
    --body-text-6: #494949;
    --body-text-7: #212231;
    --body-text-8: #44444f;
    --body-text-9: #393939;
    --body-text-10: #678199;
    --body-text-11: #5c5c5c;
    --body-text-12: #292930;

    /* Article text colors */
    --article-text-1: #16171a;
    --article-text-2: #223354;
    --article-text-3: #252533;
    --article-text-4: #32324f;
    --article-text-5: #35365a;
    --article-text-6: #222643;
    --article-text-7: #192633;
    --article-text-8: #354131;
    --article-text-9: #304331;
    --article-text-10: #36394f;
    --article-text-11: #221c2e;
    --article-text-12: #2a3345;

    /* Search text colors */
    --search-text-1: #223354;
    --search-text-2: #936711;
    --search-text-3: #167351;
    --search-text-4: #227d4b;
    --search-text-5: #8a3b57;
    --search-text-6: #533994;
    --search-text-7: #212e28;
    --search-text-8: #2e5364;
    --search-text-9: #914ba6;
    --search-text-10: #73736b;
    --search-text-11: #7e772f;
    --search-text-12: #4347a6;

    /* Channel text colors */
    --channel-text-1: #2b475e;
    --channel-text-2: #6e277f;
    --channel-text-3: #8e692f;
    --channel-text-4: #2d5c3c;
    --channel-text-5: #9c357a;
    --channel-text-6: #2d3d6e;
    --channel-text-7: #237373;
    --channel-text-8: #962367;
    --channel-text-9: #39895f;
    --channel-text-10: #342872;
    --channel-text-11: #888730;
    --channel-text-12: #2b6e64;

    /* Footer text colors */
    --footer-text-1: #f7f7f7;
    --footer-text-2: #e0e0e0;
    --footer-text-3: #cfcfd7;
    --footer-text-4: #b8b8bf;
    --footer-text-5: #f3eaff;
    --footer-text-6: #e9f9ff;
    --footer-text-7: #b8e3ff;
    --footer-text-8: #e2f4f6;
    --footer-text-9: #ffdeef;
    --footer-text-10: #fdeff9;
    --footer-text-11: #d6ffe2;
    --footer-text-12: #e7ffa6;

    /* ========== TAG/TAG SYSTEM ========== */
    --tag-bg-1: rgba(59, 130, 246, 0.12);
    --tag-bg-2: rgba(245, 158, 11, 0.12);
    --tag-bg-3: rgba(34, 197, 94, 0.12);
    --tag-bg-4: rgba(239, 68, 68, 0.12);
    --tag-bg-5: rgba(147, 51, 234, 0.12);
    --tag-bg-6: rgba(249, 115, 22, 0.12);
    --tag-bg-7: rgba(236, 72, 153, 0.12);
    --tag-bg-8: rgba(6, 182, 212, 0.12);
    --tag-bg-9: rgba(101, 163, 13, 0.12);
    --tag-bg-10: rgba(180, 83, 9, 0.12);
    --tag-bg-11: rgba(124, 58, 237, 0.12);
    --tag-bg-12: rgba(16, 185, 129, 0.12);
    --tag-text-1: #1d4ed8;
    --tag-text-2: #b45309;
    --tag-text-3: #15803d;
    --tag-text-4: #dc2626;
    --tag-text-5: #7c3aed;
    --tag-text-6: #ea580c;
    --tag-text-7: #db2777;
    --tag-text-8: #0891b2;
    --tag-text-9: #4d7c0f;
    --tag-text-10: #c2410c;
    --tag-text-11: #7e22ce;
    --tag-text-12: #047857;
    --tag-border-1: rgba(59, 130, 246, 0.3);
    --tag-border-2: rgba(245, 158, 11, 0.3);
    --tag-border-3: rgba(34, 197, 94, 0.3);
    --tag-border-4: rgba(239, 68, 68, 0.3);
    --tag-border-5: rgba(147, 51, 234, 0.3);
    --tag-border-6: rgba(249, 115, 22, 0.3);
    --tag-border-7: rgba(236, 72, 153, 0.3);
    --tag-border-8: rgba(6, 182, 212, 0.3);
    --tag-border-9: rgba(101, 163, 13, 0.3);
    --tag-border-10: rgba(180, 83, 9, 0.3);
    --tag-border-11: rgba(124, 58, 237, 0.3);
    --tag-border-12: rgba(16, 185, 129, 0.3);

    /* ========== BADGE SYSTEM ========== */
    --badge-bg-success: rgba(34, 197, 94, 0.15);
    --badge-bg-warning: rgba(245, 158, 11, 0.15);
    --badge-bg-error: rgba(239, 68, 68, 0.15);
    --badge-bg-info: rgba(59, 130, 246, 0.15);
    --badge-bg-premium: rgba(147, 51, 234, 0.15);
    --badge-bg-new: rgba(16, 185, 129, 0.15);
    --badge-bg-trending: rgba(236, 72, 153, 0.15);
    --badge-bg-featured: rgba(249, 115, 22, 0.15);
    --badge-text-success: #15803d;
    --badge-text-warning: #b45309;
    --badge-text-error: #dc2626;
    --badge-text-info: #1d4ed8;
    --badge-text-premium: #7c3aed;
    --badge-text-new: #047857;
    --badge-text-trending: #db2777;
    --badge-text-featured: #ea580c;

    /* ========== BUTTON VARIANTS ========== */
    --btn-gradient-primary: linear-gradient(135deg, var(--color-teal-500), var(--color-teal-600));
    --btn-gradient-secondary: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
    --btn-gradient-success: linear-gradient(135deg, #10b981, #059669);
    --btn-gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
    --btn-gradient-error: linear-gradient(135deg, #ef4444, #dc2626);
    --btn-gradient-premium: linear-gradient(135deg, #8b5cf6, #7c3aed);
    --btn-shadow-primary: 0 4px 14px 0 rgba(33, 128, 141, 0.3);
    --btn-shadow-hover: 0 6px 20px rgba(33, 128, 141, 0.4);

    /* ========== CARD ELEVATIONS ========== */
    --card-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --card-shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --card-shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --card-shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --card-gradient-1: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --card-gradient-2: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    --card-gradient-3: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    --card-gradient-4: linear-gradient(135deg, #fef7ff 0%, #f3e8ff 100%);
    --card-gradient-5: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);

    /* ========== LOADING & SKELETON ========== */
    --skeleton-bg: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    --skeleton-bg-animated: linear-gradient(90deg,
            rgba(240, 240, 240, 0.8) 25%,
            rgba(224, 224, 224, 0.9) 50%,
            rgba(240, 240, 240, 0.8) 75%);
    --loading-spinner-primary: var(--color-teal-500);
    --loading-spinner-secondary: var(--color-gray-300);
    --loading-overlay: rgba(255, 255, 255, 0.8);

    /* ========== OVERLAY & BACKDROP ========== */
    --overlay-light: rgba(255, 255, 255, 0.8);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-darker: rgba(0, 0, 0, 0.7);
    --backdrop-blur: blur(8px);
    --backdrop-saturate: saturate(180%);

    /* ========== GRADIENT TEXT ========== */
    --gradient-text-1: linear-gradient(135deg, var(--color-teal-500), var(--color-teal-700));
    --gradient-text-2: linear-gradient(135deg, #8b5cf6, #ec4899);
    --gradient-text-3: linear-gradient(135deg, #f59e0b, #ef4444);
    --gradient-text-4: linear-gradient(135deg, #10b981, #3b82f6);
    --gradient-text-5: linear-gradient(135deg, #6366f1, #8b5cf6);

    /* ========== BORDER GRADIENTS ========== */
    --border-gradient-1: linear-gradient(135deg, var(--color-teal-500), var(--color-teal-300));
    --border-gradient-2: linear-gradient(135deg, #8b5cf6, #ec4899);
    --border-gradient-3: linear-gradient(135deg, #f59e0b, #ef4444);
    --border-gradient-4: linear-gradient(135deg, #10b981, #3b82f6);

    /* ========== MODERN SHADOWS ========== */
    --shadow-glow-primary: 0 0 20px rgba(33, 128, 141, 0.15);
    --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.15);
    --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.15);
    --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.15);
    --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-strong: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --code-background-color: hsl(0, 0%, 94.9%);
    --code-border-color: hsl(0, 0%, 90.6%);
    --code-text-color: hsl(0, 0%, 26.7%);
    --note-background-color: hsl(50, 100%, 94%);
    --note-border-color: hsl(40, 100%, 90%);
    --code-selection-background-color: hsl(212.3, 97.8%, 81.8%);

    /* ========== MODERN NEUMORPHISM ========== */
    --neumorph-light:
        -5px -5px 15px rgba(255, 255, 255, 0.8),
        5px 5px 15px rgba(0, 0, 0, 0.1);
    --neumorph-dark:
        -5px -5px 15px rgba(255, 255, 255, 0.05),
        5px 5px 15px rgba(0, 0, 0, 0.3);
    --neumorph-inset-light:
        inset -2px -2px 5px rgba(255, 255, 255, 0.8),
        inset 2px 2px 5px rgba(0, 0, 0, 0.1);
    --neumorph-inset-dark:
        inset -2px -2px 5px rgba(255, 255, 255, 0.05),
        inset 2px 2px 5px rgba(0, 0, 0, 0.3);

    /* ========== MODERN GRADIENTS ========== */
    --gradient-glass: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%);
    --gradient-glass-dark: linear-gradient(135deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.05) 100%);
    --gradient-shimmer: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);

    /* ========== PRIMITIVE COLOR TOKENS ========== */
    --gradient-bg: linear-gradient(var(--color-charcoal-500), var(--color-charcoal-600));
    --color-text-footer: white;
    --color-white: rgba(255, 255, 255, 1);
    --color-black: rgba(0, 0, 0, 1);
    --color-cream-50: rgba(252, 252, 249, 1);
    --color-cream-100: rgba(255, 255, 253, 1);
    --color-gray-50: rgba(250, 250, 250, 1);
    --color-gray-100: rgba(245, 245, 245, 1);
    --color-gray-200: rgba(229, 229, 229, 1);
    --color-gray-300: rgba(167, 169, 169, 1);
    --color-gray-400: rgba(119, 124, 124, 1);
    --color-gray-500: rgba(107, 114, 128, 1);
    --color-gray-600: rgba(75, 85, 99, 1);
    --color-gray-700: rgba(55, 65, 81, 1);
    --color-gray-800: rgba(31, 41, 55, 1);
    --color-gray-900: rgba(17, 24, 39, 1);
    --color-slate-500: rgba(98, 108, 113, 1);
    --color-brown-600: rgba(94, 82, 64, 1);
    --color-charcoal-500: rgb(118 125 125);
    --color-charcoal-600: rgb(81 86 86);
    --color-charcoal-700: rgba(31, 33, 33, 1);
    --color-charcoal-800: rgba(38, 40, 40, 1);
    --color-charcoal-900: rgb(38 38 40);
    --color-slate-900: rgba(19, 52, 59, 1);

    /* Teal Colors */
    --color-teal-50: rgba(240, 253, 250, 1);
    --color-teal-100: rgba(204, 251, 241, 1);
    --color-teal-200: rgba(153, 246, 228, 1);
    --color-teal-300: rgba(50, 184, 198, 1);
    --color-teal-400: rgba(45, 166, 178, 1);
    --color-teal-500: rgba(33, 128, 141, 1);
    --color-teal-600: rgba(29, 116, 128, 1);
    --color-teal-700: rgba(26, 104, 115, 1);
    --color-teal-800: rgba(41, 150, 161, 1);
    --color-teal-900: rgba(19, 78, 74, 1);

    /* Red Colors */
    --color-red-50: rgba(254, 242, 242, 1);
    --color-red-100: rgba(254, 226, 226, 1);
    --color-red-200: rgba(254, 202, 202, 1);
    --color-red-300: rgba(252, 165, 165, 1);
    --color-red-400: rgba(255, 84, 89, 1);
    --color-red-500: rgba(192, 21, 47, 1);
    --color-red-600: rgba(220, 38, 38, 1);
    --color-red-700: rgba(185, 28, 28, 1);
    --color-red-800: rgba(153, 27, 27, 1);
    --color-red-900: rgba(127, 29, 29, 1);

    /* Orange Colors */
    --color-orange-50: rgba(255, 247, 237, 1);
    --color-orange-100: rgba(255, 237, 213, 1);
    --color-orange-200: rgba(254, 215, 170, 1);
    --color-orange-300: rgba(253, 186, 116, 1);
    --color-orange-400: rgba(230, 129, 97, 1);
    --color-orange-500: rgba(168, 75, 47, 1);
    --color-orange-600: rgba(234, 88, 12, 1);
    --color-orange-700: rgba(194, 65, 12, 1);
    --color-orange-800: rgba(154, 52, 18, 1);
    --color-orange-900: rgba(124, 45, 18, 1);

    /* ========== RGB VERSIONS FOR OPACITY ========== */
    --color-brown-600-rgb: 94, 82, 64;
    --color-teal-500-rgb: 33, 128, 141;
    --color-teal-300-rgb: 50, 184, 198;
    --color-slate-900-rgb: 19, 52, 59;
    --color-slate-500-rgb: 98, 108, 113;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-400-rgb: 119, 124, 124;
    --color-gray-200-rgb: 245, 245, 245;
    --color-red-500-rgb: 192, 21, 47;
    --color-red-400-rgb: 255, 84, 89;
    --color-orange-500-rgb: 168, 75, 47;
    --color-orange-400-rgb: 230, 129, 97;

    /* ========== BACKGROUND COLOR TOKENS ========== */
    --color-bg-1: rgba(59, 130, 246, 0.08);
    --color-bg-2: rgba(245, 158, 11, 0.08);
    --color-bg-3: rgba(34, 197, 94, 0.08);
    --color-bg-4: rgba(239, 68, 68, 0.08);
    --color-bg-5: rgba(147, 51, 234, 0.08);
    --color-bg-6: rgba(249, 115, 22, 0.08);
    --color-bg-7: rgba(236, 72, 153, 0.08);
    --color-bg-8: rgba(6, 182, 212, 0.08);

    /* ========== SEMANTIC COLORS - LIGHT MODE (DEFAULT) ========== */

    /* Background & Surface */
    --color-background: var(--color-cream-50);
    --color-surface: var(--color-cream-100);
    --color-surface-elevated: var(--color-white);

    /* Text Colors */
    --color-text: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-500);
    --color-text-tertiary: var(--color-gray-400);
    --color-text-muted: var(--color-gray-500);
    --color-text-inverse: var(--color-white);

    /* Primary Colors */
    --color-primary: var(--color-teal-500);
    --color-primary-hover: var(--color-teal-600);
    --color-primary-active: var(--color-teal-700);
    --color-primary-light: var(--color-teal-100);
    --color-primary-dark: var(--color-teal-800);

    /* Secondary Colors */
    --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
    --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
    --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
    --color-secondary-border: rgba(var(--color-brown-600-rgb), 0.3);

    /* Border Colors */
    --color-border: rgba(var(--color-brown-600-rgb), 0.2);
    --color-border-light: rgba(var(--color-brown-600-rgb), 0.1);
    --color-border-strong: rgba(var(--color-brown-600-rgb), 0.3);

    /* Card Colors */
    --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-background: var(--color-surface);
    --color-card-background-hover: var(--color-gray-50);

    /* Button Colors */
    --color-btn-primary-text: var(--color-white);
    --color-btn-secondary-text: var(--color-text);
    --color-btn-outline-border: var(--color-border);

    /* Status Colors */
    --color-success: var(--color-teal-500);
    --color-success-light: var(--color-teal-100);
    --color-error: var(--color-red-500);
    --color-error-light: var(--color-red-100);
    --color-warning: var(--color-orange-500);
    --color-warning-light: var(--color-orange-100);
    --color-info: var(--color-slate-500);
    --color-info-light: var(--color-gray-100);

    /* Focus & Interactive */
    --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
    --color-focus-outline: var(--color-teal-500);
    --color-link: var(--color-teal-600);
    --color-link-hover: var(--color-teal-700);

    /* Selection */
    --color-selection-bg: rgba(var(--color-teal-500-rgb), 0.2);
    --color-selection-text: var(--color-text);

    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-strong: rgba(0, 0, 0, 0.15);

    /* Icon Colors */
    --color-icon-primary: var(--color-text);
    --color-icon-secondary: var(--color-text-secondary);
    --color-icon-tertiary: var(--color-text-tertiary);
    --color-icon-inverse: var(--color-white);

    /* Form Colors */
    --color-input-background: var(--color-surface);
    --color-input-border: var(--color-border);
    --color-input-border-focus: var(--color-primary);
    --color-input-text: var(--color-text);
    --color-input-placeholder: var(--color-text-tertiary);
    --color-input-disabled: var(--color-gray-100);
    --color-input-disabled-text: var(--color-text-tertiary);

    /* Select Caret */
    --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* ========== RGB VERSIONS FOR SEMANTIC COLORS ========== */
    --color-success-rgb: var(--color-teal-500-rgb);
    --color-error-rgb: var(--color-red-500-rgb);
    --color-warning-rgb: var(--color-orange-500-rgb);
    --color-info-rgb: var(--color-slate-500-rgb);

    /* ========== COMMON STYLE PATTERNS ========== */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;

    /* ========== LEGACY COMPATIBILITY ========== */
    --bg-body: var(--color-background);
    --bg-body-nav: var(--color-surface);
    --bg-article: var(--color-surface);
    --text-color: var(--color-text);
    --bg-color-hover: var(--color-secondary);
    --bg-body-block: var(--color-surface);
    --bg-body-block-hover: var(--color-secondary);
    --icon-primary: var(--color-primary);
    --icon-primary-hover: var(--color-primary-hover);
}

/* ============================================
   DARK MODE - SYSTEM PREFERENCE
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --btn-primary-text: #eff6ff;
        --btn-light-bg: #1f2937;
        --btn-light-hover: #374151;
        --btn-light-active: #4b5563;
        --btn-light-text: #f9fafb;
        --btn-outline-primary-hover-bg: rgba(59, 130, 246, 0.2);
        --btn-glass-bg: rgba(0, 0, 0, 0.4);
        --btn-glass-hover: rgba(0, 0, 0, 0.6);

        --bg-secondary: var(--color-surface);
        --text-muted: var(--color-text-tertiary);
        --bg-primary: var(--color-background);
        --bg-tertiary: var(--color-surface-elevated);
        --bg-hover: var(--color-secondary);
        --bg-active: var(--color-secondary-active);
        --border-light: var(--color-border-light);
        --border-strong: var(--color-border-strong);
        --text-secondary: var(--color-text-secondary);
        --text-inverse: var(--color-text-inverse);

        /* HOME BACKGROUNDS (Dark Mode) */
        --home-bg-1: linear-gradient(135deg, #202a3a 0%, #283646 100%);
        --home-bg-2: linear-gradient(135deg, #461c31 0%, #1e293b 100%);
        --home-bg-3: linear-gradient(135deg, #23293a 0%, #323845 100%);
        --home-bg-4: linear-gradient(135deg, #273e2c 0%, #232d26 100%);
        --home-bg-5: linear-gradient(135deg, #332328 0%, #2d232a 100%);
        --home-bg-6: linear-gradient(135deg, #22243a 0%, #1a2247 100%);
        --home-bg-7: linear-gradient(135deg, #271f33 0%, #292638 100%);
        --home-bg-8: linear-gradient(135deg, #23405c 0%, #1b2736 100%);
        --home-bg-9: linear-gradient(135deg, #31261d 0%, #393220 100%);
        --home-bg-10: linear-gradient(135deg, #1e3a37 0%, #203240 100%);
        --home-bg-11: linear-gradient(135deg, #393d28 0%, #2c2e2a 100%);
        --home-bg-12: linear-gradient(135deg, #22333a 0%, #232a36 100%);

        /* BODY BACKGROUNDS (Dark Mode) */
        --body-bg-1: #181c20;
        --body-bg-2: #171720;
        --body-bg-3: #191e21;
        --body-bg-4: #232730;
        --body-bg-5: #1b1f24;
        --body-bg-6: #20223a;
        --body-bg-7: #202334;
        --body-bg-8: #141a20;
        --body-bg-9: #232127;
        --body-bg-10: #23191c;
        --body-bg-11: #282631;
        --body-bg-12: #251f21;

        /* ARTICLE BACKGROUNDS (Dark Mode) */
        --article-bg-1: #23242b;
        --article-bg-2: #24293a;
        --article-bg-3: #161b22;
        --article-bg-4: #24292f;
        --article-bg-5: #1a1923;
        --article-bg-6: #1a1f27;
        --article-bg-7: #232336;
        --article-bg-8: #221a24;
        --article-bg-9: #191d1e;
        --article-bg-10: #222d23;
        --article-bg-11: #2d1f2f;
        --article-bg-12: #21191e;

        /* SEARCH BACKGROUNDS (Dark Mode) */
        --search-bg-1: #182131;
        --search-bg-2: #231d13;
        --search-bg-3: #122423;
        --search-bg-4: #1a261d;
        --search-bg-5: #271722;
        --search-bg-6: #1e1731;
        --search-bg-7: #212d22;
        --search-bg-8: #16281e;
        --search-bg-9: #23172b;
        --search-bg-10: #191f27;
        --search-bg-11: #232619;
        --search-bg-12: #1b222a;

        /* CHANNEL BACKGROUNDS (Dark Mode) */
        --channel-bg-1: linear-gradient(135deg, #395f74 0%, #23415b 100%);
        --channel-bg-2: linear-gradient(135deg, #571757 0%, #3b2341 100%);
        --channel-bg-3: linear-gradient(135deg, #635029 0%, #42331e 100%);
        --channel-bg-4: linear-gradient(135deg, #2f6042 0%, #21372c 100%);
        --channel-bg-5: linear-gradient(135deg, #776337 0%, #473c1e 100%);
        --channel-bg-6: linear-gradient(135deg, #3b345a 0%, #23296b 100%);
        --channel-bg-7: linear-gradient(135deg, #225656 0%, #163c3c 100%);
        --channel-bg-8: linear-gradient(135deg, #4a2d47 0%, #231d2a 100%);
        --channel-bg-9: linear-gradient(135deg, #387457 0%, #1e3b29 100%);
        --channel-bg-10: linear-gradient(135deg, #343670 0%, #232547 100%);
        --channel-bg-11: linear-gradient(135deg, #6d6b33 0%, #2b2a1e 100%);
        --channel-bg-12: linear-gradient(135deg, #222b2a 0%, #1e2326 100%);

        /* Footer backgrounds - dark */
        --footer-bg-1: linear-gradient(135deg, #202b39 0%, #223045 100%);
        --footer-bg-2: linear-gradient(135deg, #2d1a26 0%, #271f36 100%);
        --footer-bg-3: linear-gradient(135deg, #2b2930 0%, #2c2a36 100%);
        --footer-bg-4: linear-gradient(135deg, #1a1e2c 0%, #22253b 100%);
        --footer-bg-5: linear-gradient(135deg, #241a2e 0%, #23193b 100%);
        --footer-bg-6: linear-gradient(135deg, #1c191d 0%, #232136 100%);
        --footer-bg-7: linear-gradient(135deg, #181924 0%, #1c1d2a 100%);
        --footer-bg-8: linear-gradient(135deg, #1c241e 0%, #13271e 100%);
        --footer-bg-9: linear-gradient(135deg, #23171f 0%, #2c192a 100%);
        --footer-bg-10: linear-gradient(135deg, #181e29 0%, #232d2a 100%);
        --footer-bg-11: linear-gradient(135deg, #201f26 0%, #1c1d22 100%);
        --footer-bg-12: linear-gradient(135deg, #1b1c2c 0%, #232a2f 100%);

        /* Home text colors */
        --home-text-1: #f3f3f3;
        --home-text-2: #dedee5;
        --home-text-3: #c5c5dc;
        --home-text-4: #a8dddd;
        --home-text-5: #eec0e2;
        --home-text-6: #c5c1ea;
        --home-text-7: #ecffe6;
        --home-text-8: #bde3ff;
        --home-text-9: #ffe6cb;
        --home-text-10: #c7fafd;
        --home-text-11: #fdffe9;
        --home-text-12: #e7fffa;

        /* Body text colors */
        --body-text-1: #d4d2d2;
        --body-text-2: #aaa;
        --body-text-3: #bdbdbd;
        --body-text-4: #abb0c3;
        --body-text-5: #8d8daf;
        --body-text-6: #bfbfbf;
        --body-text-7: #bbbad6;
        --body-text-8: #e8e8ee;
        --body-text-9: #eaeaea;
        --body-text-10: #a3bccc;
        --body-text-11: #b8bee0;
        --body-text-12: #e7e7eb;

        /* Article text colors */
        --article-text-1: #ccc;
        --article-text-2: #c1c6d5;
        --article-text-3: #c6cfd5;
        --article-text-4: #e3e3ee;
        --article-text-5: #e4e5ef;
        --article-text-6: #c1ded5;
        --article-text-7: #a4bedb;
        --article-text-8: #c0cbba;
        --article-text-9: #b8e6cc;
        --article-text-10: #d6e7cf;
        --article-text-11: #e4aedd;
        --article-text-12: #bdcdf6;

        /* Search text colors */
        --search-text-1: #c1d6e7;
        --search-text-2: #ecd68e;
        --search-text-3: #68debe;
        --search-text-4: #70e7ad;
        --search-text-5: #fbafd1;
        --search-text-6: #bbb3e7;
        --search-text-7: #c3cfcd;
        --search-text-8: #9ed8fa;
        --search-text-9: #d899db;
        --search-text-10: #b5b5a2;
        --search-text-11: #dbe06e;
        --search-text-12: #95a6e4;

        /* Channel text colors */
        --channel-text-1: #a9cbdb;
        --channel-text-2: #c681db;
        --channel-text-3: #f9d97b;
        --channel-text-4: #a4dfbc;
        --channel-text-5: #dbb2d3;
        --channel-text-6: #c9c9e4;
        --channel-text-7: #52dccd;
        --channel-text-8: #fdafea;
        --channel-text-9: #aaf5cc;
        --channel-text-10: #a5acee;
        --channel-text-11: #eedc96;
        --channel-text-12: #abdacc;

        /* Footer text colors */
        --footer-text-1: #e6e6e6;
        --footer-text-2: #bfbfc7;
        --footer-text-3: #d7d7e0;
        --footer-text-4: #a6f4ff;
        --footer-text-5: #ffd6ef;
        --footer-text-6: #ffb8e6;
        --footer-text-7: #9afeff;
        --footer-text-8: #f6faf8;
        --footer-text-9: #f8f8f6;
        --footer-text-10: #e3fbff;
        --footer-text-11: #b2ffbe;
        --footer-text-12: #c0c0e0;

        /* Tag System - Dark */
        --tag-bg-1: rgba(59, 130, 246, 0.2);
        --tag-bg-2: rgba(245, 158, 11, 0.2);
        --tag-bg-3: rgba(34, 197, 94, 0.2);
        --tag-bg-4: rgba(239, 68, 68, 0.2);
        --tag-bg-5: rgba(147, 51, 234, 0.2);
        --tag-bg-6: rgba(249, 115, 22, 0.2);
        --tag-bg-7: rgba(236, 72, 153, 0.2);
        --tag-bg-8: rgba(6, 182, 212, 0.2);

        --tag-text-1: #60a5fa;
        --tag-text-2: #fbbf24;
        --tag-text-3: #4ade80;
        --tag-text-4: #f87171;
        --tag-text-5: #a78bfa;
        --tag-text-6: #fb923c;
        --tag-text-7: #f472b6;
        --tag-text-8: #22d3ee;

        /* Loading & Skeleton - Dark */
        --skeleton-bg: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        --loading-overlay: rgba(0, 0, 0, 0.7);

        /* Modern Shadows - Dark */
        --shadow-glow-primary: 0 0 20px rgba(33, 128, 141, 0.3);
        --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.3);
        --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.3);
        --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.3);


        --gradient-bg: linear-gradient(var(--color-charcoal-700), var(--color-charcoal-900));
        --color-text-footer: #f2f2f2;
        /* ========== BACKGROUND COLOR TOKENS (DARK MODE) ========== */
        --color-bg-1: rgba(29, 78, 216, 0.15);
        --color-bg-2: rgba(180, 83, 9, 0.15);
        --color-bg-3: rgba(21, 128, 61, 0.15);
        --color-bg-4: rgba(185, 28, 28, 0.15);
        --color-bg-5: rgba(107, 33, 168, 0.15);
        --color-bg-6: rgba(194, 65, 12, 0.15);
        --color-bg-7: rgba(190, 24, 93, 0.15);
        --color-bg-8: rgba(8, 145, 178, 0.15);

        /* ========== SEMANTIC COLORS (DARK MODE) ========== */

        /* Background & Surface */
        --color-background: var(--color-charcoal-700);
        --color-surface: var(--color-charcoal-800);
        --color-surface-elevated: var(--color-gray-800);

        /* Text Colors */
        --color-text: var(--color-gray-200);
        --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.8);
        --color-text-tertiary: var(--color-gray-400);
        --color-text-muted: var(--color-gray-500);
        --color-text-inverse: var(--color-gray-900);

        /* Primary Colors */
        --color-primary: var(--color-teal-300);
        --color-primary-hover: var(--color-teal-400);
        --color-primary-active: var(--color-teal-800);
        --color-primary-light: rgba(var(--color-teal-300-rgb), 0.2);
        --color-primary-dark: var(--color-teal-800);

        /* Secondary Colors */
        --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
        --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
        --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
        --color-secondary-border: rgba(var(--color-gray-400-rgb), 0.4);

        /* Border Colors */
        --color-border: rgba(var(--color-gray-400-rgb), 0.3);
        --color-border-light: rgba(var(--color-gray-400-rgb), 0.2);
        --color-border-strong: rgba(var(--color-gray-400-rgb), 0.4);

        /* Card Colors */
        --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
        --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
        --color-card-background: var(--color-surface);
        --color-card-background-hover: var(--color-gray-800);

        /* Button Colors */
        --color-btn-primary-text: var(--color-slate-900);
        --color-btn-secondary-text: var(--color-text);
        --color-btn-outline-border: rgba(var(--color-gray-400-rgb), 0.4);

        /* Status Colors */
        --color-success: var(--color-teal-300);
        --color-success-light: rgba(var(--color-teal-300-rgb), 0.2);
        --color-error: var(--color-red-400);
        --color-error-light: rgba(var(--color-red-400-rgb), 0.2);
        --color-warning: var(--color-orange-400);
        --color-warning-light: rgba(var(--color-orange-400-rgb), 0.2);
        --color-info: var(--color-gray-300);
        --color-info-light: rgba(var(--color-gray-300-rgb), 0.2);

        /* Focus & Interactive */
        --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
        --color-focus-outline: var(--color-teal-300);
        --color-link: var(--color-teal-300);
        --color-link-hover: var(--color-teal-400);

        /* Selection */
        --color-selection-bg: rgba(var(--color-teal-300-rgb), 0.3);
        --color-selection-text: var(--color-text);

        /* Shadow Colors */
        --shadow-color: rgba(0, 0, 0, 0.3);
        --shadow-color-strong: rgba(0, 0, 0, 0.5);

        /* Icon Colors */
        --color-icon-primary: var(--color-text);
        --color-icon-secondary: var(--color-text-secondary);
        --color-icon-tertiary: var(--color-text-tertiary);
        --color-icon-inverse: var(--color-gray-900);

        /* Form Colors */
        --color-input-background: var(--color-surface);
        --color-input-border: var(--color-border);
        --color-input-border-focus: var(--color-primary);
        --color-input-text: var(--color-text);
        --color-input-placeholder: var(--color-text-tertiary);
        --color-input-disabled: var(--color-gray-800);
        --color-input-disabled-text: var(--color-text-tertiary);

        /* Select Caret */
        --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

        /* ========== RGB VERSIONS FOR DARK MODE ========== */
        --color-success-rgb: var(--color-teal-300-rgb);
        --color-error-rgb: var(--color-red-400-rgb);
        --color-warning-rgb: var(--color-orange-400-rgb);
        --color-info-rgb: var(--color-gray-300-rgb);

        /* ========== LEGACY COMPATIBILITY ========== */
        --bg-body: var(--color-background);
        --bg-body-nav: var(--color-surface);
        --bg-article: var(--color-surface);
        --text-color: var(--color-text);
        --bg-color-hover: var(--color-secondary);
        --bg-body-block: var(--color-surface);
        --bg-body-block-hover: var(--color-secondary);
        --icon-primary: var(--color-primary);
        --icon-primary-hover: var(--color-primary-hover);
    }
}

/* ============================================
   MANUAL THEME SWITCHING - data-color-scheme
   ============================================ */

[data-color-scheme="light"],
[data-theme="light"] {
    --bg-secondary: var(--color-surface);
    --text-muted: var(--color-text-tertiary);
    --bg-primary: var(--color-background);
    --bg-tertiary: var(--color-surface-elevated);
    --bg-hover: var(--color-secondary);
    --bg-active: var(--color-secondary-active);
    --border-light: var(--color-border-light);
    --border-strong: var(--color-border-strong);
    --text-secondary: var(--color-text-secondary);
    --text-inverse: var(--color-text-inverse);

    /* Home backgrounds */
    --home-bg-1: linear-gradient(135deg, #d8eafe 0%, #f5fafe 100%);
    --home-bg-2: linear-gradient(135deg, #fce6ec 0%, #ffeaf1 100%);
    --home-bg-3: linear-gradient(135deg, #fffbe6 0%, #f7fff0 100%);
    --home-bg-4: linear-gradient(135deg, #e6ffe9 0%, #e6f7ff 100%);
    --home-bg-5: linear-gradient(135deg, #ffe6e6 0%, #ffe9f7 100%);
    --home-bg-6: linear-gradient(135deg, #f2e6ff 0%, #e9e6ff 100%);
    --home-bg-7: linear-gradient(135deg, #f0edf9 0%, #eafae3 100%);
    --home-bg-8: linear-gradient(135deg, #e6f4fa 0%, #fbf8ff 100%);
    --home-bg-9: linear-gradient(135deg, #ffe6cb 0%, #ffecd2 100%);
    --home-bg-10: linear-gradient(135deg, #c7fafd 0%, #d4f0f5 100%);
    --home-bg-11: linear-gradient(135deg, #fff8e6 0%, #fdffe9 100%);
    --home-bg-12: linear-gradient(135deg, #e6fbff 0%, #fff5e3 100%);

    /* Body backgrounds */
    --body-bg-1: #f9fbfc;
    --body-bg-2: #fcf7f2;
    --body-bg-3: #f6fff7;
    --body-bg-4: #f2f6ff;
    --body-bg-5: #f1f1f8;
    --body-bg-6: #f7f3ff;
    --body-bg-7: #edf6fa;
    --body-bg-8: #f8faf5;
    --body-bg-9: #f5eee6;
    --body-bg-10: #efecff;
    --body-bg-11: #eff2f6;
    --body-bg-12: #fff9f5;

    /* Article backgrounds */
    --article-bg-1: #ffffff;
    --article-bg-2: #f4faff;
    --article-bg-3: #f6f9fa;
    --article-bg-4: #fefff2;
    --article-bg-5: #f5efff;
    --article-bg-6: #fff7fb;
    --article-bg-7: #fbffe4;
    --article-bg-8: #f0ebf9;
    --article-bg-9: #eef6ff;
    --article-bg-10: #f9f9ef;
    --article-bg-11: #ffe6f2;
    --article-bg-12: #e7fffa;

    /* Search backgrounds */
    --search-bg-1: #e6f0fa;
    --search-bg-2: #fff8e1;
    --search-bg-3: #e6fffb;
    --search-bg-4: #e6ffe8;
    --search-bg-5: #ffe6ec;
    --search-bg-6: #f2e6ff;
    --search-bg-7: #f6fdfa;
    --search-bg-8: #f4feff;
    --search-bg-9: #f8e6fe;
    --search-bg-10: #fbfcf8;
    --search-bg-11: #f6ffd8;
    --search-bg-12: #e7e8ff;

    /* Channel backgrounds */
    --channel-bg-1: linear-gradient(135deg, #8ec0e4 0%, #cfdae8 100%);
    --channel-bg-2: linear-gradient(135deg, #edb2ff 0%, #f0d6ff 100%);
    --channel-bg-3: linear-gradient(135deg, #fde5c7 0%, #ffe7cb 100%);
    --channel-bg-4: linear-gradient(135deg, #e1ffe2 0%, #d6fff7 100%);
    --channel-bg-5: linear-gradient(135deg, #ffecc7 0%, #f7c4ea 100%);
    --channel-bg-6: linear-gradient(135deg, #e1edff 0%, #d8eafe 100%);
    --channel-bg-7: linear-gradient(135deg, #b3f5fc 0%, #b8dafa 100%);
    --channel-bg-8: linear-gradient(135deg, #ffd8e7 0%, #f7e7ff 100%);
    --channel-bg-9: linear-gradient(135deg, #bff9e7 0%, #f7ffd8 100%);
    --channel-bg-10: linear-gradient(135deg, #d8c7ec 0%, #f5fafe 100%);
    --channel-bg-11: linear-gradient(135deg, #f4edc6 0%, #fbfae8 100%);
    --channel-bg-12: linear-gradient(135deg, #e7fff7 0%, #f3f3ff 100%);

    /* Footer backgrounds - tonalità scure */
    --footer-bg-1: linear-gradient(135deg, #363637 0%, #2e2e30 100%);
    --footer-bg-2: linear-gradient(135deg, #36323f 0%, #23202a 100%);
    --footer-bg-3: linear-gradient(135deg, #3a393a 0%, #23232c 100%);
    --footer-bg-4: linear-gradient(135deg, #353840 0%, #24262b 100%);
    --footer-bg-5: linear-gradient(135deg, #2c2a2a 0%, #232020 100%);
    --footer-bg-6: linear-gradient(135deg, #474350 0%, #312334 100%);
    --footer-bg-7: linear-gradient(135deg, #3f3e3d 0%, #373737 100%);
    --footer-bg-8: linear-gradient(135deg, #23292f 0%, #222230 100%);
    --footer-bg-9: linear-gradient(135deg, #37313c 0%, #292430 100%);
    --footer-bg-10: linear-gradient(135deg, #42424b 0%, #2d2d36 100%);
    --footer-bg-11: linear-gradient(135deg, #26263a 0%, #23244b 100%);
    --footer-bg-12: linear-gradient(135deg, #242533 0%, #222238 100%);

    /* Footer backgrounds - tonalità scure */
    --footer-bg-1: linear-gradient(135deg, #363637 0%, #2e2e30 100%);
    --footer-bg-2: linear-gradient(135deg, #36323f 0%, #23202a 100%);
    --footer-bg-3: linear-gradient(135deg, #3a393a 0%, #23232c 100%);
    --footer-bg-4: linear-gradient(135deg, #353840 0%, #24262b 100%);
    --footer-bg-5: linear-gradient(135deg, #2c2a2a 0%, #232020 100%);
    --footer-bg-6: linear-gradient(135deg, #474350 0%, #312334 100%);
    --footer-bg-7: linear-gradient(135deg, #3f3e3d 0%, #373737 100%);
    --footer-bg-8: linear-gradient(135deg, #23292f 0%, #222230 100%);
    --footer-bg-9: linear-gradient(135deg, #37313c 0%, #292430 100%);
    --footer-bg-10: linear-gradient(135deg, #42424b 0%, #2d2d36 100%);
    --footer-bg-11: linear-gradient(135deg, #26263a 0%, #23244b 100%);
    --footer-bg-12: linear-gradient(135deg, #242533 0%, #222238 100%);

    /* Home text colors */
    --home-text-1: #22222a;
    --home-text-2: #353543;
    --home-text-3: #363650;
    --home-text-4: #205c45;
    --home-text-5: #262626;
    --home-text-6: #393943;
    --home-text-7: #3e3a36;
    --home-text-8: #305064;
    --home-text-9: #593e2c;
    --home-text-10: #3a5339;
    --home-text-11: #4a4b39;
    --home-text-12: #2a3a4a;

    /* Body text colors */
    --body-text-1: #262626;
    --body-text-2: #333333;
    --body-text-3: #2b2b2b;
    --body-text-4: #1f2536;
    --body-text-5: #343443;
    --body-text-6: #494949;
    --body-text-7: #212231;
    --body-text-8: #44444f;
    --body-text-9: #393939;
    --body-text-10: #678199;
    --body-text-11: #5c5c5c;
    --body-text-12: #292930;

    /* Article text colors */
    --article-text-1: #16171a;
    --article-text-2: #223354;
    --article-text-3: #252533;
    --article-text-4: #32324f;
    --article-text-5: #35365a;
    --article-text-6: #222643;
    --article-text-7: #192633;
    --article-text-8: #354131;
    --article-text-9: #304331;
    --article-text-10: #36394f;
    --article-text-11: #221c2e;
    --article-text-12: #2a3345;

    /* Search text colors */
    --search-text-1: #223354;
    --search-text-2: #936711;
    --search-text-3: #167351;
    --search-text-4: #227d4b;
    --search-text-5: #8a3b57;
    --search-text-6: #533994;
    --search-text-7: #212e28;
    --search-text-8: #2e5364;
    --search-text-9: #914ba6;
    --search-text-10: #73736b;
    --search-text-11: #7e772f;
    --search-text-12: #4347a6;

    /* Channel text colors */
    --channel-text-1: #2b475e;
    --channel-text-2: #6e277f;
    --channel-text-3: #8e692f;
    --channel-text-4: #2d5c3c;
    --channel-text-5: #9c357a;
    --channel-text-6: #2d3d6e;
    --channel-text-7: #237373;
    --channel-text-8: #962367;
    --channel-text-9: #39895f;
    --channel-text-10: #342872;
    --channel-text-11: #888730;
    --channel-text-12: #2b6e64;

    /* Footer text colors */
    --footer-text-1: #f7f7f7;
    --footer-text-2: #e0e0e0;
    --footer-text-3: #cfcfd7;
    --footer-text-4: #b8b8bf;
    --footer-text-5: #f3eaff;
    --footer-text-6: #e9f9ff;
    --footer-text-7: #b8e3ff;
    --footer-text-8: #e2f4f6;
    --footer-text-9: #ffdeef;
    --footer-text-10: #fdeff9;
    --footer-text-11: #d6ffe2;
    --footer-text-12: #e7ffa6;
    --gradient-bg: linear-gradient(var(--color-charcoal-500), var(--color-charcoal-600));
    --color-text-footer: #f2f2f2;
    /* Light mode overrides */
    --bg-color-hover: #fffde8;
    --bg-body: #f5f5f5;
    --bg-body-nav: #f6f6f6;
    --bg-article: #ffffff;
    --text-color: #1d1d1d;
    --bg-body-block: #ebf9ff;
    --bg-body-block-hover: rgb(235 235 235 / 88%);
    --icon-primary: #86c9ff;
    --icon-primary-hover: #4dadf7;
    --color-background: var(--color-cream-50);
    --color-surface: var(--color-cream-50);
    --color-surface-elevated: var(--color-white);
    --color-text: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-500);
    --color-text-tertiary: var(--color-gray-400);
    --color-primary: var(--color-teal-500);
    --color-primary-hover: var(--color-teal-600);
    --color-primary-active: var(--color-teal-700);
    --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
    --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
    --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
    --color-border: rgba(var(--color-brown-600-rgb), 0.2);
    --color-btn-primary-text: var(--color-white);
    --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
    --color-error: var(--color-red-500);
    --color-success: var(--color-teal-500);
    --color-warning: var(--color-orange-500);
    --color-info: var(--color-slate-500);
    --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
    --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

    /* Legacy */
    --bg-body-nav: #f6f6f6;
    --bg-body: var(--color-background);
    --bg-article: var(--color-surface);
    --text-color: var(--color-text);
}

[data-color-scheme="dark"],
[data-theme="dark"] {

    --bg-secondary: var(--color-surface);
    --text-muted: var(--color-text-tertiary);
    --bg-primary: var(--color-background);
    --bg-tertiary: var(--color-surface-elevated);
    --bg-hover: var(--color-secondary);
    --bg-active: var(--color-secondary-active);
    --border-light: var(--color-border-light);
    --border-strong: var(--color-border-strong);
    --text-secondary: var(--color-text-secondary);
    --text-inverse: var(--color-text-inverse);

    /* Home backgrounds */
    --home-bg-1: linear-gradient(135deg, #202a3a 0%, #283646 100%);
    --home-bg-2: linear-gradient(135deg, #461c31 0%, #1e293b 100%);
    --home-bg-3: linear-gradient(135deg, #23293a 0%, #323845 100%);
    --home-bg-4: linear-gradient(135deg, #273e2c 0%, #232d26 100%);
    --home-bg-5: linear-gradient(135deg, #332328 0%, #2d232a 100%);
    --home-bg-6: linear-gradient(135deg, #22243a 0%, #1a2247 100%);
    --home-bg-7: linear-gradient(135deg, #271f33 0%, #292638 100%);
    --home-bg-8: linear-gradient(135deg, #23405c 0%, #1b2736 100%);
    --home-bg-9: linear-gradient(135deg, #31261d 0%, #393220 100%);
    --home-bg-10: linear-gradient(135deg, #1e3a37 0%, #203240 100%);
    --home-bg-11: linear-gradient(135deg, #393d28 0%, #2c2e2a 100%);
    --home-bg-12: linear-gradient(135deg, #22333a 0%, #232a36 100%);

    /* Body backgrounds */
    --body-bg-1: #181c20;
    --body-bg-2: #171720;
    --body-bg-3: #191e21;
    --body-bg-4: #232730;
    --body-bg-5: #1b1f24;
    --body-bg-6: #20223a;
    --body-bg-7: #202334;
    --body-bg-8: #141a20;
    --body-bg-9: #232127;
    --body-bg-10: #23191c;
    --body-bg-11: #282631;
    --body-bg-12: #251f21;

    /* Article backgrounds */
    --article-bg-1: #23242b;
    --article-bg-2: #24293a;
    --article-bg-3: #161b22;
    --article-bg-4: #24292f;
    --article-bg-5: #1a1923;
    --article-bg-6: #1a1f27;
    --article-bg-7: #232336;
    --article-bg-8: #221a24;
    --article-bg-9: #191d1e;
    --article-bg-10: #222d23;
    --article-bg-11: #2d1f2f;
    --article-bg-12: #21191e;

    /* Search backgrounds */
    --search-bg-1: #182131;
    --search-bg-2: #231d13;
    --search-bg-3: #122423;
    --search-bg-4: #1a261d;
    --search-bg-5: #271722;
    --search-bg-6: #1e1731;
    --search-bg-7: #212d22;
    --search-bg-8: #16281e;
    --search-bg-9: #23172b;
    --search-bg-10: #191f27;
    --search-bg-11: #232619;
    --search-bg-12: #1b222a;

    /* Channel backgrounds */
    --channel-bg-1: linear-gradient(135deg, #395f74 0%, #23415b 100%);
    --channel-bg-2: linear-gradient(135deg, #571757 0%, #3b2341 100%);
    --channel-bg-3: linear-gradient(135deg, #635029 0%, #42331e 100%);
    --channel-bg-4: linear-gradient(135deg, #2f6042 0%, #21372c 100%);
    --channel-bg-5: linear-gradient(135deg, #776337 0%, #473c1e 100%);
    --channel-bg-6: linear-gradient(135deg, #3b345a 0%, #23296b 100%);
    --channel-bg-7: linear-gradient(135deg, #225656 0%, #163c3c 100%);
    --channel-bg-8: linear-gradient(135deg, #4a2d47 0%, #231d2a 100%);
    --channel-bg-9: linear-gradient(135deg, #387457 0%, #1e3b29 100%);
    --channel-bg-10: linear-gradient(135deg, #343670 0%, #232547 100%);
    --channel-bg-11: linear-gradient(135deg, #6d6b33 0%, #2b2a1e 100%);
    --channel-bg-12: linear-gradient(135deg, #222b2a 0%, #1e2326 100%);

    /* Footer backgrounds - dark */
    --footer-bg-1: linear-gradient(135deg, #202b39 0%, #223045 100%);
    --footer-bg-2: linear-gradient(135deg, #2d1a26 0%, #271f36 100%);
    --footer-bg-3: linear-gradient(135deg, #2b2930 0%, #2c2a36 100%);
    --footer-bg-4: linear-gradient(135deg, #1a1e2c 0%, #22253b 100%);
    --footer-bg-5: linear-gradient(135deg, #241a2e 0%, #23193b 100%);
    --footer-bg-6: linear-gradient(135deg, #1c191d 0%, #232136 100%);
    --footer-bg-7: linear-gradient(135deg, #181924 0%, #1c1d2a 100%);
    --footer-bg-8: linear-gradient(135deg, #1c241e 0%, #13271e 100%);
    --footer-bg-9: linear-gradient(135deg, #23171f 0%, #2c192a 100%);
    --footer-bg-10: linear-gradient(135deg, #181e29 0%, #232d2a 100%);
    --footer-bg-11: linear-gradient(135deg, #201f26 0%, #1c1d22 100%);
    --footer-bg-12: linear-gradient(135deg, #1b1c2c 0%, #232a2f 100%);

    /* Home text colors */
    --home-text-1: #f3f3f3;
    --home-text-2: #dedee5;
    --home-text-3: #c5c5dc;
    --home-text-4: #a8dddd;
    --home-text-5: #eec0e2;
    --home-text-6: #c5c1ea;
    --home-text-7: #ecffe6;
    --home-text-8: #bde3ff;
    --home-text-9: #ffe6cb;
    --home-text-10: #c7fafd;
    --home-text-11: #fdffe9;
    --home-text-12: #e7fffa;

    /* Body text colors */
    --body-text-1: #d4d2d2;
    --body-text-2: #aaa;
    --body-text-3: #bdbdbd;
    --body-text-4: #abb0c3;
    --body-text-5: #8d8daf;
    --body-text-6: #bfbfbf;
    --body-text-7: #bbbad6;
    --body-text-8: #e8e8ee;
    --body-text-9: #eaeaea;
    --body-text-10: #a3bccc;
    --body-text-11: #b8bee0;
    --body-text-12: #e7e7eb;

    /* Article text colors */
    --article-text-1: #ccc;
    --article-text-2: #c1c6d5;
    --article-text-3: #c6cfd5;
    --article-text-4: #e3e3ee;
    --article-text-5: #e4e5ef;
    --article-text-6: #c1ded5;
    --article-text-7: #a4bedb;
    --article-text-8: #c0cbba;
    --article-text-9: #b8e6cc;
    --article-text-10: #d6e7cf;
    --article-text-11: #e4aedd;
    --article-text-12: #bdcdf6;

    /* Search text colors */
    --search-text-1: #c1d6e7;
    --search-text-2: #ecd68e;
    --search-text-3: #68debe;
    --search-text-4: #70e7ad;
    --search-text-5: #fbafd1;
    --search-text-6: #bbb3e7;
    --search-text-7: #c3cfcd;
    --search-text-8: #9ed8fa;
    --search-text-9: #d899db;
    --search-text-10: #b5b5a2;
    --search-text-11: #dbe06e;
    --search-text-12: #95a6e4;

    /* Channel text colors */
    --channel-text-1: #a9cbdb;
    --channel-text-2: #c681db;
    --channel-text-3: #f9d97b;
    --channel-text-4: #a4dfbc;
    --channel-text-5: #dbb2d3;
    --channel-text-6: #c9c9e4;
    --channel-text-7: #52dccd;
    --channel-text-8: #fdafea;
    --channel-text-9: #aaf5cc;
    --channel-text-10: #a5acee;
    --channel-text-11: #eedc96;
    --channel-text-12: #abdacc;

    /* Footer text colors */
    --footer-text-1: #e6e6e6;
    --footer-text-2: #bfbfc7;
    --footer-text-3: #d7d7e0;
    --footer-text-4: #a6f4ff;
    --footer-text-5: #ffd6ef;
    --footer-text-6: #ffb8e6;
    --footer-text-7: #9afeff;
    --footer-text-8: #f6faf8;
    --footer-text-9: #f8f8f6;
    --footer-text-10: #e3fbff;
    --footer-text-11: #b2ffbe;
    --footer-text-12: #c0c0e0;

    /* Tag System - Dark */
    --tag-bg-1: rgba(59, 130, 246, 0.2);
    --tag-bg-2: rgba(245, 158, 11, 0.2);
    --tag-bg-3: rgba(34, 197, 94, 0.2);
    --tag-bg-4: rgba(239, 68, 68, 0.2);
    --tag-bg-5: rgba(147, 51, 234, 0.2);
    --tag-bg-6: rgba(249, 115, 22, 0.2);
    --tag-bg-7: rgba(236, 72, 153, 0.2);
    --tag-bg-8: rgba(6, 182, 212, 0.2);

    --tag-text-1: #60a5fa;
    --tag-text-2: #fbbf24;
    --tag-text-3: #4ade80;
    --tag-text-4: #f87171;
    --tag-text-5: #a78bfa;
    --tag-text-6: #fb923c;
    --tag-text-7: #f472b6;
    --tag-text-8: #22d3ee;

    /* Loading & Skeleton - Dark */
    --skeleton-bg: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    --loading-overlay: rgba(0, 0, 0, 0.7);

    /* Modern Shadows - Dark */
    --shadow-glow-primary: 0 0 20px rgba(33, 128, 141, 0.3);
    --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.3);
    --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.3);
    --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.3);

    --gradient-bg: linear-gradient(var(--color-charcoal-800), var(--color-charcoal-900));
    --color-text-footer: #f2f2f2;
    /* Dark mode overrides */
    --color-surface: #020519;
    --bg-color-hover: #212121;
    --bg-body: #1a1f23;
    --bg-body-nav: #121618;
    --bg-body-block: #202020;
    --bg-body-block-hover: rgb(38 42 45 / 88%);
    --bg-article: #222222;
    --text-color: #dadada;
    --icon-primary: #2094f0;
    --icon-primary-hover: #1c82d2;
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-surface-elevated: var(--color-gray-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.8);
    --color-text-tertiary: var(--color-gray-400);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Legacy */
    --color-surface: #020519;
    --bg-body-nav: #121618;
    --bg-body: var(--color-background);
    --bg-article: var(--color-surface);
    --text-color: var(--color-text);
}

/* ============================================
   UTILITY CLASSES FOR COLORS
   ============================================ */

/* Background Colors */
.bg-background {
    background-color: var(--color-background);
}

.bg-surface {
    background-color: var(--color-surface);
}

.bg-surface-elevated {
    background-color: var(--color-surface-elevated);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-light {
    background-color: var(--color-primary-light);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-success {
    background-color: var(--color-success);
}

.bg-error {
    background-color: var(--color-error);
}

.bg-warning {
    background-color: var(--color-warning);
}

.bg-info {
    background-color: var(--color-info);
}

/* Text Colors */
.text-primary {
    color: var(--color-text);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-inverse {
    color: var(--color-text-inverse);
}

.text-brand {
    color: var(--color-primary);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text-warning {
    color: var(--color-warning);
}

.text-info {
    color: var(--color-info);
}

/* Border Colors */
.border {
    border-color: var(--color-border);
}

.border-light {
    border-color: var(--color-border-light);
}

.border-strong {
    border-color: var(--color-border-strong);
}

.border-primary {
    border-color: var(--color-primary);
}

.border-success {
    border-color: var(--color-success);
}

.border-error {
    border-color: var(--color-error);
}

.border-warning {
    border-color: var(--color-warning);
}

.border-info {
    border-color: var(--color-info);
}

/* Fill Colors (for SVGs) */
.fill-primary {
    fill: var(--color-primary);
}

.fill-secondary {
    fill: var(--color-text-secondary);
}

.fill-tertiary {
    fill: var(--color-text-tertiary);
}

.fill-current {
    fill: currentColor;
}

/* Stroke Colors (for SVGs) */
.stroke-primary {
    stroke: var(--color-primary);
}

.stroke-secondary {
    stroke: var(--color-text-secondary);
}

.stroke-tertiary {
    stroke: var(--color-text-tertiary);
}

.stroke-current {
    stroke: currentColor;
}

/* ============================================
   SHADOW VARIABLES WITH COLOR AWARENESS
   ============================================ */

:root {
    --shadow-xs: 0 1px 2px var(--shadow-color);
    --shadow-sm: 0 1px 3px var(--shadow-color), 0 1px 2px var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color), 0 10px 10px -5px var(--shadow-color);
    --shadow-2xl: 0 25px 50px -12px var(--shadow-color-strong);
    --shadow-inner: inset 0 2px 4px 0 var(--shadow-color);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Dark mode specific shadow adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
}

[data-color-scheme="dark"] {
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ============================================
   LEGACY COMPATIBILITY - Map old theme to new
   ============================================ */

.btn--primary {
    background: var(--color-primary);
    color: var(--color-btn-primary-text);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-card-border);
}



.materialize-red {
    background-color: #e51c23 !important
}

.materialize-red-text {
    color: #e51c23 !important
}

.materialize-red.lighten-5 {
    background-color: #fdeaeb !important
}

.materialize-red-text.text-lighten-5 {
    color: #fdeaeb !important
}

.materialize-red.lighten-4 {
    background-color: #f8c1c3 !important
}

.materialize-red-text.text-lighten-4 {
    color: #f8c1c3 !important
}

.materialize-red.lighten-3 {
    background-color: #f3989b !important
}

.materialize-red-text.text-lighten-3 {
    color: #f3989b !important
}

.materialize-red.lighten-2 {
    background-color: #ee6e73 !important
}

.materialize-red-text.text-lighten-2 {
    color: #ee6e73 !important
}

.materialize-red.lighten-1 {
    background-color: #ea454b !important
}

.materialize-red-text.text-lighten-1 {
    color: #ea454b !important
}

.materialize-red.darken-1 {
    background-color: #d0181e !important
}

.materialize-red-text.text-darken-1 {
    color: #d0181e !important
}

.materialize-red.darken-2 {
    background-color: #b9151b !important
}

.materialize-red-text.text-darken-2 {
    color: #b9151b !important
}

.materialize-red.darken-3 {
    background-color: #a21318 !important
}

.materialize-red-text.text-darken-3 {
    color: #a21318 !important
}

.materialize-red.darken-4 {
    background-color: #8b1014 !important
}

.materialize-red-text.text-darken-4 {
    color: #8b1014 !important
}

.red {
    background-color: #f44336 !important;
    color: #fff
}

.red-text {
    color: #f44336 !important
}

.red.lighten-5 {
    background-color: #ffebee !important
}

.red-text.text-lighten-5 {
    color: #ffebee !important
}

.red.lighten-4 {
    background-color: #ffcdd2 !important
}

.red-text.text-lighten-4 {
    color: #ffcdd2 !important
}

.red.lighten-3 {
    background-color: #ef9a9a !important
}

.red-text.text-lighten-3 {
    color: #ef9a9a !important
}

.red.lighten-2 {
    background-color: #e57373 !important
}

.red-text.text-lighten-2 {
    color: #e57373 !important
}

.red.lighten-1 {
    background-color: #ef5350 !important
}

.red-text.text-lighten-1 {
    color: #ef5350 !important
}

.red.darken-1 {
    background-color: #e53935 !important
}

.red-text.text-darken-1 {
    color: #e53935 !important
}

.red.darken-2 {
    background-color: #d32f2f !important
}

.red-text.text-darken-2 {
    color: #d32f2f !important
}

.red.darken-3 {
    background-color: #c62828 !important
}

.red-text.text-darken-3 {
    color: #c62828 !important
}

.red.darken-4 {
    background-color: #b71c1c !important
}

.red-text.text-darken-4 {
    color: #b71c1c !important
}

.red.accent-1 {
    background-color: #ff8a80 !important
}

.red-text.text-accent-1 {
    color: #ff8a80 !important
}

.red.accent-2 {
    background-color: #ff5252 !important
}

.red-text.text-accent-2 {
    color: #ff5252 !important
}

.red.accent-3 {
    background-color: #ff1744 !important
}

.red-text.text-accent-3 {
    color: #ff1744 !important
}

.red.accent-4 {
    background-color: #d50000 !important
}

.red-text.text-accent-4 {
    color: #d50000 !important
}

.pink {
    background-color: #e91e63 !important
}

.pink-text {
    color: #e91e63 !important
}

.pink.lighten-5 {
    background-color: #fce4ec !important
}

.pink-text.text-lighten-5 {
    color: #fce4ec !important
}

.pink.lighten-4 {
    background-color: #f8bbd0 !important
}

.pink-text.text-lighten-4 {
    color: #f8bbd0 !important
}

.pink.lighten-3 {
    background-color: #f48fb1 !important
}

.pink-text.text-lighten-3 {
    color: #f48fb1 !important
}

.pink.lighten-2 {
    background-color: #f06292 !important
}

.pink-text.text-lighten-2 {
    color: #f06292 !important
}

.pink.lighten-1 {
    background-color: #ec407a !important
}

.pink-text.text-lighten-1 {
    color: #ec407a !important
}

.pink.darken-1 {
    background-color: #d81b60 !important
}

.pink-text.text-darken-1 {
    color: #d81b60 !important
}

.pink.darken-2 {
    background-color: #c2185b !important
}

.pink-text.text-darken-2 {
    color: #c2185b !important
}

.pink.darken-3 {
    background-color: #ad1457 !important
}

.pink-text.text-darken-3 {
    color: #ad1457 !important
}

.pink.darken-4 {
    background-color: #880e4f !important
}

.pink-text.text-darken-4 {
    color: #880e4f !important
}

.pink.accent-1 {
    background-color: #ff80ab !important
}

.pink-text.text-accent-1 {
    color: #ff80ab !important
}

.pink.accent-2 {
    background-color: #ff4081 !important
}

.pink-text.text-accent-2 {
    color: #ff4081 !important
}

.pink.accent-3 {
    background-color: #f50057 !important
}

.pink-text.text-accent-3 {
    color: #f50057 !important
}

.pink.accent-4 {
    background-color: #c51162 !important
}

.pink-text.text-accent-4 {
    color: #c51162 !important
}

.purple {
    background-color: #9c27b0 !important
}

.purple-text {
    color: #9c27b0 !important
}

.purple.lighten-5 {
    background-color: #f3e5f5 !important
}

.purple-text.text-lighten-5 {
    color: #f3e5f5 !important
}

.purple.lighten-4 {
    background-color: #e1bee7 !important
}

.purple-text.text-lighten-4 {
    color: #e1bee7 !important
}

.purple.lighten-3 {
    background-color: #ce93d8 !important
}

.purple-text.text-lighten-3 {
    color: #ce93d8 !important
}

.purple.lighten-2 {
    background-color: #ba68c8 !important
}

.purple-text.text-lighten-2 {
    color: #ba68c8 !important
}

.purple.lighten-1 {
    background-color: #ab47bc !important
}

.purple-text.text-lighten-1 {
    color: #ab47bc !important
}

.purple.darken-1 {
    background-color: #8e24aa !important
}

.purple-text.text-darken-1 {
    color: #8e24aa !important
}

.purple.darken-2 {
    background-color: #7b1fa2 !important
}

.purple-text.text-darken-2 {
    color: #7b1fa2 !important
}

.purple.darken-3 {
    background-color: #6a1b9a !important
}

.purple-text.text-darken-3 {
    color: #6a1b9a !important
}

.purple.darken-4 {
    background-color: #4a148c !important
}

.purple-text.text-darken-4 {
    color: #4a148c !important
}

.purple.accent-1 {
    background-color: #ea80fc !important
}

.purple-text.text-accent-1 {
    color: #ea80fc !important
}

.purple.accent-2 {
    background-color: #e040fb !important
}

.purple-text.text-accent-2 {
    color: #e040fb !important
}

.purple.accent-3 {
    background-color: #d500f9 !important
}

.purple-text.text-accent-3 {
    color: #d500f9 !important
}

.purple.accent-4 {
    background-color: #a0f !important
}

.purple-text.text-accent-4 {
    color: #a0f !important
}

.deep-purple {
    background-color: #673ab7 !important
}

.deep-purple-text {
    color: #673ab7 !important
}

.deep-purple.lighten-5 {
    background-color: #ede7f6 !important
}

.deep-purple-text.text-lighten-5 {
    color: #ede7f6 !important
}

.deep-purple.lighten-4 {
    background-color: #d1c4e9 !important
}

.deep-purple-text.text-lighten-4 {
    color: #d1c4e9 !important
}

.deep-purple.lighten-3 {
    background-color: #b39ddb !important
}

.deep-purple-text.text-lighten-3 {
    color: #b39ddb !important
}

.deep-purple.lighten-2 {
    background-color: #9575cd !important
}

.deep-purple-text.text-lighten-2 {
    color: #9575cd !important
}

.deep-purple.lighten-1 {
    background-color: #7e57c2 !important
}

.deep-purple-text.text-lighten-1 {
    color: #7e57c2 !important
}

.deep-purple.darken-1 {
    background-color: #5e35b1 !important
}

.deep-purple-text.text-darken-1 {
    color: #5e35b1 !important
}

.deep-purple.darken-2 {
    background-color: #512da8 !important
}

.deep-purple-text.text-darken-2 {
    color: #512da8 !important
}

.deep-purple.darken-3 {
    background-color: #4527a0 !important
}

.deep-purple-text.text-darken-3 {
    color: #4527a0 !important
}

.deep-purple.darken-4 {
    background-color: #311b92 !important
}

.deep-purple-text.text-darken-4 {
    color: #311b92 !important
}

.deep-purple.accent-1 {
    background-color: #b388ff !important
}

.deep-purple-text.text-accent-1 {
    color: #b388ff !important
}

.deep-purple.accent-2 {
    background-color: #7c4dff !important
}

.deep-purple-text.text-accent-2 {
    color: #7c4dff !important
}

.deep-purple.accent-3 {
    background-color: #651fff !important
}

.deep-purple-text.text-accent-3 {
    color: #651fff !important
}

.deep-purple.accent-4 {
    background-color: #6200ea !important
}

.deep-purple-text.text-accent-4 {
    color: #6200ea !important
}

.indigo {
    background-color: #3f51b5 !important
}

.indigo-text {
    color: #3f51b5 !important
}

.indigo.lighten-5 {
    background-color: #e8eaf6 !important
}

.indigo-text.text-lighten-5 {
    color: #e8eaf6 !important
}

.indigo.lighten-4 {
    background-color: #c5cae9 !important
}

.indigo-text.text-lighten-4 {
    color: #c5cae9 !important
}

.indigo.lighten-3 {
    background-color: #9fa8da !important
}

.indigo-text.text-lighten-3 {
    color: #9fa8da !important
}

.indigo.lighten-2 {
    background-color: #7986cb !important
}

.indigo-text.text-lighten-2 {
    color: #7986cb !important
}

.indigo.lighten-1 {
    background-color: #5c6bc0 !important
}

.indigo-text.text-lighten-1 {
    color: #5c6bc0 !important
}

.indigo.darken-1 {
    background-color: #3949ab !important
}

.indigo-text.text-darken-1 {
    color: #3949ab !important
}

.indigo.darken-2 {
    background-color: #303f9f !important
}

.indigo-text.text-darken-2 {
    color: #303f9f !important
}

.indigo.darken-3 {
    background-color: #283593 !important
}

.indigo-text.text-darken-3 {
    color: #283593 !important
}

.indigo.darken-4 {
    background-color: #1a237e !important
}

.indigo-text.text-darken-4 {
    color: #1a237e !important
}

.indigo.accent-1 {
    background-color: #8c9eff !important
}

.indigo-text.text-accent-1 {
    color: #8c9eff !important
}

.indigo.accent-2 {
    background-color: #536dfe !important
}

.indigo-text.text-accent-2 {
    color: #536dfe !important
}

.indigo.accent-3 {
    background-color: #3d5afe !important
}

.indigo-text.text-accent-3 {
    color: #3d5afe !important
}

.indigo.accent-4 {
    background-color: #304ffe !important
}

.indigo-text.text-accent-4 {
    color: #304ffe !important
}

.blue {
    background-color: #2196f3 !important;
}

.blue-light {
    background-color: #58aff4 !important;
}

.blue-light-1 {
    background-color: #76c1fc !important;
}

.blue-text-light {
    color: #58aff4 !important;
}

.blue-text-light-1 {
    color: #76c1fc !important;
}

.blue-text {
    color: #2196f3 !important
}

.blue.lighten-5 {
    background-color: #e3f2fd !important
}

.blue-text.text-lighten-5 {
    color: #e3f2fd !important
}

.blue.lighten-4 {
    background-color: #bbdefb !important
}

.blue-text.text-lighten-4 {
    color: #bbdefb !important
}

.blue.lighten-3 {
    background-color: #90caf9 !important
}

.blue-text.text-lighten-3 {
    color: #90caf9 !important
}

.blue.lighten-2 {
    background-color: #64b5f6 !important
}

.blue-text.text-lighten-2 {
    color: #64b5f6 !important
}

.blue.lighten-1 {
    background-color: #42a5f5 !important
}

.blue-text.text-lighten-1 {
    color: #42a5f5 !important
}

.blue.darken-text {
    color: #273a64 !important
}

.blue.darken,
.grey.darken-3 {
    background-color: #273a64 !important
}

.blue.darken-1 {
    background-color: #1e88e5 !important
}

.broadcast-color {
    background-color: #182b3a;
    background-image: linear-gradient(315deg, #182b3a 0, #20a4f3 74%)
}

.blue-text.text-darken-1 {
    color: #1e88e5 !important
}

.blue.darken-2 {
    background-color: #1976d2 !important
}

.blue-text.text-darken-2 {
    color: #1976d2 !important
}

.blue.darken-3 {
    background-color: #1565c0 !important
}

.blue-text.text-darken-3 {
    color: #1565c0 !important
}

.blue.darken-4 {
    background-color: #0d47a1 !important
}

.blue-text.text-darken-4 {
    color: #0d47a1 !important
}

.blue.accent-1 {
    background-color: #82b1ff !important
}

.blue-text.text-accent-1 {
    color: #82b1ff !important
}

.blue.accent-2 {
    background-color: #448aff !important
}

.blue-text.text-accent-2 {
    color: #448aff !important
}

.blue.accent-3 {
    background-color: #2979ff !important
}

.blue-text.text-accent-3 {
    color: #2979ff !important
}

.blue.accent-4 {
    background-color: #2962ff !important
}

.blue-text.text-accent-4 {
    color: #2962ff !important
}

.light-blue {
    background-color: #03a9f4 !important
}

.light-blue-text {
    color: #03a9f4 !important
}

.light-blue.lighten-5 {
    background-color: #e1f5fe !important
}

.light-blue-text.text-lighten-5 {
    color: #e1f5fe !important
}

.light-blue.lighten-4 {
    background-color: #b3e5fc !important
}

.light-blue-text.text-lighten-4 {
    color: #b3e5fc !important
}

.light-blue.lighten-3 {
    background-color: #81d4fa !important
}

.light-blue-text.text-lighten-3 {
    color: #81d4fa !important
}

.light-blue.lighten-2 {
    background-color: #4fc3f7 !important
}

.light-blue-text.text-lighten-2 {
    color: #4fc3f7 !important
}

.light-blue.lighten-1 {
    background-color: #29b6f6 !important
}

.light-blue-text.text-lighten-1 {
    color: #29b6f6 !important
}

.light-blue.darken-1 {
    background-color: #039be5 !important
}

.light-blue-text.text-darken-1 {
    color: #039be5 !important
}

.light-blue.darken-2 {
    background-color: #0288d1 !important
}

.light-blue-text.text-darken-2 {
    color: #0288d1 !important
}

.light-blue.darken-3 {
    background-color: #0277bd !important
}

.light-blue-text.text-darken-3 {
    color: #0277bd !important
}

.light-blue.darken-4 {
    background-color: #01579b !important
}

.light-blue-text.text-darken-4 {
    color: #01579b !important
}

.light-blue.accent-1 {
    background-color: #80d8ff !important
}

.light-blue-text.text-accent-1 {
    color: #80d8ff !important
}

.light-blue.accent-2 {
    background-color: #40c4ff !important
}

.light-blue-text.text-accent-2 {
    color: #40c4ff !important
}

.light-blue.accent-3 {
    background-color: #00b0ff !important
}

.light-blue-text.text-accent-3 {
    color: #00b0ff !important
}

.light-blue.accent-4 {
    background-color: #0091ea !important
}

.light-blue-text.text-accent-4 {
    color: #0091ea !important
}

.cyan {
    background-color: #00bcd4 !important
}

.cyan-text {
    color: #00bcd4 !important
}

.cyan.lighten-5 {
    background-color: #e0f7fa !important
}

.cyan-text.text-lighten-5 {
    color: #e0f7fa !important
}

.cyan.lighten-4 {
    background-color: #b2ebf2 !important
}

.cyan-text.text-lighten-4 {
    color: #b2ebf2 !important
}

.cyan.lighten-3 {
    background-color: #80deea !important
}

.cyan-text.text-lighten-3 {
    color: #80deea !important
}

.cyan.lighten-2 {
    background-color: #4dd0e1 !important
}

.cyan-text.text-lighten-2 {
    color: #4dd0e1 !important
}

.cyan.lighten-1 {
    background-color: #26c6da !important
}

.cyan-text.text-lighten-1 {
    color: #26c6da !important
}

.cyan.darken-1 {
    background-color: #00acc1 !important
}

.cyan-text.text-darken-1 {
    color: #00acc1 !important
}

.cyan.darken-2 {
    background-color: #0097a7 !important
}

.cyan-text.text-darken-2 {
    color: #0097a7 !important
}

.cyan.darken-3 {
    background-color: #00838f !important
}

.cyan-text.text-darken-3 {
    color: #00838f !important
}

.cyan.darken-4 {
    background-color: #006064 !important
}

.cyan-text.text-darken-4 {
    color: #006064 !important
}

.cyan.accent-1 {
    background-color: #84ffff !important
}

.cyan-text.text-accent-1 {
    color: #84ffff !important
}

.cyan.accent-2 {
    background-color: #18ffff !important
}

.cyan-text.text-accent-2 {
    color: #18ffff !important
}

.cyan.accent-3 {
    background-color: #00e5ff !important
}

.cyan-text.text-accent-3 {
    color: #00e5ff !important
}

.cyan.accent-4 {
    background-color: #00b8d4 !important
}

.cyan-text.text-accent-4 {
    color: #00b8d4 !important
}

.teal {
    background-color: #009688 !important
}

.teal-text {
    color: #009688 !important
}

.teal.lighten-5 {
    background-color: #e0f2f1 !important
}

.teal-text.text-lighten-5 {
    color: #e0f2f1 !important
}

.teal.lighten-4 {
    background-color: #b2dfdb !important
}

.teal-text.text-lighten-4 {
    color: #b2dfdb !important
}

.teal.lighten-3 {
    background-color: #80cbc4 !important
}

.teal-text.text-lighten-3 {
    color: #80cbc4 !important
}

.teal.lighten-2 {
    background-color: #4db6ac !important
}

.teal-text.text-lighten-2 {
    color: #4db6ac !important
}

.teal.lighten-1 {
    background-color: #26a69a !important
}

.teal-text.text-lighten-1 {
    color: #26a69a !important
}

.teal.darken-1 {
    background-color: #00897b !important
}

.teal-text.text-darken-1 {
    color: #00897b !important
}

.teal.darken-2 {
    background-color: #00796b !important
}

.teal-text.text-darken-2 {
    color: #00796b !important
}

.teal.darken-3 {
    background-color: #00695c !important
}

.teal-text.text-darken-3 {
    color: #00695c !important
}

.teal.darken-4 {
    background-color: #004d40 !important
}

.teal-text.text-darken-4 {
    color: #004d40 !important
}

.teal.accent-1 {
    background-color: #a7ffeb !important
}

.teal-text.text-accent-1 {
    color: #a7ffeb !important
}

.teal.accent-2 {
    background-color: #64ffda !important
}

.teal-text.text-accent-2 {
    color: #64ffda !important
}

.teal.accent-3 {
    background-color: #1de9b6 !important
}

.teal-text.text-accent-3 {
    color: #1de9b6 !important
}

.teal.accent-4 {
    background-color: #00bfa5 !important
}

.teal-text.text-accent-4 {
    color: #00bfa5 !important
}

.green {
    background-color: #4caf50 !important
}

.green-text {
    color: #4caf50 !important
}

.green.lighten-5 {
    background-color: #e8f5e9 !important
}

.green-text.text-lighten-5 {
    color: #e8f5e9 !important
}

.green.lighten-4 {
    background-color: #c8e6c9 !important
}

.green-text.text-lighten-4 {
    color: #c8e6c9 !important
}

.green.lighten-3 {
    background-color: #a5d6a7 !important
}

.green-text.text-lighten-3 {
    color: #a5d6a7 !important
}

.green.lighten-2 {
    background-color: #81c784 !important
}

.green-text.text-lighten-2 {
    color: #81c784 !important
}

.green.lighten-1 {
    background-color: #66bb6a !important
}

.green-text.text-lighten-1 {
    color: #66bb6a !important
}

.green.darken-1 {
    background-color: #43a047 !important
}

.green-text.text-darken-1 {
    color: #43a047 !important
}

.green.darken-2 {
    background-color: #388e3c !important
}

.green-text.text-darken-2 {
    color: #388e3c !important
}

.green.darken-3 {
    background-color: #2e7d32 !important
}

.green-text.text-darken-3 {
    color: #2e7d32 !important
}

.green.darken-4 {
    background-color: #1b5e20 !important
}

.green-text.text-darken-4 {
    color: #1b5e20 !important
}

.green.accent-1 {
    background-color: #b9f6ca !important
}

.green-text.text-accent-1 {
    color: #b9f6ca !important
}

.green.accent-2 {
    background-color: #69f0ae !important
}

.green-text.text-accent-2 {
    color: #69f0ae !important
}

.green.accent-3 {
    background-color: #00e676 !important
}

.green-text.text-accent-3 {
    color: #00e676 !important
}

.green.accent-4 {
    background-color: #00c853 !important
}

.green-text.text-accent-4 {
    color: #00c853 !important
}

.light-green {
    background-color: #8bc34a !important
}

.light-green-text {
    color: #8bc34a !important
}

.light-green.lighten-5 {
    background-color: #f1f8e9 !important
}

.light-green-text.text-lighten-5 {
    color: #f1f8e9 !important
}

.light-green.lighten-4 {
    background-color: #dcedc8 !important
}

.light-green-text.text-lighten-4 {
    color: #dcedc8 !important
}

.light-green.lighten-3 {
    background-color: #c5e1a5 !important
}

.light-green-text.text-lighten-3 {
    color: #c5e1a5 !important
}

.light-green.lighten-2 {
    background-color: #aed581 !important
}

.light-green-text.text-lighten-2 {
    color: #aed581 !important
}

.light-green.lighten-1 {
    background-color: #9ccc65 !important
}

.light-green-text.text-lighten-1 {
    color: #9ccc65 !important
}

.light-green.darken-1 {
    background-color: #7cb342 !important
}

.light-green-text.text-darken-1 {
    color: #7cb342 !important
}

.light-green.darken-2 {
    background-color: #689f38 !important
}

.light-green-text.text-darken-2 {
    color: #689f38 !important
}

.light-green.darken-3 {
    background-color: #558b2f !important
}

.light-green-text.text-darken-3 {
    color: #558b2f !important
}

.light-green.darken-4 {
    background-color: #33691e !important
}

.light-green-text.text-darken-4 {
    color: #33691e !important
}

.light-green.accent-1 {
    background-color: #ccff90 !important
}

.light-green-text.text-accent-1 {
    color: #ccff90 !important
}

.light-green.accent-2 {
    background-color: #b2ff59 !important
}

.light-green-text.text-accent-2 {
    color: #b2ff59 !important
}

.light-green.accent-3 {
    background-color: #76ff03 !important
}

.light-green-text.text-accent-3 {
    color: #76ff03 !important
}

.light-green.accent-4 {
    background-color: #64dd17 !important
}

.light-green-text.text-accent-4 {
    color: #64dd17 !important
}

.lime {
    background-color: #cddc39 !important
}

.lime-text {
    color: #cddc39 !important
}

.lime.lighten-5 {
    background-color: #f9fbe7 !important
}

.lime-text.text-lighten-5 {
    color: #f9fbe7 !important
}

.lime.lighten-4 {
    background-color: #f0f4c3 !important
}

.lime-text.text-lighten-4 {
    color: #f0f4c3 !important
}

.lime.lighten-3 {
    background-color: #e6ee9c !important
}

.lime-text.text-lighten-3 {
    color: #e6ee9c !important
}

.lime.lighten-2 {
    background-color: #dce775 !important
}

.lime-text.text-lighten-2 {
    color: #dce775 !important
}

.lime.lighten-1 {
    background-color: #d4e157 !important
}

.lime-text.text-lighten-1 {
    color: #d4e157 !important
}

.lime.darken-1 {
    background-color: #c0ca33 !important
}

.lime-text.text-darken-1 {
    color: #c0ca33 !important
}

.lime.darken-2 {
    background-color: #afb42b !important
}

.lime-text.text-darken-2 {
    color: #afb42b !important
}

.lime.darken-3 {
    background-color: #9e9d24 !important
}

.lime-text.text-darken-3 {
    color: #9e9d24 !important
}

.lime.darken-4 {
    background-color: #827717 !important
}

.lime-text.text-darken-4 {
    color: #827717 !important
}

.lime.accent-1 {
    background-color: #f4ff81 !important
}

.lime-text.text-accent-1 {
    color: #f4ff81 !important
}

.lime.accent-2 {
    background-color: #eeff41 !important
}

.lime-text.text-accent-2 {
    color: #eeff41 !important
}

.lime.accent-3 {
    background-color: #c6ff00 !important
}

.lime-text.text-accent-3 {
    color: #c6ff00 !important
}

.lime.accent-4 {
    background-color: #aeea00 !important
}

.lime-text.text-accent-4 {
    color: #aeea00 !important
}

.yellow {
    background-color: yellow;
}

.yellow-text {
    color: #ffeb3b !important
}

.yellow.lighten-5 {
    background-color: #fffde7 !important
}

.yellow-text.text-lighten-5 {
    color: #fffde7 !important
}

.yellow.lighten-4 {
    background-color: #fff9c4 !important
}

.yellow-text.text-lighten-4 {
    color: #fff9c4 !important
}

.yellow.lighten-3 {
    background-color: #fff59d !important
}

.yellow-text.text-lighten-3 {
    color: #fff59d !important
}

.yellow.lighten-2 {
    background-color: #fff176 !important
}

.yellow-text.text-lighten-2 {
    color: #fff176 !important
}

.yellow.lighten-1 {
    background-color: #ffee58 !important
}

.yellow-text.text-lighten-1 {
    color: #ffee58 !important
}

.yellow.darken-1 {
    background-color: #fdd835 !important
}

.yellow-text.text-darken-1 {
    color: #fdd835 !important
}

.yellow.darken-2 {
    background-color: #fbc02d !important
}

.yellow-text.text-darken-2 {
    color: #fbc02d !important
}

.yellow.darken-3 {
    background-color: #f9a825 !important
}

.yellow-text.text-darken-3 {
    color: #f9a825 !important
}

.yellow.darken-4 {
    background-color: #f57f17 !important
}

.yellow-text.text-darken-4 {
    color: #f57f17 !important
}

.yellow.accent-1 {
    background-color: #ffff8d !important
}

.yellow-text.text-accent-1 {
    color: #ffff8d !important
}

.yellow.accent-2 {
    background-color: #ff0 !important
}

.yellow-text.text-accent-2 {
    color: #ff0 !important
}

.yellow.accent-3 {
    background-color: #ffea00 !important
}

.yellow-text.text-accent-3 {
    color: #ffea00 !important
}

.yellow.accent-4 {
    background-color: #ffd600 !important
}

.yellow-text.text-accent-4 {
    color: #ffd600 !important
}

.amber {
    background-color: #ffc107 !important
}

.amber-text {
    color: #ffc107 !important
}

.amber.lighten-5 {
    background-color: #fff8e1 !important
}

.amber-text.text-lighten-5 {
    color: #fff8e1 !important
}

.amber.lighten-4 {
    background-color: #ffecb3 !important
}

.amber-text.text-lighten-4 {
    color: #ffecb3 !important
}

.amber.lighten-3 {
    background-color: #ffe082 !important
}

.amber-text.text-lighten-3 {
    color: #ffe082 !important
}

.amber.lighten-2 {
    background-color: #ffd54f !important
}

.amber-text.text-lighten-2 {
    color: #ffd54f !important
}

.amber.lighten-1 {
    background-color: #ffca28 !important
}

.amber-text.text-lighten-1 {
    color: #ffca28 !important
}

.amber.darken-1 {
    background-color: #ffb300 !important
}

.amber-text.text-darken-1 {
    color: #ffb300 !important
}

.amber.darken-2 {
    background-color: #ffa000 !important
}

.amber-text.text-darken-2 {
    color: #ffa000 !important
}

.amber.darken-3 {
    background-color: #ff8f00 !important
}

.amber-text.text-darken-3 {
    color: #ff8f00 !important
}

.amber.darken-4 {
    background-color: #ff6f00 !important
}

.amber-text.text-darken-4 {
    color: #ff6f00 !important
}

.amber.accent-1 {
    background-color: #ffe57f !important
}

.amber-text.text-accent-1 {
    color: #ffe57f !important
}

.amber.accent-2 {
    background-color: #ffd740 !important
}

.amber-text.text-accent-2 {
    color: #ffd740 !important
}

.amber.accent-3 {
    background-color: #ffc400 !important
}

.amber-text.text-accent-3 {
    color: #ffc400 !important
}

.amber.accent-4 {
    background-color: #ffab00 !important
}

.amber-text.text-accent-4 {
    color: #ffab00 !important
}

.orange {
    background-color: #ff9800 !important
}

.orange-text {
    color: #ff9800 !important
}

.orange.lighten-5 {
    background-color: #fff3e0 !important
}

.orange-text.text-lighten-5 {
    color: #fff3e0 !important
}

.orange.lighten-4 {
    background-color: #ffe0b2 !important
}

.orange-text.text-lighten-4 {
    color: #ffe0b2 !important
}

.orange.lighten-3 {
    background-color: #ffcc80 !important
}

.orange-text.text-lighten-3 {
    color: #ffcc80 !important
}

.orange.lighten-2 {
    background-color: #ffb74d !important
}

.orange-text.text-lighten-2 {
    color: #ffb74d !important
}

.orange.lighten-1 {
    background-color: #ffa726 !important
}

.orange-text.text-lighten-1 {
    color: #ffa726 !important
}

.orange.darken-1 {
    background-color: #fb8c00 !important
}

.orange-text.text-darken-1 {
    color: #fb8c00 !important
}

.orange.darken-2 {
    background-color: #f57c00 !important
}

.orange-text.text-darken-2 {
    color: #f57c00 !important
}

.orange.darken-3 {
    background-color: #ef6c00 !important
}

.orange-text.text-darken-3 {
    color: #ef6c00 !important
}

.orange.darken-4 {
    background-color: #e65100 !important
}

.orange-text.text-darken-4 {
    color: #e65100 !important
}

.orange.accent-1 {
    background-color: #ffd180 !important
}

.orange-text.text-accent-1 {
    color: #ffd180 !important
}

.orange.accent-2 {
    background-color: #ffab40 !important
}

.orange-text.text-accent-2 {
    color: #ffab40 !important
}

.orange.accent-3 {
    background-color: #ff9100 !important
}

.orange-text.text-accent-3 {
    color: #ff9100 !important
}

.orange.accent-4 {
    background-color: #ff6d00 !important
}

.orange-text.text-accent-4 {
    color: #ff6d00 !important
}

.deep-orange {
    background-color: #ff5722 !important
}

.deep-orange-text {
    color: #ff5722 !important
}

.deep-orange.lighten-5 {
    background-color: #fbe9e7 !important
}

.deep-orange-text.text-lighten-5 {
    color: #fbe9e7 !important
}

.deep-orange.lighten-4 {
    background-color: #ffccbc !important
}

.deep-orange-text.text-lighten-4 {
    color: #ffccbc !important
}

.deep-orange.lighten-3 {
    background-color: #ffab91 !important
}

.deep-orange-text.text-lighten-3 {
    color: #ffab91 !important
}

.deep-orange.lighten-2 {
    background-color: #ff8a65 !important
}

.deep-orange-text.text-lighten-2 {
    color: #ff8a65 !important
}

.deep-orange.lighten-1 {
    background-color: #ff7043 !important
}

.deep-orange-text.text-lighten-1 {
    color: #ff7043 !important
}

.deep-orange.darken-1 {
    background-color: #f4511e !important
}

.deep-orange-text.text-darken-1 {
    color: #f4511e !important
}

.deep-orange.darken-2 {
    background-color: #e64a19 !important
}

.deep-orange-text.text-darken-2 {
    color: #e64a19 !important
}

.deep-orange.darken-3 {
    background-color: #d84315 !important
}

.deep-orange-text.text-darken-3 {
    color: #d84315 !important
}

.deep-orange.darken-4 {
    background-color: #bf360c !important
}

.deep-orange-text.text-darken-4 {
    color: #bf360c !important
}

.deep-orange.accent-1 {
    background-color: #ff9e80 !important
}

.deep-orange-text.text-accent-1 {
    color: #ff9e80 !important
}

.deep-orange.accent-2 {
    background-color: #ff6e40 !important
}

.deep-orange-text.text-accent-2 {
    color: #ff6e40 !important
}

.deep-orange.accent-3 {
    background-color: #ff3d00 !important
}

.deep-orange-text.text-accent-3 {
    color: #ff3d00 !important
}

.deep-orange.accent-4 {
    background-color: #dd2c00 !important
}

.deep-orange-text.text-accent-4 {
    color: #dd2c00 !important
}

.brown {
    background-color: #795548 !important
}

.brown-text {
    color: #795548 !important
}

.brown.lighten-5 {
    background-color: #efebe9 !important
}

.brown-text.text-lighten-5 {
    color: #efebe9 !important
}

.brown.lighten-4 {
    background-color: #d7ccc8 !important
}

.brown-text.text-lighten-4 {
    color: #d7ccc8 !important
}

.brown.lighten-3 {
    background-color: #bcaaa4 !important
}

.brown-text.text-lighten-3 {
    color: #bcaaa4 !important
}

.brown.lighten-2 {
    background-color: #a1887f !important
}

.brown-text.text-lighten-2 {
    color: #a1887f !important
}

.brown.lighten-1 {
    background-color: #8d6e63 !important
}

.brown-text.text-lighten-1 {
    color: #8d6e63 !important
}

.brown.darken-1 {
    background-color: #6d4c41 !important
}

.brown-text.text-darken-1 {
    color: #6d4c41 !important
}

.brown.darken-2 {
    background-color: #5d4037 !important
}

.brown-text.text-darken-2 {
    color: #5d4037 !important
}

.brown.darken-3 {
    background-color: #4e342e !important
}

.brown-text.text-darken-3 {
    color: #4e342e !important
}

.brown.darken-4 {
    background-color: #3e2723 !important
}

.brown-text.text-darken-4 {
    color: #3e2723 !important
}

.blue-grey {
    background-color: #607d8b !important
}

.blue-grey-text {
    color: #607d8b !important
}

.blue-grey.lighten-5 {
    background-color: #eceff1 !important
}

.blue-grey-text.text-lighten-5 {
    color: #eceff1 !important
}

.blue-grey.lighten-4 {
    background-color: #cfd8dc !important
}

.blue-grey-text.text-lighten-4 {
    color: #cfd8dc !important
}

.blue-grey.lighten-3 {
    background-color: #b0bec5 !important
}

.blue-grey-text.text-lighten-3 {
    color: #b0bec5 !important
}

.blue-grey.lighten-2 {
    background-color: #90a4ae !important
}

.blue-grey-text.text-lighten-2 {
    color: #90a4ae !important
}

.blue-grey.lighten-1 {
    background-color: #78909c !important
}

.blue-grey-text.text-lighten-1 {
    color: #78909c !important
}

.blue-grey.darken-1 {
    background-color: #546e7a !important
}

.blue-grey-text.text-darken-1 {
    color: #546e7a !important
}

.blue-grey.darken-2 {
    background-color: #455a64 !important
}

.blue-grey-text.text-darken-2 {
    color: #455a64 !important
}

.blue-grey.darken-3 {
    background-color: #37474f !important
}

.blue-grey-text.text-darken-3 {
    color: #37474f !important
}

.blue-grey.darken-4 {
    background-color: #263238 !important
}

.blue-grey-text.text-darken-4 {
    color: #263238 !important
}

.grey {
    background-color: #9e9e9e !important
}

.grey-text {
    color: #9e9e9e !important
}

.grey.lighten-5 {
    background-color: #fafafa !important
}

.grey-text.text-lighten-5 {
    color: #fafafa !important
}

.grey.lighten-4 {
    background-color: #f5f5f5 !important
}

.grey-text.text-lighten-4 {
    color: #f5f5f5 !important
}

.grey.lighten-3 {
    background-color: #eee !important
}

.grey-text.text-lighten-3 {
    color: #eee !important
}

.grey.lighten-2 {
    background-color: #e0e0e0 !important
}

.grey-text.text-lighten-2 {
    color: #e0e0e0 !important
}

.grey.lighten-1 {
    background-color: #bdbdbd !important
}

.grey-text.text-lighten-1 {
    color: #bdbdbd !important
}

.grey.darken-1 {
    background-color: #757575 !important
}

.grey-text.text-darken-1 {
    color: #757575 !important
}

.grey.darken-2 {
    background-color: #616161 !important
}

.grey-text.text-darken-2 {
    color: #616161 !important
}

.grey-text.text-darken-3 {
    color: #424242 !important
}

.grey.darken-4 {
    background-color: #212121 !important
}

.grey-text.text-darken-4 {
    color: #212121 !important
}

.black,
.shades.black {
    background-color: #000 !important
}

.black-text,
.shades-text.text-black {
    color: #000 !important
}

.shades.white,
.white {
    background-color: #fff !important
}

.shades-text.text-white,
.white-text {
    color: #fff !important
}

.shades.transparent,
.transparent {
    background-color: transparent !important
}

.shades-text.text-transparent,
.transparent-text {
    color: transparent !important
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    background-color: #777;
    border-radius: 10px
}

.badge:empty {
    display: none
}

.btn .badge {
    position: relative;
    top: -1px
}

.btn-xs .badge {
    top: 0;
    padding: 1px 5px
}

a.badge:focus,
a.badge:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

.nav-pills>.active>a>.badge,
a.list-group-item.active>.badge {
    color: #3498db;
    background-color: #fff
}

.nav-pills>li>a>.badge {
    margin-left: 3px
}

.bg-primary {
    background-color: #3498db !important;
    color: #e1f0fa
}

.bg-primary.darker,
a.bg-primary:hover {
    background-color: #217dbb !important
}

.bg-primary .text-muted {
    color: #b0dbf8
}

.bg-primary .text-darken {
    color: #217dbb
}

.bg-primary.light {
    background-color: #4ea5e0 !important
}

.bg-primary.lighter {
    background-color: #5faee3 !important
}

.bg-primary.dark {
    background-color: #2489cc !important
}

.bg-alert .open>a,
.bg-alert .open>a:focus,
.bg-alert .open>a:hover,
.bg-danger .open>a,
.bg-danger .open>a:focus,
.bg-danger .open>a:hover,
.bg-dark .open>a,
.bg-dark .open>a:focus,
.bg-dark .open>a:hover,
.bg-info .open>a,
.bg-info .open>a:focus,
.bg-info .open>a:hover,
.bg-primary .open>a,
.bg-primary .open>a:focus,
.bg-primary .open>a:hover,
.bg-success .open>a,
.bg-success .open>a:focus,
.bg-success .open>a:hover,
.bg-system .open>a,
.bg-system .open>a:focus,
.bg-system .open>a:hover,
.bg-warning .open>a,
.bg-warning .open>a:focus,
.bg-warning .open>a:hover,
.text-white,
.text-white-light,
.text-white-lighter {
    color: #fff
}

.bg-success {
    background-color: #70ca63 !important;
    color: #fcfefb
}

.bg-success.darker,
a.bg-success:hover {
    background-color: #4fbb3f !important
}

.bg-success .text-muted {
    color: #d6f5d1
}

.bg-success .text-darken {
    color: #4fbb3f
}

.bg-success.light {
    background-color: #85d27a !important
}

.bg-success.lighter {
    background-color: #93d789 !important
}

.bg-success.dark {
    background-color: #5bc24c !important
}

.bg-info {
    background-color: #3bafda !important;
    color: #e7f5fa
}

.bg-info.darker,
a.bg-info:hover {
    background-color: #2494be !important
}

.bg-info .text-muted {
    color: #b6e6f8
}

.bg-info .text-darken {
    color: #2494be
}

.bg-info.light {
    background-color: #55badf !important
}

.bg-info.lighter {
    background-color: #66c1e2 !important
}

.bg-info.dark {
    background-color: #27a2cf !important
}

.bg-warning {
    background-color: #f6bb42 !important;
    color: #fff
}

.bg-warning.darker,
a.bg-warning:hover {
    background-color: #f4a911 !important
}

.bg-warning .text-muted {
    color: #fff0d2
}

.bg-warning .text-darken {
    color: #f4a911
}

.bg-warning.light {
    background-color: #f7c65f !important
}

.bg-warning.lighter {
    background-color: #f8cd73 !important
}

.bg-warning.dark {
    background-color: #f5b025 !important
}

.bg-danger {
    background-color: #df5640 !important;
    color: #fcf1ef
}

.bg-danger.darker,
a.bg-danger:hover {
    background-color: #ca3922 !important
}

.bg-danger .text-muted {
    color: #fac6be
}

.bg-danger .text-darken {
    color: #ca3922
}

.bg-danger.light {
    background-color: #e36d5a !important
}

.bg-danger.lighter {
    background-color: #e67d6c !important
}

.bg-danger.dark {
    background-color: #db3f26 !important
}

.bg-alert {
    background-color: #967adc !important;
    color: #fff
}

.bg-alert.darker,
a.bg-alert:hover {
    background-color: #7652d1 !important
}

.bg-alert .text-muted {
    color: #f5f2fd
}

.bg-alert .text-darken {
    color: #7652d1
}

.bg-alert.light {
    background-color: #a992e2 !important
}

.bg-alert.lighter {
    background-color: #b6a2e7 !important
}

.bg-alert.dark {
    background-color: #8362d6 !important
}

.bg-system {
    background-color: #37bc9b !important;
    color: #cef1e8
}

.bg-system.darker,
a.bg-system:hover {
    background-color: #2b957a !important
}

.bg-system .text-muted {
    color: #9eeeda
}

.bg-system .text-darken {
    color: #2b957a
}

.bg-system.light {
    background-color: #48c9a9 !important
}

.bg-system.lighter {
    background-color: #58ceb1 !important
}

.bg-system.dark {
    background-color: #30a487 !important
}

.bg-dark {
    background-color: rgba(33, 88, 119, .64) !important;
    color: #f3effc
}

.bg-dark.darker,
a.bg-dark:hover {
    background-color: #252832 !important
}

.bg-dark .text-muted {
    color: #717eb2
}

.bg-dark .text-darken {
    color: #252832
}

.bg-dark.light {
    background-color: #484d61 !important
}

.bg-dark.lighter {
    background-color: #51566c !important
}

.bg-dark.dark {
    background-color: #2e313d !important
}

.bg-light {
    background-color: #fafafa;
    color: #666
}

a.bg-light:hover {
    background-color: #e8e8e8 !important
}

.bg-light .text-muted,
.bg-white .text-muted,
.text-muted {
    color: #999
}

.bg-light .text-darken,
.bg-white .text-darken {
    color: #222
}

.bg-light.light,
.bg-white.light {
    background-color: #fefefe
}

.bg-light.lighter,
.bg-white.lighter {
    background-color: #fff
}

.bg-light.dark,
.bg-white.dark {
    background-color: #f2f2f2
}

.bg-light.darker,
.bg-white.darker {
    background-color: #e7e7e7
}

.bg-white {
    color: #666;
    background-color: #fff !important
}

a.bg-white:hover {
    background-color: #ededed !important
}

.badge-default,
.label-default {
    background-color: #777
}

.badge-default[href]:focus,
.badge-default[href]:hover,
.label-default[href]:focus,
.label-default[href]:hover {
    background-color: #5e5e5e
}

.badge-primary,
.label-primary {
    background-color: #3498db
}

.badge-primary[href]:focus,
.badge-primary[href]:hover,
.label-primary[href]:focus,
.label-primary[href]:hover {
    background-color: #217dbb
}

.badge-success,
.label-success {
    background-color: #70ca63
}

.badge-success[href]:focus,
.badge-success[href]:hover,
.label-success[href]:focus,
.label-success[href]:hover {
    background-color: #4fbb3f
}

.badge-info,
.label-info {
    background-color: #3bafda
}

.badge-info[href]:focus,
.badge-info[href]:hover,
.label-info[href]:focus,
.label-info[href]:hover {
    background-color: #2494be
}

.badge-warning,
.label-warning {
    background-color: #f6bb42
}

.badge-warning[href]:focus,
.badge-warning[href]:hover,
.label-warning[href]:focus,
.label-warning[href]:hover {
    background-color: #f4a911
}

.badge-danger,
.label-danger {
    background-color: #df5640
}

.badge-danger[href]:focus,
.badge-danger[href]:hover,
.label-danger[href]:focus,
.label-danger[href]:hover {
    background-color: #ca3922
}

.badge-alert,
.label-alert {
    background-color: #967adc
}

.badge-alert[href]:focus,
.badge-alert[href]:hover,
.label-alert[href]:focus,
.label-alert[href]:hover {
    background-color: #7652d1
}

.badge-system,
.label-system {
    background-color: #37bc9b
}

.badge-system[href]:focus,
.badge-system[href]:hover,
.label-system[href]:focus,
.label-system[href]:hover {
    background-color: #2b957a
}

.badge-dark,
.label-dark {
    background-color: #3b3f4f
}

.badge-dark[href]:focus,
.badge-dark[href]:hover,
.label-dark[href]:focus,
.label-dark[href]:hover {
    background-color: #252832
}

.label-muted {
    background-color: #aaa
}

.label-muted[href]:focus,
.label-muted[href]:hover {
    background-color: #919191
}

a.text-white:hover {
    color: grey
}

.text-white-dark {
    color: #f6f6f6
}

.text-white-darker {
    color: #ececec
}

a.text-muted:hover {
    color: #191919
}

.text-muted-light {
    color: #a2a2a2
}

.text-muted-lighter {
    color: #acacac
}

.text-muted-dark {
    color: #909090
}

.text-muted-darker {
    color: #868686
}

.text-primary {
    color: #3498db
}

a.text-primary:hover {
    color: #02090e
}

.text-primary-light {
    color: #43a0de
}

.text-primary-lighter {
    color: #54a8e1
}

.text-primary-dark {
    color: #2690d7
}

.text-primary-darker {
    color: #2384c6
}

.text-success {
    color: #70ca63
}

a.text-success:hover {
    color: #0f220c
}

.text-success-light {
    color: #7ccf70
}

.text-success-lighter {
    color: #8ad480
}

.text-success-dark {
    color: #64c556
}

.text-success-darker {
    color: #56c046
}

.text-info {
    color: #3bafda
}

a.text-info:hover {
    color: #030e13
}

.text-info-light {
    color: #4ab5dd
}

.text-info-lighter {
    color: #5bbce0
}

.text-info-dark {
    color: #2ca9d7
}

.text-info-darker {
    color: #269dc9
}

.text-warning {
    color: #f6bb42
}

a.text-warning:hover {
    color: #362503
}

.text-warning-light {
    color: #f7c153
}

.text-warning-lighter {
    color: #f8c867
}

.text-warning-dark {
    color: #f5b531
}

.text-warning-darker {
    color: #f4ae1d
}

.text-danger {
    color: #df5640
}

a.text-danger:hover {
    color: #1b0805
}

.text-danger-light {
    color: #e2644f
}

.text-danger-lighter {
    color: #e47361
}

.text-danger-dark {
    color: #dc4831
}

.text-danger-darker {
    color: #d53c24
}

.text-alert {
    color: #967adc
}

a.text-alert:hover {
    color: #211245
}

.text-alert-light {
    color: #a188e0
}

.text-alert-lighter {
    color: #ae98e4
}

.text-alert-dark {
    color: #8b6cd8
}

.text-alert-darker {
    color: #7e5cd4
}

.text-system {
    color: #37bc9b
}

a.text-dark:hover,
a.text-system:hover {
    color: #000
}

.text-system-light {
    color: #3ec7a5
}

.text-system-lighter {
    color: #4ecbac
}

.text-system-dark {
    color: #33ae90
}

.text-system-darker {
    color: #2e9e83
}

.text-dark {
    color: #3b3f4f
}

.text-dark-light {
    color: #434759
}

.text-dark-lighter {
    color: #4b5065
}

.text-dark-dark {
    color: #333745
}

.text-dark-darker {
    color: #2b2e39
}

.text-tp {
    color: rgba(0, 0, 0, .2)
}

a.text-tp:hover {
    color: rgba(0, 0, 0, .3)
}


.twitter {
    background: #1da1f2;
    color: white;
}

.twitter:hover {
    background-color: #0eaad6;
}

.facebook {
    background-color: #1776f1;
    color: white;
}

.facebook:hover {
    background-color: #1463ca;
}

.googleplus {
    background: #dd4b39;
    color: #fff;
}

.googleplus:hover {
    background-color: #ce2616;
}

.pinterest {
    background: #cb2027;
}

.pinterest:hover {
    background: #aa1d22;
}

.linkedin {
    background: #007bb6;
    color: white;
}

.linkedin:hover {
    background: #005983;
}

.linkedin-light {
    background: #0090d5;
    color: white;
}

.youtube {
    background-color: #df1c31;
    color: #fff;
}

.youtube:hover {
    background-color: #b21627;
}

.rumble {
    background: #699c39;
    color: white;
}

.rumble:hover {
    background: #4b6e29;
    color: white;
}

.vimeo {
    background: #aad450;
    color: white;
}

.email {
    background-color: #0a88ff;
    color: white;
}

.email:hover {
    background-color: #006ed6;
}

.tumblr {
    background-color: #32506d;
    color: #fff;
}

.tumblr:hover {
    background-color: #22364a;
}


.pocket {
    background-color: #ed4054;
    color: #fff;
}

.pocket:hover {
    background-color: #e4162d;
}

.github {
    background-color: #444;
    color: #fff;
}


.delicious {
    background-color: #0b79e5;
    color: #fff;
}

.delicious:hover {
    background-color: #095fb4;
}

.vk {
    background-color: #4d71a9;
    color: #fff;
}

.vk:hover {
    background-color: #3d5a86;
}

.whatsapp a,
.whatsapp,
.wp {
    background-color: #25d366;
    color: #fff;
}

.whatsapp:hover,
.wp:hover {
    background-color: #199347;
}

.hackernews {
    background-color: #f60;
    color: #fff;
}

.hackernews:hover {
    background-color: #cc5200;
}

.twitter {
    background: #1da1f2;
    color: white;
}

.twitter:hover {
    background-color: #0eaad6;
}

.twitch {
    background: #6441A4;
    /* Colore di sfondo normale */
    color: white;
}

.twitch:hover {
    background: #52327E;
    /* Colore di sfondo all'hover */
}

/* Dark theme */
[data-theme="dark"] {
    --color-card-bg: rgba(255, 255, 255, 0.03);
    --color-border: rgba(255, 255, 255, 0.08);
}

/* Light theme */
[data-theme="light"] {
    --color-background: #f8fafc;
    --color-card-bg: #ffffff;
    --color-text: #1e293b;
    --color-text-secondary: #475569;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
}