/*
====================================================
Flipper AI Design System
Version : BETA 1.0
====================================================
*/

:root {

    /* ==================================================
       COLORS
    ================================================== */

    --primary: #2563EB;
    --primary-hover: #1D4ED8;

    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;

    --background: #F8FAFC;
    --surface: #FFFFFF;
    --surface-light: #F1F5F9;

    --text: #1E293B;
    --text-secondary: #64748B;

    --border: #E2E8F0;

    /* ==================================================
       TYPOGRAPHY
    ================================================== */

    --font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-xs: 0.80rem;
    --font-sm: 0.90rem;
    --font-md: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 2rem;
    --font-xxl: 3rem;

    /* ==================================================
       SPACING
    ================================================== */

    --space-xs: .25rem;
    --space-sm: .50rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;
    --space-xxl: 6rem;

    /* ==================================================
       RADIUS
    ================================================== */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 28px;

    /* ==================================================
       SHADOWS
    ================================================== */

    --shadow-sm:
        0 2px 6px rgba(0,0,0,.05);

    --shadow-md:
        0 8px 25px rgba(15,23,42,.08);

    --shadow-lg:
        0 20px 50px rgba(15,23,42,.12);

    /* ==================================================
       ANIMATIONS
    ================================================== */

    --transition-fast: .18s ease;

    --transition-normal: .30s ease;

    --transition-slow: .50s ease;

    /* ==================================================
       LAYOUT
    ================================================== */

    --container-width: 1200px;

}