/* =====================================================
   FreeITTools Framework v2.3
   dark.css
   Dark Theme System
   Final Production Version
===================================================== */


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

html.dark {

    color-scheme: dark;


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

    --bg: #0f172a;

    --surface: #1e293b;

    --surface-2: #334155;


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

    --text: #f8fafc;

    --text-light: #cbd5e1;

    --text-muted: #94a3b8;

    --white: #ffffff;


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

    --border: #334155;

    --border-dark: #475569;


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

    --ad-bg: #1e293b;


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

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

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

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

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


    /* ==========================================
       COMPATIBILITY VARIABLES
       Keep existing framework aliases working
    ========================================== */

    --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: #93c5fd;

}

html.dark a:hover {

    color: #bfdbfe;

}


/* =====================================================
   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: #93c5fd;

}

html.dark .icon-button {

    color: var(--text-color);

}

html.dark .icon-button:hover {

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

    color: #93c5fd;

}


/* =====================================================
   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 {

    color: var(--text-color);

}

html.dark .tool-card-description {

    color: var(--text-light);

}


/* =====================================================
   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);

}


/* =====================================================
   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);

}


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

html.dark .blog-card h3 {

    color: var(--text-color);

}

html.dark .blog-card p {

    color: var(--text-light);

}


/* =====================================================
   BADGE
===================================================== */

html.dark .card-badge {

    background: rgba(37, 99, 235, .18);

    color: #bfdbfe;

}


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

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

    background: #0f172a;

    color: var(--text-color);

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

}

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

    color: var(--text-muted);

}

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

    border-color: #64748b;

}

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

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(37, 99, 235, .20);

}

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);

}


/* =====================================================
   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: #475569;

}

html.dark .btn-outline {

    background: transparent;

    border-color: #64748b;

    color: var(--text-color);

}

html.dark .btn-outline:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: #ffffff;

}


/* =====================================================
   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: #0f172a;

    color: var(--text-color);

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

}

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

    color: var(--text-muted);

}

html.dark .tool-result {

    background: #0f172a;

    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: #60a5fa;

}

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: #93c5fd;

}

html.dark .content a:hover {

    color: #bfdbfe;

}


/* =====================================================
   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: rgba(51, 65, 85, .35);

}


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

html.dark code {

    background: var(--surface-color);

    color: #bfdbfe;

}

html.dark pre {

    background: #020617;

    color: #e2e8f0;

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

}


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

html.dark blockquote {

    border-left: 4px solid #475569;

    color: var(--text-light);

}


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

html.dark hr {

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

}


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

html.dark ::selection {

    background: #2563eb;

    color: #ffffff;

}


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

html.dark ::-webkit-scrollbar {

    width: 10px;

}

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

    background: #0f172a;

}

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

    background: #475569;

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

}

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

    background: #64748b;

}


/* =====================================================
   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: #93c5fd;

}

html.dark .footer-bottom {

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

}

html.dark .footer-bottom p {

    color: var(--text-light);

}


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

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

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

        transition: none !important;

        animation: none !important;

    }

}


/* =====================================================
   End of dark.css
===================================================== */