/**
 * ITC Future-Proof Layer v1
 * Design tokens, accessibility, progressive enhancement — built to age well.
 */

@layer tokens, base, components, utilities;

/* ── Design tokens (extend :root from index.html) ── */
@layer tokens {
    :root {
        color-scheme: dark;

        /* OKLCH accent — perceptually uniform, wide-gamut ready */
        --accent-oklch: oklch(0.78 0.12 85);
        --accent-glow-oklch: oklch(0.78 0.12 85 / 0.25);

        /* Fluid typography scale */
        --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
        --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
        --text-base: clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);
        --text-lg: clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem);
        --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
        --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
        --text-3xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);

        /* Spacing rhythm */
        --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);
        --space-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

        /* Motion tokens */
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --duration-fast: 150ms;
        --duration-normal: 300ms;
        --duration-slow: 600ms;

        /* Focus ring */
        --focus-ring: 0 0 0 2px var(--bg, #000), 0 0 0 4px var(--accent, #d4af37);
    }

    @supports (color: oklch(0.5 0.1 85)) {
        :root {
            --accent: var(--accent-oklch);
            --accent-glow: var(--accent-glow-oklch);
        }
    }
}

/* ── Base accessibility & semantics ── */
@layer base {
    .skip-link {
        position: absolute;
        top: -9999px;
        left: -9999px;
        z-index: 100000;
        padding: 0.75rem 1.25rem;
        background: var(--accent, #d4af37);
        color: #000;
        font-weight: 800;
        font-size: var(--text-sm);
        text-decoration: none;
        border-radius: 0 0 8px 8px;
    }

    .skip-link:focus {
        top: 0;
        left: var(--space-gutter);
        outline: none;
        box-shadow: var(--focus-ring);
    }

    :focus-visible {
        outline: 2px solid var(--accent, #d4af37);
        outline-offset: 3px;
    }

    :focus:not(:focus-visible) {
        outline: none;
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    @media (prefers-contrast: more) {
        :root {
            --text-muted: #aaaaaa;
            --border: #333333;
        }

        .glass-card,
        .feature-card,
        .nav-link {
            border-width: 2px;
        }
    }

    @media (forced-colors: active) {
        .gradient-text {
            -webkit-text-fill-color: CanvasText;
            color: CanvasText;
            background: none;
        }

        .aurora-bg,
        .noise-overlay,
        #cursor-glow,
        #neural-canvas {
            display: none !important;
        }
    }
}

/* ── Motion-safe overrides ── */
@layer utilities {
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .aurora-blob {
            animation: none !important;
            opacity: 0.08 !important;
        }

        .tilt-card {
            transform: none !important;
        }

        #cursor-glow,
        #neural-canvas {
            display: none !important;
        }

        html:not(.i18n-ready) body {
            opacity: 1 !important;
        }

        .feature-card.stagger-in,
        .ai-brain-card.stagger-in,
        .income-card.stagger-in,
        .step-card.stagger-in,
        .glass-card.stagger-in {
            opacity: 1 !important;
            animation: none !important;
        }
    }

    /* Off-screen section deferral — faster initial paint */
    .cv-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 600px;
    }

    /* Container-query ready cards */
    @container (min-width: 480px) {
        .feature-card {
            padding: 2rem;
        }
    }

    .grid,
    .ai-brain-grid,
    .steps-flow {
        container-type: inline-size;
    }
}

/* ── View Transitions (language switch) — progressive ── */
@layer components {
    @supports (view-transition-name: root) {
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: 0.25s;
            animation-timing-function: var(--ease-out-expo);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none !important;
        }
    }
}

/* ── Fallback fix for Language Dropdown visibility ── */
@layer components {
    .lang-selector:hover .lang-dropdown,
    .lang-selector:focus-within .lang-dropdown {
        display: block !important;
        animation: dropdownFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
}