/**
 * Demo Tokens - Scoped CSS Variables for App Frame
 *
 * These variables override the main site variables ONLY within .app-frame
 * This ensures demos display with the LENS app palette while the
 * marketing site keeps its own color scheme.
 */

/* ==========================================================================
   App Frame Scoped Variables (Light Theme)
   ========================================================================== */

.app-frame {
    /* ----------------------------------------
       Spacing (Demo Layout)
       ---------------------------------------- */
    --spacing-xs: 0.25rem;      /* 4px */
    --spacing-sm: 0.5rem;       /* 8px */
    --spacing-md: 1rem;         /* 16px */
    --spacing-lg: 1.5rem;       /* 24px */
    --spacing-xl: 2rem;         /* 32px */

    /* ----------------------------------------
       Risk Level Colors (LENS Core Palette)
       ---------------------------------------- */
    --risk-level-1: #42B74A;    /* Low - Green */
    --risk-level-2: #7BC043;    /* Low-Medium - Light Green */
    --risk-level-3: #FFBB10;    /* Medium - Golden Yellow */
    --risk-level-4: #FF7A00;    /* High - Orange */
    --risk-level-5: #CF2020;    /* Very High - Red */

    /* ----------------------------------------
       Graph Node Colors
       ---------------------------------------- */
    --graph-node-company-healthy: #4a9d7c;
    --graph-node-company-warning: #c9a857;
    --graph-node-company-risk: #c75555;
    --graph-node-person: #d6d3d1;
    --graph-node-beneficial: #64748b;
    --graph-edge: #c4c9ce;
    --graph-label: #1e293b;

    /* ----------------------------------------
       Accent Colors (Graph/Demo specific)
       ---------------------------------------- */
    --accent-green: #4a9d7c;
    --accent-orange: #c9a857;
    --accent-red: #c75555;

    /* ----------------------------------------
       Chart Colors
       ---------------------------------------- */
    --chart-primary: #5b9a8b;
    --chart-positive: #22c55e;
    --chart-negative: #ef4444;
    --chart-accent: #f97316;
    --chart-male: #3b82f6;
    --chart-female: #ec4899;

    /* ----------------------------------------
       Demo Backgrounds (Warm Cream - Original LENS)
       ---------------------------------------- */
    --bg-primary: #f9f8f6;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f4f2;
    --bg-hover: #f0efed;
    --bg-active: #e8e7e5;
    --bg-elevated: #ffffff;

    /* ----------------------------------------
       Demo Text Colors
       ---------------------------------------- */
    --text-primary: #1f1f1f;
    --text-secondary: #525252;
    --text-tertiary: #737373;
    --text-quaternary: #a3a3a3;
    --text-inverse: #ffffff;

    /* ----------------------------------------
       Demo Borders
       ---------------------------------------- */
    --border-primary: #e5e5e5;
    --border-secondary: #d4d4d4;
    --border-focus: #5b9a8b;

    /* ----------------------------------------
       Brand/Accent (LENS Teal)
       ---------------------------------------- */
    --accent-primary: #5b9a8b;
    --accent-primary-hover: #4a8577;
    --accent-primary-active: #3d7065;
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #f59e0b;

    /* ----------------------------------------
       Semantic Colors
       ---------------------------------------- */
    --color-success: #4a9d7c;
    --color-success-bg: #ecfdf5;
    --color-success-border: #a7f3d0;

    --color-warning: #c9a857;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fde68a;

    --color-error: #c75555;
    --color-error-bg: #fef2f2;
    --color-error-border: #fecaca;

    --color-info: #3b82f6;
    --color-info-bg: #eff6ff;
    --color-info-border: #bfdbfe;

    /* ----------------------------------------
       Demo Shadows
       ---------------------------------------- */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   App Frame Scoped Variables (Dark Theme)
   ========================================================================== */

[data-theme="dark"] .app-frame,
.app-frame[data-theme="dark"] {
    /* Risk Level Colors - Brighter for dark mode */
    --risk-level-1: #4ade80;    /* Low - Bright Green */
    --risk-level-2: #86efac;    /* Low-Medium - Light Green */
    --risk-level-3: #fbbf24;    /* Medium - Bright Yellow */
    --risk-level-4: #fb923c;    /* High - Bright Orange */
    --risk-level-5: #f87171;    /* Very High - Bright Red */

    /* Graph Node Colors - Adjusted for dark */
    --graph-node-company-healthy: #5bae8d;
    --graph-node-company-warning: #d9b967;
    --graph-node-company-risk: #d76565;
    --graph-node-person: #a8a29e;
    --graph-node-beneficial: #94a3b8;
    --graph-edge: #3f4147;
    --graph-label: #f1f5f9;

    /* Accent Colors - Brighter for dark */
    --accent-green: #5bae8d;
    --accent-orange: #d9b967;
    --accent-red: #d76565;

    /* Chart Colors - Brighter */
    --chart-positive: #4ade80;
    --chart-negative: #f87171;
    --chart-accent: #fb923c;

    /* Demo Backgrounds (Dark - Neutral Grays) */
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2a2a2a;
    --bg-hover: #333333;
    --bg-active: #404040;
    --bg-elevated: #2a2a2a;

    /* Demo Text Colors (Zinc palette - no blue undertone) */
    --text-primary: #fafafa;
    --text-secondary: #d4d4d8;
    --text-tertiary: #a1a1aa;
    --text-quaternary: #71717a;
    --text-inverse: #1a1a1a;

    /* Demo Borders */
    --border-primary: #3f3f3f;
    --border-secondary: #525252;

    /* Brand/Accent - Brighter for dark */
    --accent-primary: #6aab9c;
    --accent-primary-hover: #7bbcad;
    --accent-primary-active: #8ccdbf;

    /* Semantic Colors - Dark mode adjustments */
    --color-success: #4ade80;
    --color-success-bg: rgba(74, 222, 128, 0.1);
    --color-success-border: rgba(74, 222, 128, 0.3);

    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.1);
    --color-warning-border: rgba(251, 191, 36, 0.3);

    --color-error: #f87171;
    --color-error-bg: rgba(248, 113, 113, 0.1);
    --color-error-border: rgba(248, 113, 113, 0.3);

    --color-info: #60a5fa;
    --color-info-bg: rgba(96, 165, 250, 0.1);
    --color-info-border: rgba(96, 165, 250, 0.3);

    /* Demo Shadows - Darker */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   OS Dark Mode Preference (when no explicit theme set)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .app-frame {
        /* Risk Level Colors - Brighter for dark mode */
        --risk-level-1: #4ade80;
        --risk-level-2: #86efac;
        --risk-level-3: #fbbf24;
        --risk-level-4: #fb923c;
        --risk-level-5: #f87171;

        /* Graph Node Colors */
        --graph-node-company-healthy: #5bae8d;
        --graph-node-company-warning: #d9b967;
        --graph-node-company-risk: #d76565;
        --graph-node-person: #a8a29e;
        --graph-node-beneficial: #94a3b8;
        --graph-edge: #3f4147;
        --graph-label: #f1f5f9;

        /* Accent Colors */
        --accent-green: #5bae8d;
        --accent-orange: #d9b967;
        --accent-red: #d76565;

        /* Chart Colors */
        --chart-positive: #4ade80;
        --chart-negative: #f87171;
        --chart-accent: #fb923c;

        /* Demo Backgrounds (Neutral Grays) */
        --bg-primary: #1a1a1a;
        --bg-secondary: #242424;
        --bg-tertiary: #2a2a2a;
        --bg-hover: #333333;
        --bg-active: #404040;
        --bg-elevated: #2a2a2a;

        /* Demo Text Colors (Zinc palette - no blue undertone) */
        --text-primary: #fafafa;
        --text-secondary: #d4d4d8;
        --text-tertiary: #a1a1aa;
        --text-quaternary: #71717a;
        --text-inverse: #1a1a1a;

        /* Demo Borders */
        --border-primary: #3f3f3f;
        --border-secondary: #525252;

        /* Brand/Accent */
        --accent-primary: #6aab9c;
        --accent-primary-hover: #7bbcad;
        --accent-primary-active: #8ccdbf;

        /* Semantic Colors */
        --color-success: #4ade80;
        --color-success-bg: rgba(74, 222, 128, 0.1);
        --color-success-border: rgba(74, 222, 128, 0.3);

        --color-warning: #fbbf24;
        --color-warning-bg: rgba(251, 191, 36, 0.1);
        --color-warning-border: rgba(251, 191, 36, 0.3);

        --color-error: #f87171;
        --color-error-bg: rgba(248, 113, 113, 0.1);
        --color-error-border: rgba(248, 113, 113, 0.3);

        --color-info: #60a5fa;
        --color-info-bg: rgba(96, 165, 250, 0.1);
        --color-info-border: rgba(96, 165, 250, 0.3);

        /* Demo Shadows */
        --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    }
}