/* ==========================================================================
   DevCod Teaser Landing Page - CSS Core Design System & Styling
   ========================================================================== */

/* --- Custom Theme Settings --- */
/* --- Default Light Mode --- */
:root {
    --bg-color: #f8fafc;
    --card-bg: rgba(255, 255, 255, 0.7);
    --border-color: rgba(168, 85, 247, 0.12);
    --border-glow: rgba(168, 85, 247, 0.25);
    --grid-color: rgba(168, 85, 247, 0.08);
    --ambient-glow: rgba(168, 85, 247, 0.04);
    
    /* Minor transparent surfaces and subtle boundaries */
    --panel-bg-subtle: rgba(15, 23, 42, 0.03);
    --border-subtle: rgba(15, 23, 42, 0.06);

    /* Inputs adaptive states */
    --input-bg: rgba(15, 23, 42, 0.03);
    --input-border: rgba(15, 23, 42, 0.12);

    /* Buttons adaptive states */
    --btn-secondary-bg: rgba(15, 23, 42, 0.03);
    --btn-secondary-border: rgba(15, 23, 42, 0.15);
    --btn-secondary-hover-bg: rgba(15, 23, 42, 0.06);
    --btn-secondary-hover-border: rgba(15, 23, 42, 0.35);

    /* Neon Colors (adapted for light mode legibility) */
    --purple-neon: #a855f7;
    --purple-light: #7c3aed;
    --cyan-neon: #6366f1;
    --cyan-light: #4f46e5;
    --teal-neon: #0f766e;
    --teal-light: #0d9488;
    --green-neon: #047857;
    --green-light: #059669;
    --yellow-neon: #b45309;
    --yellow-light: #d97706;
    --yellow-glow: rgba(245, 158, 11, 0.25);
    
    /* Neutral Text */
    --text-primary: #0f172a;
    --text-muted: #334155;
    --text-dark: #94a3b8;

    /* Fonts */
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Coordinates */
    --mouse-x: 50%;
    --mouse-y: 50%;

    /* Soft layered shadows */
    --shadow-soft: 
        0 4px 6px -1px rgba(15, 23, 42, 0.03),
        0 10px 20px -3px rgba(15, 23, 42, 0.05),
        0 20px 30px -5px rgba(15, 23, 42, 0.08),
        0 30px 40px -10px rgba(15, 23, 42, 0.1);
    --shadow-button: 0 4px 14px rgba(168, 85, 247, 0.15);
    --shadow-button-hover: 0 6px 20px rgba(168, 85, 247, 0.25);
    --hero-title-shadow: 0 10px 20px rgba(15, 23, 42, 0.12), 0 3px 6px rgba(15, 23, 42, 0.08);

    /* Modal Theme Variables (Light Theme - Ice White) */
    --modal-bg: #f8fafc;
    --modal-border: rgba(124, 58, 237, 0.15);
    --modal-title-grad: linear-gradient(135deg, #4f46e5, #7c3aed);
    --modal-text: #475569;
    --modal-label: #6d28d9;
    --modal-select-bg: #ffffff;
    --modal-select-border: #cbd5e1;
    --modal-select-text: #0f172a;
    --modal-select-focus-bg: #ffffff;
    --modal-select-focus-border: #7c3aed;
    --modal-skip: #64748b;
    --modal-skip-hover: #7c3aed;
    --modal-progress-bg: #cbd5e1;
    --modal-progress-bar: linear-gradient(90deg, #4f46e5, #7c3aed);
}

/* --- Dark Mode Override --- */
html[data-theme="dark"] {
    --bg-color: #040406;
    --card-bg: rgba(12, 11, 20, 0.65);
    --border-color: rgba(168, 85, 247, 0.15);
    --border-glow: rgba(168, 85, 247, 0.35);
    --grid-color: rgba(168, 85, 247, 0.055);
    --ambient-glow: rgba(168, 85, 247, 0.08);
    
    /* Minor transparent surfaces and subtle boundaries */
    --panel-bg-subtle: rgba(255, 255, 255, 0.03);
    --border-subtle: rgba(255, 255, 255, 0.06);

    /* Inputs adaptive states */
    --input-bg: rgba(255, 255, 255, 0.02);
    --input-border: rgba(255, 255, 255, 0.08);

    /* Buttons adaptive states */
    --btn-secondary-bg: rgba(255, 255, 255, 0.03);
    --btn-secondary-border: rgba(255, 255, 255, 0.15);
    --btn-secondary-hover-bg: rgba(255, 255, 255, 0.06);
    --btn-secondary-hover-border: rgba(255, 255, 255, 0.35);

    /* Neon Colors (original dark mode values) */
    --purple-neon: #a855f7;
    --purple-light: #c084fc;
    --cyan-neon: #8b5cf6;
    --cyan-light: #a78bfa;
    --teal-neon: #14b8a6;
    --teal-light: #2dd4bf;
    --green-neon: #10b981;
    --green-light: #34d399;
    --yellow-neon: #FFD60A;
    --yellow-light: #FFE14D;
    --yellow-glow: rgba(255, 214, 10, 0.4);
    
    /* Neutral Text */
    --text-primary: #f3f4f6;
    --text-muted: #a1a1aa;
    --text-dark: #52525b;

    /* Soft dark shadows */
    --shadow-soft: 
        0 4px 10px rgba(0, 0, 0, 0.2),
        0 15px 30px rgba(0, 0, 0, 0.35),
        0 30px 60px rgba(0, 0, 0, 0.5);
    --shadow-button: 0 4px 20px rgba(168, 85, 247, 0.25);
    --shadow-button-hover: 0 6px 25px rgba(168, 85, 247, 0.45);
    --hero-title-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(168, 85, 247, 0.15);

    /* Modal Theme Variables (Dark Theme - Dark Purple) */
    --modal-bg: #0c0b10;
    --modal-border: rgba(168, 85, 247, 0.25);
    --modal-title-grad: linear-gradient(135deg, #c084fc, #a78bfa);
    --modal-text: #a1a1aa;
    --modal-label: #c084fc;
    --modal-select-bg: rgba(255, 255, 255, 0.03);
    --modal-select-border: rgba(255, 255, 255, 0.08);
    --modal-select-text: #f3f4f6;
    --modal-select-focus-bg: rgba(168, 85, 247, 0.03);
    --modal-select-focus-border: var(--purple-neon);
    --modal-skip: #a1a1aa;
    --modal-skip-hover: var(--purple-light);
    --modal-progress-bg: rgba(255, 255, 255, 0.05);
    --modal-progress-bar: linear-gradient(90deg, #c084fc, #a78bfa);
}