/* =============================================================
   dark-mode.css — Theme overrides for dark and light modes
   =============================================================
   
   TABLE OF CONTENTS:
   1. Dark Mode: Pricing
   2. Dark Mode: Inverted Sections
   3. Light Mode: Global Variables (TODO: Customization)
   4. Light Mode: Body & Chrome
   5. Light Mode: Pricing
   6. Global Theme Transitions
   7. Light Mode: Project Cards
   ============================================================= */

/* -------------------------------------------------------------
   1. Dark mode: Pricing section
   ------------------------------------------------------------- */

[data-theme="dark"] .pricing {
    background-color: #111113 !important;
    color: var(--paper) !important;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .pricing .bg-white {
    background-color: #1a1a1d !important;
    border-color: #2a2a2e !important;
    color: var(--paper) !important;
}

[data-theme="dark"] .pricing .text-\[\#555\],
[data-theme="dark"] .pricing .text-\[\#888\],
[data-theme="dark"] .pricing .text-\[\#666\] {
    color: #9a9a9a !important;
}

[data-theme="dark"] .pricing h2,
[data-theme="dark"] .pricing h3 {
    color: var(--paper) !important;
}

[data-theme="dark"] .pricing span.border {
    border-color: rgba(197, 160, 89, 0.3) !important;
    color: var(--accent) !important;
}

[data-theme="dark"] .pricing .text-bg {
    color: var(--paper) !important;
}

[data-theme="dark"] .pricing .border-b.border-\[\#eee\] {
    border-color: #2a2a2e !important;
}

[data-theme="dark"] .pricing p.text-\[\#555\] {
    color: #9a9a9a !important;
}

/* -------------------------------------------------------------
   2. Dark mode: Inverted (light-background) sections
   ------------------------------------------------------------- */

[data-theme="dark"] .inverted-section {
    background-color: var(--dark-grey) !important;
    color: var(--paper) !important;
    border-color: var(--mid-grey) !important;
}

[data-theme="dark"] .inverted-section .text-bg {
    color: var(--paper) !important;
}

[data-theme="dark"] .inverted-section .bg-\[\#dcd9d1\] {
    background-color: var(--mid-grey) !important;
}

[data-theme="dark"] .inverted-section.border-\[\#dcd9d1\] {
    border-color: var(--mid-grey) !important;
}

[data-theme="dark"] .inverted-section .border-bg {
    border-color: var(--accent) !important;
}

[data-theme="dark"] .inverted-section .text-\[\#555\] {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .inverted-section .ed-title {
    color: var(--paper) !important;
}

/* -------------------------------------------------------------
   3. Light mode: CSS variable overrides
   ------------------------------------------------------------- */

:root[data-theme="light"] {
    /* TODO: Customization Point - Update these variables to match your brand */
    --bg: #f4f1eb; /* Main Light Background */
    --paper: #1a1a1c; /* Main Dark Text color */
    --accent: #9a7038; /* Primary Brand Accent (default: bronze/gold) */
    --tech: #cc0000; /* Secondary alert/tech color (default: red) */

    --dark-grey: #e8e5dd;
    --mid-grey: #c2beb3;
    --text-muted: #4a4a4f;
    --inverted-bg: #0d0d0f; /* Inverted background color */
}

/* -------------------------------------------------------------
   4. Light mode: Body and chrome
   ------------------------------------------------------------- */

[data-theme="light"] body {
    background-color: var(--bg) !important;
    color: var(--paper) !important;
}

[data-theme="light"] header,
[data-theme="light"] aside {
    background-color: var(--bg) !important;
}

/* -------------------------------------------------------------
   5. Light mode: Pricing section (inverted in light mode)
   ------------------------------------------------------------- */

[data-theme="light"] .pricing {
    background-color: #1d1d1f !important;
    color: #e8e6e1 !important;
}

[data-theme="light"] .pricing .bg-white {
    background-color: #2a2a2e !important;
    border-color: #3a3a3e !important;
    color: #e8e6e1 !important;
}

[data-theme="light"] .pricing .bg-bg {
    background-color: #141416 !important;
    color: #e8e6e1 !important;
}

[data-theme="light"] .pricing h2,
[data-theme="light"] .pricing h3,
[data-theme="light"] .pricing .font-sans,
[data-theme="light"] .pricing .font-serif,
[data-theme="light"] .pricing .font-mono,
[data-theme="light"] .pricing p,
[data-theme="light"] .pricing li,
[data-theme="light"] .pricing span,
[data-theme="light"] .pricing div {
    color: #e8e6e1 !important;
}

[data-theme="light"] .pricing .opacity-50,
[data-theme="light"] .pricing .text-\[\#555\],
[data-theme="light"] .pricing .text-\[\#888\],
[data-theme="light"] .pricing .text-\[\#666\] {
    color: #9a9090 !important;
}

[data-theme="light"] .pricing .text-accent {
    color: var(--accent) !important;
}

[data-theme="light"] .pricing .border.rounded-full {
    border-color: rgba(197, 160, 89, 0.4) !important;
    color: #c5a059 !important;
}

[data-theme="light"] .pricing .border-b {
    border-color: #3a3a3e !important;
}

[data-theme="light"] .pricing ul li div {
    background-color: #c5a059 !important;
}

/* -------------------------------------------------------------
   6. Global theme transition — smooth colour changes on toggle
   ------------------------------------------------------------- */

body,
body *,
body::before,
body::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 250ms;
    transition-timing-function: ease;
}

/* Exclude animated elements from the theme transition */
.cursor-dot,
.cursor-outline,
[class*="animate-"],
.rate-card,
.playhead {
    transition: none;
}

/* -------------------------------------------------------------
   7. Light mode: Portfolio project cards
   ------------------------------------------------------------- */

[data-theme="light"] .project-card {
    background-color: var(--paper) !important;
    border-color: #333 !important;
    color: var(--bg) !important;
}

[data-theme="light"] .project-card h2 {
    color: var(--bg) !important;
}

[data-theme="light"] .project-card .text-text-muted {
    color: #e8e5dd !important;
}

[data-theme="light"] .project-card .border-mid-grey {
    border-color: #333 !important;
}

[data-theme="light"] .project-card .absolute.inset-0 {
    background: linear-gradient(
        to top,
        var(--paper) 0%,
        transparent 90%
    ) !important;
}

[data-theme="light"] .project-card .bg-\[\#1a1a1c\]\/90 {
    background-color: #1a1a1c !important;
    color: var(--accent) !important;
}