/* =====================================================
   ObfuscatorJS Framework v3.2
   dark.css
   Dark Theme System
   Production Version

   Compatible with:
   - variables.css
   - button.css
   - card.css
   - components.css
   - forms.css
   - tool pages
   - category pages
   - blog/content pages

   Goals:
   - Clean dark UI
   - Variable-driven colors
   - No unnecessary hard-coded brand colors
   - Accessibility friendly
   - Existing framework compatibility
   - No HTML/SEO dependency
===================================================== */


/* =====================================================
   DARK THEME VARIABLES
===================================================== */

html.dark {

    color-scheme: dark;


    /* ==========================================
       BACKGROUND
    ========================================== */

    --bg: #0b1120;

    --surface: #111827;

    --surface-2: #1f2937;


    /* ==========================================
       TEXT
    ========================================== */

    --text: #f8fafc;

    --text-light: #cbd5e1;

    --text-muted: #94a3b8;

    --white: #ffffff;


    /* ==========================================
       BORDER
    ========================================== */

    --border: #263244;

    --border-dark: #3b475a;


    /* ==========================================
       ADS
    ========================================== */

    --ad-bg: #111827;


    /* ==========================================
       SHADOW
    ========================================== */

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, .22);

    --shadow-md:
        0 6px 20px rgba(0, 0, 0, .28);

    --shadow-lg:
        0 10px 40px rgba(0, 0, 0, .34);

    --shadow-xl:
        0 20px 60px rgba(0, 0, 0, .42);


    /* ==========================================
       COMPATIBILITY VARIABLES
    ========================================== */

    --primary-color: var(--primary);

    --primary-hover: var(--primary-dark);

    --primary-light-color: var(--primary-light);

    --secondary-color: var(--surface-2);

    --success-color: var(--success);

    --warning-color: var(--warning);

    --danger-color: var(--danger);

    --info-color: var(--info);

    --text-color: var(--text);

    --text-light-color: var(--text-light);

    --text-muted-color: var(--text-muted);

    --background-color: var(--bg);

    --surface-color: var(--surface);

    --surface-color-2: var(--surface-2);

    --surface-secondary: var(--surface-2);

    --border-color: var(--border);

    --border-dark-color: var(--border-dark);

}


/* =====================================================
   BODY
===================================================== */

html.dark body {

    background-color: var(--background-color);

    color: var(--text-color);

}


/* =====================================================
   HEADINGS
===================================================== */

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {

    color: var(--text-color);

}


/* =====================================================
   TEXT
===================================================== */

html.dark p,
html.dark li {

    color: var(--text-light);

}


/* =====================================================
   LINKS
===================================================== */

html.dark a {

    color: var(--primary-light-color);

}

html.dark a:hover {

    color: var(--primary-color);

}


/* =====================================================
   HEADER
===================================================== */

html.dark .site-header {

    background: var(--surface-color);

    border-color: var(--border-color);

    box-shadow: var(--shadow-sm);

}


html.dark .logo-title {

    color: var(--text-color);

}


html.dark .logo-tagline {

    color: var(--text-light);

}


html.dark .nav-menu a {

    color: var(--text-color);

}


html.dark .nav-menu a:hover,
html.dark .nav-menu a.active {

    color: var(--primary-light-color);

}


html.dark .icon-button {

    color: var(--text-color);

}


html.dark .icon-button:hover {

    background: var(--surface-color-2);

    color: var(--primary-light-color);

}


/* =====================================================
   CARDS
===================================================== */

html.dark .card,
html.dark .tool-card {

    background: var(--surface-color);

    border-color: var(--border-color);

    color: var(--text-color);

}


html.dark .card-header {

    background: var(--surface-color);

    border-color: var(--border-color);

}


html.dark .card-footer {

    background: var(--surface-color-2);

    border-color: var(--border-color);

}


html.dark .tool-card-title,
html.dark .tool-card__title {

    color: var(--text-color);

}


html.dark .tool-card-description,
html.dark .tool-card__description {

    color: var(--text-light);

}


/* =====================================================
   TOOL CARD ICON
===================================================== */

html.dark .tool-card__icon {

    background: color-mix(
        in srgb,
        var(--primary-color) 15%,
        var(--surface-color)
    );

    color: var(--primary-light-color);

}


html.dark .tool-card:hover .tool-card__icon {

    background: var(--primary-color);

    color: var(--white);

}


/* =====================================================
   TOOL CARD CATEGORY
===================================================== */

html.dark .tool-card__category {

    background: color-mix(
        in srgb,
        var(--primary-color) 14%,
        var(--surface-color)
    );

    color: var(--primary-light-color);

}


/* =====================================================
   FEATURE CARD
===================================================== */

html.dark .feature-card {

    background: var(--surface-color);

}


html.dark .feature-card h3 {

    color: var(--text-color);

}


html.dark .feature-card p {

    color: var(--text-light);

}


html.dark .feature-card .material-icons,
html.dark .feature-card .material-symbols-outlined {

    color: var(--primary-light-color);

}


/* =====================================================
   CATEGORY CARD
===================================================== */

html.dark .category-card {

    background: var(--surface-color);

    border-color: var(--border-color);

}


html.dark .category-card h3 {

    color: var(--text-color);

}


html.dark .category-card p {

    color: var(--text-light);

}


html.dark .category-card .material-icons,
html.dark .category-card .material-symbols-outlined {

    background: color-mix(
        in srgb,
        var(--primary-color) 15%,
        var(--surface-color)
    );

    color: var(--primary-light-color);

}


html.dark .category-card:hover
.material-icons,
html.dark .category-card:hover
.material-symbols-outlined {

    background: var(--primary-color);

    color: var(--white);

}


/* =====================================================
   BLOG CARD
===================================================== */

html.dark .blog-card h3 {

    color: var(--text-color);

}


html.dark .blog-card p {

    color: var(--text-light);

}


/* =====================================================
   BADGES
===================================================== */

html.dark .card-badge,
html.dark .badge-light {

    background: color-mix(
        in srgb,
        var(--primary-color) 15%,
        var(--surface-color)
    );

    color: var(--primary-light-color);

}


html.dark .badge-primary {

    background: var(--primary-color);

    color: var(--white);

}


/* =====================================================
   FORMS
===================================================== */

html.dark input,
html.dark textarea,
html.dark select,
html.dark .form-input,
html.dark .form-textarea,
html.dark .form-select {

    background: var(--bg);

    color: var(--text-color);

    border-color: var(--border-color);

}


html.dark input::placeholder,
html.dark textarea::placeholder {

    color: var(--text-muted-color);

}


html.dark input:hover,
html.dark textarea:hover,
html.dark select:hover {

    border-color: var(--border-dark-color);

}


html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {

    border-color: var(--primary-color);

    box-shadow:
        0 0 0 var(--focus-width)
        color-mix(
            in srgb,
            var(--primary-color) 22%,
            transparent
        );

}


html.dark input[readonly],
html.dark textarea[readonly] {

    background: var(--surface-color-2);

}


html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {

    background: var(--surface-color-2);

    color: var(--text-muted-color);

}


/* =====================================================
   FIELDSET
===================================================== */

html.dark fieldset {

    border-color: var(--border-color);

}


html.dark legend {

    color: var(--text-color);

}


/* =====================================================
   BUTTONS
===================================================== */

html.dark .btn-secondary {

    background: var(--surface-color-2);

    color: var(--text-color);

    border-color: var(--border-color);

}


html.dark .btn-secondary:hover {

    background: var(--border-dark-color);

    border-color: var(--border-dark-color);

}


html.dark .btn-outline {

    background: transparent;

    border-color: var(--border-dark-color);

    color: var(--text-color);

}


html.dark .btn-outline:hover {

    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

}


/* =====================================================
   TOOL PAGE
===================================================== */

html.dark .tool-header h1 {

    color: var(--text-color);

}


html.dark .tool-header p {

    color: var(--text-light);

}


html.dark .breadcrumb span {

    color: var(--text-light);

}


html.dark .tool-wrapper textarea {

    background: var(--bg);

    color: var(--text-color);

    border-color: var(--border-color);

}


html.dark .tool-wrapper textarea::placeholder {

    color: var(--text-muted-color);

}


html.dark .tool-result {

    background: var(--bg);

    color: var(--text-color);

    border-color: var(--border-color);

}


/* =====================================================
   TOOL STATISTICS
===================================================== */

html.dark .tool-stat-card {

    background: var(--surface-color);

    border-color: var(--border-color);

}


html.dark .tool-stat-card h3 {

    color: var(--primary-light-color);

}


html.dark .tool-stat-card p {

    color: var(--text-light);

}


/* =====================================================
   FAQ
===================================================== */

html.dark .faq-item {

    background: var(--surface-color);

    border-color: var(--border-color);

}


html.dark .faq-item h3 {

    color: var(--text-color);

}


html.dark .faq-item p {

    color: var(--text-light);

}


/* =====================================================
   CONTENT
===================================================== */

html.dark .content h2,
html.dark .content h3 {

    color: var(--text-color);

}


html.dark .content p,
html.dark .content li {

    color: var(--text-light);

}


html.dark .content a {

    color: var(--primary-light-color);

}


html.dark .content a:hover {

    color: var(--primary-color);

}


/* =====================================================
   TABLE
===================================================== */

html.dark table {

    background: var(--surface-color);

    color: var(--text-color);

}


html.dark th {

    background: var(--surface-color-2);

    color: var(--text-color);

}


html.dark td,
html.dark th {

    border-color: var(--border-color);

}


html.dark tr:nth-child(even) {

    background: color-mix(
        in srgb,
        var(--surface-color-2) 45%,
        transparent
    );

}


/* =====================================================
   CODE
===================================================== */

html.dark code {

    background: var(--surface-color-2);

    color: var(--primary-light-color);

}


html.dark pre {

    background: #070b14;

    color: #e2e8f0;

    border-color: var(--border-color);

}


/* =====================================================
   BLOCKQUOTE
===================================================== */

html.dark blockquote {

    border-left: 4px solid var(--border-dark-color);

    color: var(--text-light);

}


/* =====================================================
   HORIZONTAL RULE
===================================================== */

html.dark hr {

    border-color: var(--border-color);

}


/* =====================================================
   SELECTION
===================================================== */

html.dark ::selection {

    background: var(--primary-color);

    color: var(--white);

}


/* =====================================================
   SCROLLBAR
===================================================== */

html.dark ::-webkit-scrollbar {

    width: 10px;

}


html.dark ::-webkit-scrollbar-track {

    background: var(--bg);

}


html.dark ::-webkit-scrollbar-thumb {

    background: var(--border-dark-color);

    border-radius: var(--radius-round);

}


html.dark ::-webkit-scrollbar-thumb:hover {

    background: var(--primary-color);

}


/* =====================================================
   FOOTER
===================================================== */

html.dark .site-footer {

    background: var(--surface-color);

    border-color: var(--border-color);

}


html.dark .footer-title {

    color: var(--text-color);

}


html.dark .footer-description {

    color: var(--text-light);

}


html.dark .footer-links a {

    color: var(--text-light);

}


html.dark .footer-links a:hover {

    color: var(--primary-light-color);

}


html.dark .footer-bottom {

    border-color: var(--border-color);

}


html.dark .footer-bottom p {

    color: var(--text-light);

}


/* =====================================================
   TOAST
===================================================== */

html.dark .toast {

    background: var(--surface-color);

    color: var(--text-color);

    border-color: var(--border-color);

}


/* =====================================================
   MODAL
===================================================== */

html.dark .modal-content {

    background: var(--surface-color);

    border-color: var(--border-color);

}


html.dark .modal-header,
html.dark .modal-footer {

    border-color: var(--border-color);

}


html.dark .modal-title {

    color: var(--text-color);

}


html.dark .modal-close {

    color: var(--text-color);

}


html.dark .modal-close:hover {

    background: var(--surface-color-2);

    color: var(--primary-light-color);

}


/* =====================================================
   ALERTS
===================================================== */

html.dark .alert-success {

    background: color-mix(
        in srgb,
        var(--success-color) 12%,
        var(--surface-color)
    );

    color: #86efac;

}


html.dark .alert-warning {

    background: color-mix(
        in srgb,
        var(--warning-color) 12%,
        var(--surface-color)
    );

    color: #fcd34d;

}


html.dark .alert-danger {

    background: color-mix(
        in srgb,
        var(--danger-color) 12%,
        var(--surface-color)
    );

    color: #fca5a5;

}


html.dark .alert-info {

    background: color-mix(
        in srgb,
        var(--info-color) 12%,
        var(--surface-color)
    );

    color: #7dd3fc;

}


/* =====================================================
   SPINNER
===================================================== */

html.dark .spinner {

    border-color: var(--surface-color-2);

    border-top-color: var(--primary-color);

}


/* =====================================================
   PROGRESS
===================================================== */

html.dark .progress {

    background: var(--surface-color-2);

}


html.dark .progress-bar {

    background: var(--primary-color);

}


/* =====================================================
   SKELETON
===================================================== */

html.dark .skeleton {

    background: var(--surface-color-2);

}


html.dark .skeleton::before {

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .07),
        transparent
    );

}


/* =====================================================
   EMPTY STATE
===================================================== */

html.dark .empty-state {

    color: var(--text-light);

}


html.dark .empty-state-icon {

    color: var(--text-muted-color);

}


html.dark .empty-state-title {

    color: var(--text-color);

}


html.dark .empty-state-description {

    color: var(--text-light);

}


/* =====================================================
   TOOLTIP
===================================================== */

html.dark .tooltip::after {

    background: #020617;

    color: var(--white);

}


/* =====================================================
   DARK MODE MOBILE
===================================================== */

@media (max-width: 768px) {

    html.dark .site-header {

        box-shadow: var(--shadow-sm);

    }


    html.dark .modal-content {

        border-color: var(--border-color);

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html.dark *,
    html.dark *::before,
    html.dark *::after {

        transition: none !important;

        animation: none !important;

        scroll-behavior: auto !important;

    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    html.dark {

        color-scheme: light;

    }

}


/* =====================================================
   END OF DARK.CSS v3.2
===================================================== */