/* ==========================================================
   GARSOLVE DESIGN SYSTEM
   File: variables.css
   ========================================================== */

   :root {

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

    --color-primary: #00d6d6;
    --color-primary-light: #36eeee;
    --color-primary-dark: #00a9aa;

    --color-accent: #3ba9ff;
    --color-accent-light: #67bdff;
    --color-accent-dark: #197dcc;


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

    --color-background: #020712;
    --color-background-secondary: #06101d;
    --color-background-tertiary: #0a1726;

    --color-surface: #0a1422;
    --color-surface-elevated: #0e1c2d;

    --color-surface-glass: rgba(255, 255, 255, 0.055);
    --color-surface-glass-strong: rgba(255, 255, 255, 0.085);


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

    --color-text-primary: #f7fafc;
    --color-text-secondary: #b6c4d4;
    --color-text-muted: #7e8da0;
    --color-text-subtle: #5f6d7e;

    --color-text-inverse: #031019;


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

    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-light: rgba(255, 255, 255, 0.14);
    --color-border-primary: rgba(0, 214, 214, 0.35);
    --color-border-accent: rgba(59, 169, 255, 0.35);


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

    --color-success: #36d399;
    --color-warning: #f6c453;
    --color-danger: #ff6b81;
    --color-info: #55b8ff;


    /* ======================================================
       GRADIENTS
       ====================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-accent)
        );

    --gradient-primary-soft:
        linear-gradient(
            135deg,
            rgba(0, 214, 214, 0.16),
            rgba(59, 169, 255, 0.12)
        );

    --gradient-hero:
        radial-gradient(
            circle at 75% 20%,
            rgba(0, 214, 214, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 20% 60%,
            rgba(59, 169, 255, 0.11),
            transparent 35%
        );

    --gradient-text:
        linear-gradient(
            100deg,
            #00e1e1 0%,
            #55c8ff 100%
        );


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

    --font-primary:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;


    /* ======================================================
       FONT WEIGHTS
       ====================================================== */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;


    /* ======================================================
       FONT SIZES
       ====================================================== */

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;


    /* ======================================================
       LINE HEIGHTS
       ====================================================== */

    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.85;


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

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;


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

    --container-width: 1240px;
    --container-padding: 1.5rem;

    --header-height: 84px;

    --section-padding-y: 7rem;


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

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;


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

    --shadow-sm:
        0 4px 16px rgba(0, 0, 0, 0.18);

    --shadow-md:
        0 12px 32px rgba(0, 0, 0, 0.28);

    --shadow-lg:
        0 24px 70px rgba(0, 0, 0, 0.38);

    --shadow-primary:
        0 0 30px rgba(0, 214, 214, 0.16);

    --shadow-accent:
        0 0 30px rgba(59, 169, 255, 0.16);


    /* ======================================================
       GLASS EFFECTS
       ====================================================== */

    --glass-background:
        rgba(8, 20, 34, 0.64);

    --glass-background-light:
        rgba(255, 255, 255, 0.045);

    --glass-border:
        rgba(255, 255, 255, 0.09);

    --glass-blur: 18px;


    /* ======================================================
       TRANSITIONS
       ====================================================== */

    --transition-fast:
        150ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-base:
        250ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow:
        450ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-spring:
        500ms cubic-bezier(0.16, 1, 0.3, 1);


    /* ======================================================
       Z-INDEX SYSTEM
       ====================================================== */

    --z-background: -10;
    --z-base: 0;
    --z-content: 10;
    --z-header: 100;
    --z-overlay: 500;
    --z-modal: 1000;


    /* ======================================================
       ANIMATION VALUES
       ====================================================== */

    --animation-duration-fast: 180ms;
    --animation-duration-base: 400ms;
    --animation-duration-slow: 800ms;

    --animation-ease:
        cubic-bezier(0.4, 0, 0.2, 1);

    --animation-ease-out:
        cubic-bezier(0.16, 1, 0.3, 1);

}