/* =============================================
   REEKS CONSULTING ENGINEERS - Theme System
   Light: Slate/Anthracite  |  Dark: Graphite
   ============================================= */

:root {
    --color-primary: #475569;       /* slate-600 */
    --color-primary-hover: #334155; /* slate-700 */
    --color-accent: #64748b;        /* slate-500 */

    /* Light theme tokens */
    --bg-page: #ffffff;
    --bg-section: #f8fafc;          /* slate-50 */
    --bg-card: #ffffff;
    --bg-hero: #1e293b;             /* slate-800 */
    --bg-header: #ffffff;
    --bg-footer: #0f172a;           /* slate-900 */
    --bg-cta: #334155;              /* slate-700 */

    --text-primary: #0f172a;        /* slate-900 */
    --text-secondary: #475569;      /* slate-600 */
    --text-muted: #94a3b8;          /* slate-400 */
    --text-on-dark: #f1f5f9;        /* slate-100 */
    --text-on-dark-muted: #94a3b8;

    --border-color: #e2e8f0;        /* slate-200 */
    --shadow-color: rgba(0,0,0,0.06);

    --btn-primary-bg: #475569;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #334155;
}

/* Dark theme overrides */
html.dark {
    --color-primary: #94a3b8;       /* slate-400 - lighter for dark bg */
    --color-primary-hover: #cbd5e1; /* slate-300 */
    --color-accent: #94a3b8;

    --bg-page: #1a1a1a;
    --bg-section: #212121;
    --bg-card: #2a2a2a;
    --bg-hero: #111111;
    --bg-header: #1a1a1a;
    --bg-footer: #111111;
    --bg-cta: #2a2a2a;

    --text-primary: #e2e8f0;        /* slate-200 */
    --text-secondary: #94a3b8;      /* slate-400 */
    --text-muted: #64748b;          /* slate-500 */
    --text-on-dark: #e2e8f0;
    --text-on-dark-muted: #64748b;

    --border-color: #333333;
    --shadow-color: rgba(0,0,0,0.3);

    --btn-primary-bg: #475569;
    --btn-primary-text: #f1f5f9;
    --btn-primary-hover: #334155;
}

/* ── Base ── */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: background-color 0.2s, color 0.2s;
}

/* ── Header ── */
header {
    background-color: var(--bg-header) !important;
    border-color: var(--border-color) !important;
}
header a { color: var(--text-secondary) !important; }
header a:hover { color: var(--text-primary) !important; }
header a.active-nav { color: var(--color-primary) !important; }

/* ── Hero ── */
.hero-section { background-color: var(--bg-hero); }

/* ── Sections ── */
.section-light { background-color: var(--bg-page); }
.section-alt   { background-color: var(--bg-section); }
.section-dark  { background-color: var(--bg-cta); }

/* ── Cards ── */
.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 1px 3px var(--shadow-color);
}

/* ── Text helpers ── */
.text-body    { color: var(--text-primary); }
.text-sub     { color: var(--text-secondary); }
.text-muted   { color: var(--text-muted); }

/* ── Buttons ── */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.btn-primary:hover { background-color: var(--btn-primary-hover); }

.btn-outline {
    border: 2px solid var(--text-on-dark);
    color: var(--text-on-dark);
}
.btn-outline:hover {
    background-color: var(--text-on-dark);
    color: var(--bg-cta);
}

/* ── Footer ── */
footer {
    background-color: var(--bg-footer) !important;
}

/* ── Dark mode toggle button ── */
#theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-section);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
#theme-toggle:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* ── Dark mode specific overrides for Tailwind classes ── */
html.dark .bg-white        { background-color: var(--bg-card) !important; }
html.dark .bg-gray-50      { background-color: var(--bg-section) !important; }
html.dark .bg-gray-100     { background-color: #333333 !important; }
html.dark footer.bg-gray-900 { background-color: var(--bg-footer) !important; }
html.dark .border-gray-200 { border-color: var(--border-color) !important; }
html.dark .border-gray-800 { border-color: #2a2a2a !important; }
html.dark .text-gray-900   { color: var(--text-primary) !important; }
html.dark .text-gray-700   { color: var(--text-secondary) !important; }
html.dark .text-gray-600   { color: var(--text-secondary) !important; }
html.dark .text-gray-400   { color: var(--text-muted) !important; }
html.dark .shadow-sm       { box-shadow: 0 1px 3px var(--shadow-color) !important; }
html.dark .shadow-lg       { box-shadow: 0 4px 16px var(--shadow-color) !important; }

/* CTA / hero sections stay dark in both themes */
html.dark .bg-teal-700,
html.dark .bg-\[var\(--color-primary\)\] {
    background-color: #2a2a2a !important;
}
html.dark .bg-slate-700 { background-color: #252525 !important; }
html.dark .bg-cyan-800  { background-color: #1e2e2e !important; }
html.dark .bg-emerald-800 { background-color: #1e2a22 !important; }

/* Cookie banner dark */
html.dark #cookie-banner {
    background-color: #2a2a2a !important;
    border-color: #333 !important;
}
html.dark #cookie-modal > div > div {
    background-color: #2a2a2a !important;
}

/* Form inputs dark */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: var(--text-primary) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #666 !important; }

/* Details/summary FAQ dark */
html.dark details { background-color: var(--bg-card) !important; }

/* ── Cookie table dark mode fix ── */
html.dark table thead { background-color: #333333 !important; }
html.dark table thead th { color: #e2e8f0 !important; border-color: #444 !important; }
html.dark table tbody tr { background-color: #2a2a2a !important; }
html.dark table tbody tr.bg-gray-50 { background-color: #252525 !important; }
html.dark table tbody td { color: #94a3b8 !important; border-color: #333 !important; }
html.dark table { border-color: #444 !important; }

/* ── Company name / logo text in dark mode ── */
html.dark .text-gray-900 { color: #e2e8f0 !important; }
html.dark .text-\[var\(--color-secondary\)\] { color: #94a3b8 !important; }

/* Make SVG logo text readable on dark footer */
html.dark 

/* Projects page dark mode — cards, CTA section */
html.dark .project-card { background-color: #2a2a2a !important; border-color: #333 !important; }
html.dark .project-card .text-gray-900 { color: #e2e8f0 !important; }
html.dark .project-card .text-gray-600 { color: #94a3b8 !important; }
html.dark .project-card .bg-white { background-color: #2a2a2a !important; }
html.dark .project-card .card-overlay .bg-white { background-color: #f1f5f9 !important; }


/* In light mode: footer is dark bg-gray-900, so invert logo to white */

/* In dark mode: footer is also dark, keep inverted */
html.dark 

/* Contact button dark mode */
html.dark a[href="contact.html"].border.border-slate-400 {
    border-color: #64748b !important;
    color: #e2e8f0 !important;
}
html.dark a[href="contact.html"].border.border-slate-400:hover {
    background-color: #475569 !important;
    color: white !important;
}

/* ── Logo: never apply CSS filters — SVG has fixed colors ── */
img[src*="logo.svg"] {
    filter: none !important;
}

/* ── Hero sections: always show image regardless of theme ── */
.hero-bg-image {
    display: block !important;
    opacity: 1 !important;
}
html.dark .hero-overlay {
    background-color: rgba(0,0,0,0.65) !important;
}

/* ── New project cards with photos — dark mode ── */
html.dark .project-card { background-color: #1e2433 !important; border-color: #2d3748 !important; }
html.dark .project-card .text-gray-900 { color: #e2e8f0 !important; }
html.dark .project-card .text-gray-600 { color: #94a3b8 !important; }
html.dark .project-card .text-gray-400 { color: #64748b !important; }
html.dark .project-card span.text-xs { color: var(--color-primary) !important; }
html.dark #photo-modal { background: rgba(0,0,0,0.95) !important; }

/* ── Gallery dark mode ── */
html.dark .gallery-item img { opacity: 0.9; }
html.dark section:has(.gallery-item) { background-color: var(--bg-primary); }
html.dark section:has(.gallery-item) h2 { color: #e2e8f0 !important; }
html.dark section:has(.gallery-item) p { color: #94a3b8 !important; }

/* ── Gallery dark mode ── */
html.dark .gallery-item { border-color: #333; }
html.dark section.bg-gray-50 { background-color: #1a1a1a !important; }
html.dark section.bg-gray-50 h2 { color: #e2e8f0 !important; }
html.dark section.bg-gray-50 p { color: #94a3b8 !important; }

/* ── Hero bottom fade — adapts to light/dark ── */
.fade-to-below {
    background: linear-gradient(to top, #f9fafb, transparent); /* gray-50 light */
}
html.dark .fade-to-below {
    background: linear-gradient(to top, #1a1a1a, transparent); /* bg-page dark */
}
/* For heroes above bg-gray-50 sections */
.fade-to-section {
    background: linear-gradient(to top, #f8fafc, transparent);
}
html.dark .fade-to-section {
    background: linear-gradient(to top, #212121, transparent);
}

/* ── Carousel section — light/dark ── */
.carousel-section {
    background-color: #f1f5f9; /* slate-100 light */
}
.carousel-title { color: #1e293b; }
.carousel-btn   { color: #0d9488 !important; }

.carousel-fade-top    { background: linear-gradient(to bottom, #f1f5f9, transparent); }
.carousel-fade-bottom { background: linear-gradient(to top,    #f1f5f9, transparent); }
.carousel-fade-left   { background: linear-gradient(to right,  #f1f5f9, transparent); }
.carousel-fade-right  { background: linear-gradient(to left,   #f1f5f9, transparent); }

html.dark .carousel-section { background-color: #111111; }
html.dark .carousel-title   { color: #e2e8f0; }
html.dark .carousel-btn     { color: #2dd4bf !important; }

html.dark .carousel-fade-top    { background: linear-gradient(to bottom, #111111, transparent); }
html.dark .carousel-fade-bottom { background: linear-gradient(to top,    #111111, transparent); }
html.dark .carousel-fade-left   { background: linear-gradient(to right,  #111111, transparent); }
html.dark .carousel-fade-right  { background: linear-gradient(to left,   #111111, transparent); }

/* ── Gallery modal — lighter in light mode ── */
#gallery-modal {
    background-color: rgba(15, 23, 42, 0.97);
}
#gallery-modal .border-b {
    border-color: #334155;
}

/* ── Logo text — light/dark theme ── */
/* Light mode: dark navy text */
img[src*="logo.svg"] { filter: none !important; }

/* We use an inline SVG approach via object tag — but since it's <img>,
   we switch the src via JS instead */