/**
 * APCA-Based Dark Mode
 * Accessible Perceptual Contrast Algorithm (APCA) compliant dark mode colors
 *
 * APCA Target: Lc 75+ for body text, Lc 90+ for headings
 * Reference: https://www.myndex.com/APCA/
 */

@media (prefers-color-scheme: dark) {
    /* Global FontAwesome icon fix for dark mode */
    .fas, .fab, .far, .fa, .fal, .fad, .fat, .fass,
    i.fas, i.fab, i.far, i.fa, i.fal, i.fad, i.fat, i.fass {
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
        font-weight: 900 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        display: inline-block !important;
        font-style: normal !important;
        font-variant: normal !important;
        text-rendering: auto !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
    }

    .fab, i.fab {
        font-weight: 400 !important;
    }

    /* Ensure all icon elements are visible */
    i[class^="fa-"],
    i[class*=" fa-"] {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
    }

    :root {
        /* Background Colors - APCA Optimized */
        --bg-primary: #0d1117;          /* Dark background */
        --bg-secondary: #161b22;        /* Slightly lighter background */
        --bg-tertiary: #21262d;         /* Card backgrounds */
        --bg-elevated: #2d333b;         /* Elevated surfaces */
        --bg-overlay: rgba(13, 17, 23, 0.9);

        /* Text Colors - APCA Lc 75+ on dark backgrounds */
        --text-primary: #e6edf3;        /* Main text - Lc 90.5 */
        --text-secondary: #c9d1d9;      /* Secondary text - Lc 80.3 */
        --text-muted: #8b949e;          /* Muted text - Lc 60.2 */
        --text-disabled: #6e7681;       /* Disabled text - Lc 48.7 */

        /* Primary Color - Adjusted for dark mode */
        --primary-color: #58d5ff;       /* Lighter cyan - Lc 85+ */
        --primary-hover: #79e0ff;       /* Even lighter on hover */
        --primary-active: #38c5ef;      /* Darker on active */

        /* Accent Colors - APCA Compliant */
        --accent-red: #ff7b7b;          /* Lighter red - Lc 75+ */
        --accent-turquoise: #5eddd4;    /* Lighter turquoise - Lc 85+ */
        --accent-green: #7ee787;        /* Success green - Lc 85+ */
        --accent-yellow: #f0c654;       /* Warning yellow - Lc 80+ */

        /* Border Colors */
        --border-default: #30363d;      /* Default borders */
        --border-muted: #21262d;        /* Subtle borders */
        --border-emphasis: #484f58;     /* Emphasized borders */

        /* Link Colors */
        --link-color: #58d5ff;          /* Same as primary */
        --link-hover: #79e0ff;
        --link-visited: #c297ff;        /* Lighter purple - Lc 75+ */

        /* Button Colors */
        --btn-primary-bg: #238bf5;      /* Blue button - Lc 90+ with white text */
        --btn-primary-hover: #3a9aff;
        --btn-secondary-bg: #21262d;
        --btn-secondary-border: #484f58;
        --btn-secondary-text: #e6edf3;

        /* Card & Surface Colors */
        --card-bg: #161b22;
        --card-border: #30363d;
        --card-shadow: rgba(0, 0, 0, 0.4);

        /* Form Elements */
        --input-bg: #0d1117;
        --input-border: #30363d;
        --input-focus-border: #58d5ff;
        --input-text: #e6edf3;
        --input-placeholder: #6e7681;

        /* Status Colors */
        --color-success: #7ee787;       /* Lc 85+ */
        --color-error: #ff7b7b;         /* Lc 75+ */
        --color-warning: #f0c654;       /* Lc 80+ */
        --color-info: #58d5ff;          /* Lc 85+ */

        /* Shadow adjustments for dark mode */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
    }

    /* Body */
    body {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }

    /* Headers & Navigation */
    .header {
        background-color: var(--bg-secondary);
        border-bottom: 1px solid var(--border-default);
    }

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

    .nav__link:hover,
    .nav__link.active {
        color: var(--primary-color);
    }

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

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

    /* Sections */
    .section {
        background-color: var(--bg-primary);
    }

    .section:nth-child(even) {
        background-color: var(--bg-secondary);
    }

    /* Typography */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-primary);
    }

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

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

    /* Cards */
    .service__card,
    .feature__card,
    .portfolio__card {
        background-color: var(--bg-tertiary);
        border: 1px solid var(--border-default);
        box-shadow: var(--shadow-md);
    }

    .service__card:hover,
    .feature__card:hover,
    .portfolio__card:hover {
        border-color: var(--border-emphasis);
        box-shadow: var(--shadow-lg);
    }

    .service__title,
    .feature__title {
        color: var(--text-primary);
    }

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

    /* Portfolio Section */
    .portfolio__overlay h4 {
        color: var(--text-primary) !important;
    }

    .portfolio__overlay p {
        color: var(--text-primary) !important;
    }

    .portfolio__role {
        color: var(--text-primary) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* Buttons */
    .button--primary,
    .btn--primary {
        background-color: var(--btn-primary-bg);
        color: var(--white);
        border: none;
    }

    .button--primary:hover,
    .btn--primary:hover {
        background-color: var(--btn-primary-hover);
    }

    .button--secondary,
    .btn--secondary {
        background-color: var(--btn-secondary-bg);
        color: var(--btn-secondary-text);
        border: 2px solid var(--btn-secondary-border);
    }

    .button--secondary:hover,
    .btn--secondary:hover {
        background-color: var(--bg-elevated);
        border-color: var(--primary-color);
    }

    /* Forms */
    .form__input,
    .form__select,
    .form__textarea {
        background-color: var(--input-bg);
        border: 2px solid var(--input-border);
        color: var(--input-text);
    }

    .form__input::placeholder,
    .form__textarea::placeholder {
        color: var(--input-placeholder);
    }

    .form__input:focus,
    .form__select:focus,
    .form__textarea:focus {
        border-color: var(--input-focus-border);
        box-shadow: 0 0 0 3px rgba(88, 213, 255, 0.2);
    }

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

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

    /* Links */
    a {
        color: var(--link-color);
    }

    a:hover {
        color: var(--link-hover);
    }

    a:visited {
        color: var(--link-visited);
    }

    /* Stats */
    .stat__number {
        color: var(--primary-color);
    }

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

    /* Hero Section */
    .hero {
        background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    }

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

    .hero__title-main,
    .hero__title-sub {
        color: var(--text-primary) !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: var(--text-primary) !important;
        background-clip: unset !important;
    }

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

    /* Technology/EmotiAI Section */
    .technology,
    .memory-layer {
        background: var(--bg-secondary);
    }

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

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

    /* EmotiAI Features */
    .emotiai__features .feature h4 {
        color: var(--text-primary) !important;
    }

    .emotiai__features .feature p {
        color: var(--text-primary) !important;
    }

    /* OCC Model Categories */
    .occ-category {
        background: var(--bg-tertiary) !important;
        border: 1px solid var(--border-default) !important;
    }

    .occ-category h4 {
        color: var(--primary-color) !important;
    }

    .occ-category li {
        color: var(--text-primary) !important;
    }

    .occ-category strong {
        color: var(--primary-color) !important;
    }

    /* Metaverse Features */
    .metaverse-feature {
        background: var(--bg-tertiary) !important;
        box-shadow: var(--shadow-md) !important;
    }

    .metaverse-feature h4 {
        color: var(--primary-color) !important;
    }

    .metaverse-feature p {
        color: var(--text-primary) !important;
    }

    /* Use Cases */
    .use-case {
        background: var(--bg-tertiary) !important;
        border: 1px solid var(--border-default) !important;
    }

    .use-case h5 {
        color: var(--primary-color) !important;
    }

    .use-case p {
        color: var(--text-primary) !important;
    }

    /* EmotiAI Demo Canvas */
    #slime-canvas {
        background: var(--bg-tertiary) !important;
    }

    .demo-canvas-wrapper {
        background: transparent !important;
    }

    .interaction-hint {
        color: var(--text-secondary) !important;
    }

    /* Footer */
    .footer {
        background-color: var(--bg-secondary);
        border-top: 1px solid var(--border-default);
        color: var(--text-secondary);
    }

    .footer__tagline,
    .footer__brand p {
        color: var(--text-primary) !important;
    }

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

    .footer__link:hover {
        color: var(--primary-color);
    }

    /* Icons */
    .service__icon,
    .feature__icon {
        background: linear-gradient(135deg, var(--primary-color), var(--accent-turquoise)) !important;
        color: var(--white) !important;
    }

    .service__card--featured .service__icon {
        background: var(--bg-elevated) !important;
        color: var(--primary-color) !important;
    }

    /* FontAwesome icons - ensure visibility in dark mode */
    .fas, .fab, .far, .fa {
        color: inherit;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
        font-weight: 900;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .fab {
        font-weight: 400;
    }

    /* Ensure icon containers don't hide content */
    .service__icon i,
    .feature__icon i {
        color: var(--white) !important;
        font-size: 1.5rem !important;
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature icon containers */
    .feature-icon {
        background: linear-gradient(135deg, var(--primary-color), var(--accent-turquoise));
        color: var(--white);
    }

    .feature-icon i {
        color: var(--white);
    }

    /* Service features list icons */
    .service__features li i {
        color: var(--primary-color) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Contact topics list icons */
    .contact__topics-list li i {
        color: var(--primary-color) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* About section icons */
    .about__values ul li i,
    .company__details .detail i {
        color: var(--primary-color) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Navigation icons */
    .nav__link i,
    .nav__toggle i,
    .nav__close i,
    .language-switcher-btn i {
        color: inherit;
    }

    /* Button icons */
    .button i,
    .btn i {
        color: inherit;
    }

    /* OCC category icons */
    .occ-category h4 i {
        color: var(--primary-color) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Benefit item icons */
    .benefit-item i {
        color: var(--primary-color) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* All other icons default visibility */
    i[class*="fa-"] {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Badges */
    .service__badge {
        background-color: var(--accent-red);
        color: var(--white);
    }

    /* Special Elements */
    .hero__orb {
        background: radial-gradient(circle, rgba(88, 213, 255, 0.3) 0%, transparent 70%);
    }

    .orb__glow {
        box-shadow: 0 0 60px rgba(88, 213, 255, 0.4);
    }

    /* Code blocks (if any) */
    code,
    pre {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        border: 1px solid var(--border-default);
    }

    /* Tables */
    table {
        border-color: var(--border-default);
    }

    th {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
    }

    td {
        border-color: var(--border-muted);
        color: var(--text-secondary);
    }

    /* Scrollbar (Webkit browsers) */
    ::-webkit-scrollbar {
        width: 12px;
        background-color: var(--bg-primary);
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--bg-elevated);
        border-radius: 6px;
        border: 2px solid var(--bg-primary);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--border-emphasis);
    }

    /* Selection */
    ::selection {
        background-color: var(--primary-color);
        color: var(--bg-primary);
    }

    /* Focus visible (accessibility) */
    :focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    /* About Section */
    .about__info h3 {
        color: var(--text-primary) !important;
    }

    .about__values h4,
    .about__timeline h4 {
        color: var(--text-primary) !important;
    }

    .about__values ul li,
    .about__values ul li span {
        color: var(--text-primary) !important;
    }

    .timeline__year {
        color: var(--primary-color) !important;
    }

    .timeline__item p {
        color: var(--text-primary) !important;
    }

    .timeline__item--highlight p {
        color: var(--text-primary) !important;
    }

    /* About section text */
    .about__content p,
    .about__description,
    .about__details span {
        color: var(--text-primary) !important;
    }

    /* Contact Section */
    .contact__info h3 {
        color: var(--text-primary) !important;
    }

    .contact__topics-list li,
    .contact__topics-list li span {
        color: var(--text-primary) !important;
    }

    /* High contrast improvements */
    @media (prefers-contrast: high) {
        :root {
            --text-primary: #ffffff;
            --text-secondary: #e6edf3;
            --border-default: #484f58;
            --primary-color: #79e0ff;
        }
    }
}