/* variables.css — Recovery24 Design Tokens */
/* Palette: Hybrid (Fresh Mint + Soft Sage) */

        :root {
            /* Primary palette — Warm Bright Teal */
            --ap-primary: #2DA89B;
            --ap-primary-light: #5CC9B8;
            --ap-primary-dark: #1E8F85;
            --ap-secondary: #2DA89B;
            --ap-success: #4CAF6E;
            --ap-warning: #E8A850;
            --ap-danger: #D95555;
            --ap-accent: #E8A850;

            /* Surfaces — Warm Neutral */
            --ap-bg: #FAFAF7;
            --ap-bg-secondary: #F0EFEC;
            --ap-card: #F5F4F1;
            --ap-surface-elevated: #FFFFFF;
            --ap-surface-0: #FAFAF7;
            --ap-surface-1: #F5F4F1;
            --ap-surface-2: #F0EFEC;
            --ap-surface-3: #FFFFFF;
            --ap-border: rgba(0, 0, 0, 0.06);
            --ap-ghost-border: 1px solid rgba(0, 0, 0, 0.04);
            --ap-overlay: rgba(0, 0, 0, 0.5);

            /* Text */
            --ap-text: #1A2332;
            --ap-text-secondary: #5C6670;
            --ap-text-muted: #8A9199;

            /* Ambient Shadows — neutral, soft diffusion */
            --ap-shadow-sm: 0 2px 8px rgba(26,35,50,0.04);
            --ap-shadow-md: 0 4px 16px rgba(26,35,50,0.06);
            --ap-shadow-lg: 0 8px 32px rgba(26,35,50,0.08);

            /* Typography — senior-friendly (50-70대) */
            --ap-font-base: 17px;
            --ap-font-body: 16px;
            --ap-font-sm: 15px;
            --ap-font-xs: 13px;  /* absolute minimum */
            --ap-line-height: 1.75;

            /* Radius — rounder, approachable */
            --ap-radius-sm: 12px;
            --ap-radius-md: 20px;
            --ap-radius-lg: 28px;

            /* Gradients — no salmon, teal-only */
            --ap-gradient-accent: linear-gradient(135deg, #E8A850, #F0C060);
            --ap-gradient-primary: linear-gradient(135deg, #1E8F85, #2DA89B);
            --ap-gradient-success: linear-gradient(135deg, #4CAF6E, #5CC98C);

            /* Tab bar */
            --ap-tab-bg: rgba(255, 255, 255, 0.72);
            --ap-tab-border: rgba(0, 0, 0, 0.06);
        }

        /* ── Dark Mode — Warm Neutral Dark ────────────────── */
        [data-theme="dark"] {
            --ap-primary: #4CC9B8;
            --ap-primary-light: #6DD8C8;
            --ap-primary-dark: #3AB5A5;
            --ap-secondary: #4CC9B8;
            --ap-success: #5CC98C;
            --ap-warning: #F0C060;
            --ap-danger: #E06060;
            --ap-accent: #F0C060;

            /* Neutral dark (no teal tint) */
            --ap-bg: #1A1A1E;
            --ap-bg-secondary: #252528;
            --ap-card: #252528;
            --ap-surface-elevated: #2E2E32;
            --ap-surface-0: #1A1A1E;
            --ap-surface-1: #252528;
            --ap-surface-2: #2E2E32;
            --ap-surface-3: #353538;
            --ap-border: rgba(255, 255, 255, 0.08);
            --ap-ghost-border: 1px solid rgba(255, 255, 255, 0.04);
            --ap-overlay: rgba(0, 0, 0, 0.7);

            --ap-text: #F0ECE7;
            --ap-text-secondary: #B0B8C0;
            --ap-text-muted: #8A9BA5;

            --ap-shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
            --ap-shadow-md: 0 4px 16px rgba(0,0,0,0.3);
            --ap-shadow-lg: 0 8px 32px rgba(0,0,0,0.4);

            --ap-gradient-accent: linear-gradient(135deg, #F0C060, #FFD080);
            --ap-gradient-primary: linear-gradient(135deg, #3AB5A5, #4CC9B8);
            --ap-gradient-success: linear-gradient(135deg, #5CC98C, #7DE0A5);

            --ap-tab-bg: rgba(26, 26, 30, 0.85);
            --ap-tab-border: rgba(255, 255, 255, 0.06);
        }

        /* Phase 5: High Contrast Mode */
        [data-contrast="high"] {
            --ap-text: #000000;
            --ap-text-secondary: #1a1a1a;
            --ap-text-muted: #333333;
            --ap-border: #000000;
            --ap-primary: #1E8F85;
            --ap-success: #006600;
            --ap-danger: #cc0000;
            --ap-bg-secondary: #e8e8e8;
        }
        [data-contrast="high"] .tab-item { font-weight: 700; }
        [data-contrast="high"] .ob-option,
        [data-contrast="high"] button { border-width: 2px; }
        @media (prefers-contrast: more) {
            :root { --ap-text: #000; --ap-border: #000; }
        }