/* Tailwind CSS handled via CDN in ViteManifest.php */

/* =========================================================
   PharmaNony — CSS Architecture
   Modern CSS features: @layer, dark mode via @theme,
   interpolate-size, field-sizing, container queries
   ========================================================= */

/* ------------------------------------------------------------
   Tailwind v4 Dark Mode Configuration
   Uses data-theme attribute for explicit user selection
   Falls back to prefers-color-scheme for auto mode
   ------------------------------------------------------------ */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* ------------------------------------------------------------
   Design Tokens
   Standard CSS variables for Play CDN compatibility.
   These are synchronized with tailwind.config in ViteManifest.php.
   ------------------------------------------------------------ */
:root {
    /* Primary — Deep Sage (Accessible AA: 4.68:1) */
    --color-primary: #4A6549;
    --color-primary-container: #D4E6D5;
    --color-on-primary: #FFFFFF;
    --color-on-primary-container: #1A2E1B;

    /* Secondary — Rich Rose (Accessible AA: 4.55:1) */
    --color-secondary: #9C6A6A;
    --color-secondary-container: #E0C0C0;
    --color-on-secondary: #FFFFFF;
    --color-on-secondary-container: #2D1A1A;

    /* Tertiary — Muted Gold (Accessible AA: 4.5:1) */
    --color-tertiary: #91794A;
    --color-tertiary-container: #E8DCC8;
    --color-on-tertiary: #FFFFFF;
    --color-on-tertiary-container: #2D2000;

    /* Surface hierarchy — Light */
    --color-surface: #FAFAF8;
    --color-surface-low: #F4F4F2;
    --color-surface-high: #E2E3E1;
    --color-surface-highest: #D0D1D0;
    --color-on-surface: #2D3436;
    --color-on-surface-variant: #5E666D;
    --color-outline: #6C757D;
    --color-outline-variant: rgba(45, 52, 54, 0.12);

    /* Fonts */
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-display: 'Manrope', system-ui, sans-serif;

    /* Pain gradient CSS var */
    --pain-gradient: linear-gradient(to right, #4A6549 0%, #B8CCBA 50%, #9C6A6A 75%, #D32F2F 100%);

    /* Shadows */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-lifted: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------------------
   Dark mode — Matches MUI dark theme (darkTokens)
   Overrides @theme tokens via higher-cascade-precedence @media.
   User-set data-theme="dark" overrides prefers-color-scheme.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Primary — Sage Green dark (#9BBF98) */
        --color-primary: #9BBF98;
        --color-primary-container: #5A7A57;
        --color-on-primary: #1A2E1B;
        --color-on-primary-container: #D4E6D5;

        /* Secondary — Dusty Rose dark */
        --color-secondary: #D4A5A5;
        --color-secondary-container: #8B6060;
        --color-on-secondary: #2D1A1A;
        --color-on-secondary-container: #F5E0E0;

        /* Tertiary — Muted Gold dark */
        --color-tertiary: #D8C890;
        --color-tertiary-container: #6B5520;
        --color-on-tertiary: #2D2000;
        --color-on-tertiary-container: #F5EDD0;

        /* Surface hierarchy — Dark */
        --color-surface: #1E1E1E;
        --color-surface-low: #2C2C2C;
        --color-surface-high: #383838;
        --color-surface-highest: #444444;
        --color-on-surface: #F5F5F5;
        --color-on-surface-variant: #ADB5BD;
        --color-outline: #484F4D;
        --color-outline-variant: rgba(173, 181, 189, 0.10);

        /* Status — Success dark */
        --color-success: #6BBF6E;
        --color-success-subtle: #1B3A1D;
        --color-on-success-subtle: #81C784;

        /* Status — Warning dark */
        --color-warning: #FFA726;
        --color-warning-subtle: #3A2A0A;
        --color-on-warning-subtle: #FFB74D;

        /* Status — Error dark (#FF9F91 - soft coral) */
        --color-error: #FF9F91;
        --color-error-container: #5C1A10;
        --color-on-error: #2D1A1A;
        --color-error-subtle: #3A1510;
        --color-on-error-subtle: #FFAB9F;

        /* Status — Info dark */
        --color-info: #5090E8;
        --color-info-subtle: #0D2A4A;
        --color-on-info-subtle: #60A5FA;

        /* Alert dark */
        --color-alert: #FF9F91;

        /* Pain scale — dark mode */
        --color-pain-1: #9BBF98;
        --color-pain-2: #7BA87D;
        --color-pain-3: #B8CCBA;
        --color-pain-4: #D8C890;
        --color-pain-5: #D4A5A5;
        --color-pain-6: #FF9F91;
        --color-pain-7: #D45040;
        --color-pain-8: #BF360C;
        --color-pain-9: #9A2A0A;
        --color-pain-10: #6B1D07;

        /* Pain gradient — dark mode */
        --pain-gradient: linear-gradient(to right, #9BBF98 0%, #B8CCBA 50%, #D4A5A5 75%, #FF9F91 100%);

        /* Shadows — Spec: rgba(0,0,0,0.2) light, rgba(0,0,0,0.2) dark */
        --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.2);
        --shadow-lifted: 0 4px 16px rgba(0, 0, 0, 0.25);

        color-scheme: dark;
    }
}

/* User-explicit dark mode — overrides system preference */
:root[data-theme="dark"] {
    /* Primary — Sage Green dark (#9BBF98) */
    --color-primary: #9BBF98;
    --color-primary-container: #5A7A57;
    --color-on-primary: #1A2E1B;
    --color-on-primary-container: #D4E6D5;

    /* Secondary — Dusty Rose dark */
    --color-secondary: #D4A5A5;
    --color-secondary-container: #8B6060;
    --color-on-secondary: #2D1A1A;
    --color-on-secondary-container: #F5E0E0;

    /* Tertiary — Muted Gold dark */
    --color-tertiary: #D8C890;
    --color-tertiary-container: #6B5520;
    --color-on-tertiary: #2D2000;
    --color-on-tertiary-container: #F5EDD0;

    /* Surface hierarchy — Dark */
    --color-surface: #1E1E1E;
    --color-surface-low: #2C2C2C;
    --color-surface-high: #383838;
    --color-surface-highest: #444444;
    --color-on-surface: #F5F5F5;
    --color-on-surface-variant: #ADB5BD;
    --color-outline: #484F4D;
    --color-outline-variant: rgba(173, 181, 189, 0.10);

    /* Status — Success dark */
    --color-success: #6BBF6E;
    --color-success-subtle: #1B3A1D;
    --color-on-success-subtle: #81C784;

    /* Status — Warning dark */
    --color-warning: #FFA726;
    --color-warning-subtle: #3A2A0A;
    --color-on-warning-subtle: #FFB74D;

    /* Status — Error dark */
    --color-error: #FF9F91;
    --color-error-container: #5C1A10;
    --color-on-error: #2D1A1A;
    --color-error-subtle: #3A1510;
    --color-on-error-subtle: #FFAB9F;

    /* Status — Info dark */
    --color-info: #5090E8;
    --color-info-subtle: #0D2A4A;
    --color-on-info-subtle: #60A5FA;

    /* Alert dark */
    --color-alert: #FF9F91;

    /* Pain scale — dark mode */
    --color-pain-1: #9BBF98;
    --color-pain-2: #7BA87D;
    --color-pain-3: #B8CCBA;
    --color-pain-4: #D8C890;
    --color-pain-5: #D4A5A5;
    --color-pain-6: #FF9F91;
    --color-pain-7: #D45040;
    --color-pain-8: #BF360C;
    --color-pain-9: #9A2A0A;
    --color-pain-10: #6B1D07;

    /* Pain gradient — dark mode */
    --pain-gradient: linear-gradient(to right, #9BBF98 0%, #B8CCBA 50%, #D4A5A5 75%, #FF9F91 100%);

    /* Shadows — Spec compliant */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-lifted: 0 4px 16px rgba(0, 0, 0, 0.25);

    color-scheme: dark;
}

/* ------------------------------------------------------------
   @layer base — CSS reset, focus styles, scrollbar, range input,
   safe area insets, accessibility utilities, auto-grow textareas
   ------------------------------------------------------------ */
@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        interpolate-size: allow-keywords;
        scroll-behavior: smooth;
    }

    body {
        -webkit-tap-highlight-color: transparent;
        transition: 
            background-color 0.3s ease, 
            color 0.3s ease,
            border-color 0.3s ease;
    }

    /* Smooth theme transitions for common elements */
    *, *::before, *::after {
        transition: 
            background-color 0.3s ease, 
            border-color 0.3s ease;
    }

    /* Exclude interactive elements from auto-transitions */
    button, a, input, select, textarea {
        transition: none;
    }

    /* Auto-growing textareas via field-sizing (progressive enhancement) */
    textarea {
        field-sizing: content;
        min-height: 120px;
        max-height: 400px;
        resize: vertical;
    }

    /* Accessible focus indicators */
    *:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-outline-variant);
        border-radius: 3px;
    }

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

    /* Range slider — gradient via CSS var on track only */
    input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 4px;
        outline: none;
        cursor: pointer;
    }

    input[type="range"]::-webkit-slider-runnable-track {
        height: 8px;
        border-radius: 4px;
        background: var(--pain-gradient);
    }

    input[type="range"]::-moz-range-track {
        height: 8px;
        border-radius: 4px;
        background: var(--pain-gradient);
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: var(--shadow-soft);
        transition: transform 0.15s ease;
        margin-top: -8px;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }

    input[type="range"]::-webkit-slider-thumb:active {
        transform: scale(0.95);
    }

    input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
        background: var(--color-primary);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: var(--shadow-soft);
    }

    /* Safe area insets for mobile devices */
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .safe-area-top {
        padding-top: env(safe-area-inset-top, 0);
    }

    /* Screen reader only */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .focus\:not-sr-only:focus {
        position: static;
        width: auto;
        height: auto;
        padding: inherit;
        margin: inherit;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

/* ------------------------------------------------------------
   @layer components — Reusable UI patterns, container queries
   ------------------------------------------------------------ */
@layer components {
    /* Glassmorphism — uses color-mix for dark-mode-safe transparency */
    .glass {
        background: color-mix(in srgb, var(--color-surface) 80%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    /* Symptom chips */
    .symptom-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: var(--color-surface-high);
        border-radius: 1.5rem;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-on-surface);
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
    }

    .symptom-chip:hover {
        background: var(--color-surface-highest);
    }

    .symptom-chip.selected {
        background: var(--color-secondary);
        color: var(--color-on-secondary);
    }

    .symptom-chip.tertiary {
        background: var(--color-tertiary-container);
        color: var(--color-on-tertiary-container);
    }

    .symptom-chip.selected.tertiary {
        background: var(--color-tertiary);
        color: var(--color-on-tertiary);
    }

    /* Privacy shroud */
    .privacy-shroud {
        position: relative;
    }

    .privacy-shroud::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--color-surface-low);
        backdrop-filter: blur(4px);
        border-radius: inherit;
        transition: opacity 0.3s ease;
    }

    .privacy-shroud.revealed::after {
        opacity: 0;
        pointer-events: none;
    }

    /* Card hover — functional lift */
    .card-hover {
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .card-hover:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lifted);
    }

    /* Loading skeleton shimmer */
    .skeleton {
        background: linear-gradient(
            90deg,
            var(--color-surface-low) 25%,
            var(--color-surface-high) 50%,
            var(--color-surface-low) 75%
        );
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
    }

    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Pain scale gradient — uses CSS var */
    .pain-gradient {
        background: var(--pain-gradient);
    }

    /* Tooltip — pure CSS, no JS */
    .tooltip {
        position: relative;
    }

    .tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        background: var(--color-on-surface);
        color: var(--color-surface);
        font-size: 12px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        pointer-events: none;
    }

    .tooltip:hover::after {
        opacity: 1;
        visibility: visible;
    }

    /* FAQ accordion panels — smooth height via interpolate-size */
    .faq-panel {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease;
    }

    .faq-panel[open] {
        max-height: 2000px;
        opacity: 1;
    }

    /* Chart container */
    .chart-container {
        position: relative;
        height: 200px;
        width: 100%;
    }

    /* Container query wrapper for article cards */
    .article-card-wrapper {
        container-type: inline-size;
        container-name: article-card;
    }
}

/* ------------------------------------------------------------
   @layer utilities — Animations, stagger effects, container
   query adaptations for article cards
   ------------------------------------------------------------ */
@layer utilities {
    /* Fade-in entrance */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
        animation: fadeIn 0.3s ease-out;
    }

    /* Slide-up entrance */
    @keyframes slideUp {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-slide-up {
        animation: slideUp 0.4s ease-out;
    }

    /* Stagger list items */
    .stagger-item {
        opacity: 0;
        animation: fadeIn 0.3s ease-out forwards;
    }

    .stagger-item:nth-child(1) { animation-delay: 0ms; }
    .stagger-item:nth-child(2) { animation-delay: 50ms; }
    .stagger-item:nth-child(3) { animation-delay: 100ms; }
    .stagger-item:nth-child(4) { animation-delay: 150ms; }
    .stagger-item:nth-child(5) { animation-delay: 200ms; }
    .stagger-item:nth-child(6) { animation-delay: 250ms; }

    /* Gradient CTA button */
    .btn-gradient-primary {
        background: linear-gradient(
            180deg,
            var(--color-primary) 0%,
            var(--color-primary-container) 100%
        );
        box-shadow: 0 2px 8px rgba(74, 101, 73, 0.25);
    }

    .btn-gradient-primary:hover {
        box-shadow: 0 4px 12px rgba(74, 101, 73, 0.35);
    }

    /* Container query: ArticleCard adapts to parent width */
    @container article-card (max-width: 400px) {
        .article-card-title {
            font-size: 0.875rem;
        }
    }

    @container article-card (max-width: 200px) {
        .article-card-image { display: none; }
        .article-card-meta { display: none; }
    }
}