@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap");

/* Fractal UI Framework: Bauhaus Design System */
/* Version: 3.0 | Date: Feb 2026 */
/* Philosophy: Constructivist modernism - form follows function */

/* === Root Variables === */
:root {
    /* Core Backgrounds - Light Bauhaus Canvas */
    --bg-deep: #F0F0F0;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FAFAFA;
    --bg-input: #FFFFFF;
    --bg-muted: #E0E0E0;

    /* Primary Bauhaus Colors */
    --primary-red: #D02020;
    --primary-blue: #1040C0;
    --primary-yellow: #F0C020;

    /* Stark Black for borders and text */
    --black: #121212;

    /* Accents mapped to Bauhaus primaries */
    --accent-primary: #1040C0;
    --accent-secondary: #D02020;
    --accent-success: #00A060;
    --accent-warning: #F0C020;
    --accent-danger: #D02020;
    --accent-info: #1040C0;

    /* Text */
    --text-primary: #121212;
    --text-secondary: #404040;
    --text-muted: #707070;
    --text-on-primary: #FFFFFF;
    --text-on-yellow: #121212;

    /* Borders & Dividers - Thick and deliberate */
    --border-subtle: rgba(18, 18, 18, 0.1);
    --border-default: #121212;
    --border-accent: #121212;
    --border-width: 2px;
    --border-width-thick: 4px;

    /* Financial Semantics */
    --color-gain: #00A060;
    --color-loss: #D02020;
    --color-neutral: #707070;

    /* Interactive Feedback */
    --hover-bg: rgba(18, 18, 18, 0.05);
    --active-bg: rgba(18, 18, 18, 0.1);
    --focus-ring: 0 0 0 2px #121212, 0 0 0 4px #F0C020;

    /* Spacing Scale */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-24: 6rem;     /* 96px */

    /* Touch Target (Mobile) */
    --touch-min: 44px;

    /* Typography - CSP-safe system stack */
    --font-ui: "Outfit", "Avenir Next", "Avenir", "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Consolas", monospace;

    /* Bauhaus Typography Scale - Extreme contrast */
    --text-xs: 0.75rem;       /* 12px */
    --text-sm: 0.875rem;      /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg: 1.125rem;      /* 18px */
    --text-xl: 1.5rem;        /* 24px */
    --text-2xl: 2rem;         /* 32px */
    --text-3xl: 2.5rem;       /* 40px */
    --text-4xl: 3rem;         /* 48px */
    --text-6xl: 4rem;         /* 64px */
    --text-8xl: 6rem;         /* 96px */

    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    --font-black: 900;

    --leading-none: 0.9;
    --leading-tight: 1.1;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Border Radius - Binary: sharp or full circle */
    --radius-none: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-full: 9999px;

    /* Hard Offset Shadows - No blur, Bauhaus style */
    --shadow-none: none;
    --shadow-sm: 3px 3px 0px 0px #121212;
    --shadow-md: 4px 4px 0px 0px #121212;
    --shadow-lg: 6px 6px 0px 0px #121212;
    --shadow-xl: 8px 8px 0px 0px #121212;

    /* Workspace Shell — softer shadows (playful utility) */
    --shadow-ws-rest: 0 2px 12px rgba(15, 23, 42, 0.06);
    --shadow-ws-hover: 0 4px 24px rgba(15, 23, 42, 0.1);
    --shadow-ws-card: 0 1px 4px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    --shadow-ws-chat: 0 2px 8px rgba(15, 23, 42, 0.04), 0 8px 32px rgba(15, 23, 42, 0.05);

    /* Workspace Shell — intermediate radii (playful, not binary pill-or-sharp) */
    --radius-ws-sm: 12px;
    --radius-ws-md: 16px;
    --radius-ws-lg: 24px;
    --radius-ws-xl: 32px;

    /* Active/Press state shadow removal */
    --shadow-pressed: none;
    --translate-pressed: 2px;

    /* Transitions - Mechanical, snappy */
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out: ease-out;

    --duration-instant: 0.05s;
    --duration-fast: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;

    /* Spring Physics (game-design inspired motion) */
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
    --spring-enter: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-exit: cubic-bezier(0.55, 0.06, 0.68, 0.19);

    /* Z-Index */
    --z-modal: 1000;
    --z-dropdown: 500;
    --z-tooltip: 600;
    --z-toast: 1100;

    /* Responsive Breakpoints */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1440px;

    /* Section Color Blocking */
    --section-hero: #1040C0;
    --section-stats: #F0C020;
    --section-blog: #1040C0;
    --section-benefits: #D02020;
    --section-cta: #F0C020;
    --section-footer: #121212;
}

/* Dark Mode - Inverted Bauhaus */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-deep: #0D0D0D;
        --bg-surface: #1A1A1A;
        --bg-elevated: #262626;
        --bg-input: #1A1A1A;
        --bg-muted: #333333;

        --primary-red: #E03030;
        --primary-blue: #3060FF;
        --primary-yellow: #FAD02C;

        --black: #EAEAEA;

        --accent-primary: var(--primary-blue);
        --accent-secondary: var(--primary-red);
        --accent-success: #00D080;
        --accent-warning: var(--primary-yellow);
        --accent-danger: var(--primary-red);
        --accent-info: var(--primary-blue);

        --text-primary: #F5F5F5;
        --text-secondary: #AAAAAA;
        --text-muted: #777777;
        --text-on-primary: #FFFFFF;
        --text-on-yellow: #121212;

        --border-subtle: rgba(255, 255, 255, 0.1);
        --border-default: var(--black);
        --border-accent: var(--black);

        --color-gain: #00D080;
        --color-loss: #E03030;
        --color-neutral: #AAAAAA;

        --hover-bg: rgba(255, 255, 255, 0.05);
        --active-bg: rgba(255, 255, 255, 0.1);
        --focus-ring: 0 0 0 2px var(--black), 0 0 0 4px var(--primary-yellow);

        --shadow-sm: 3px 3px 0px 0px var(--black);
        --shadow-md: 4px 4px 0px 0px var(--black);
        --shadow-lg: 6px 6px 0px 0px var(--black);
        --shadow-xl: 8px 8px 0px 0px var(--black);
    }
}

[data-theme="dark"] {
    --bg-deep: #0D0D0D;
    --bg-surface: #1A1A1A;
    --bg-elevated: #262626;
    --bg-input: #1A1A1A;
    --bg-muted: #333333;

    --primary-red: #E03030;
    --primary-blue: #3060FF;
    --primary-yellow: #FAD02C;

    --black: #EAEAEA;

    --accent-primary: var(--primary-blue);
    --accent-secondary: var(--primary-red);
    --accent-success: #00D080;
    --accent-warning: var(--primary-yellow);
    --accent-danger: var(--primary-red);
    --accent-info: var(--primary-blue);

    --text-primary: #F5F5F5;
    --text-secondary: #AAAAAA;
    --text-muted: #777777;
    --text-on-primary: #FFFFFF;
    --text-on-yellow: #121212;

    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-default: var(--black);
    --border-accent: var(--black);

    --color-gain: #00D080;
    --color-loss: #E03030;
    --color-neutral: #AAAAAA;

    --hover-bg: rgba(255, 255, 255, 0.05);
    --active-bg: rgba(255, 255, 255, 0.1);
    --focus-ring: 0 0 0 2px var(--black), 0 0 0 4px var(--primary-yellow);

    --shadow-sm: 3px 3px 0px 0px var(--black);
    --shadow-md: 4px 4px 0px 0px var(--black);
    --shadow-lg: 6px 6px 0px 0px var(--black);
    --shadow-xl: 8px 8px 0px 0px var(--black);
}