/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : variables.css
   Part    : 1
========================================================== */

:root {

    /* ======================================================
       Brand Colors
    ====================================================== */

    --primary-color: #0B6CFF;
    --primary-hover: #0057D9;

    --secondary-color: #111827;

    --accent-color: #4CC9F0;

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

    /* ======================================================
       Background
    ====================================================== */

    --background-color: #05070D;

    --surface-color: rgba(255,255,255,.06);

    --surface-hover: rgba(255,255,255,.10);

    --glass-color: rgba(255,255,255,.08);

    /* ======================================================
       Text
    ====================================================== */

    --text-primary: #FFFFFF;

    --text-secondary: #C7CDD8;

    --text-muted: #8C95A5;

    /* ======================================================
       Border
    ====================================================== */

    --border-color: rgba(255,255,255,.12);

    --border-light: rgba(255,255,255,.06);

    /* ======================================================
       Glass Effect
    ====================================================== */

    --glass-blur: 22px;

    --glass-opacity: .08;

    --glass-border: 1px solid rgba(255,255,255,.12);

    /* ======================================================
       Shadows
    ====================================================== */

    --shadow-small:
        0 4px 15px rgba(0,0,0,.18);

    --shadow-medium:
        0 10px 30px rgba(0,0,0,.28);

    --shadow-large:
        0 20px 60px rgba(0,0,0,.40);

    /* ======================================================
       Radius
    ====================================================== */

    --radius-small: 12px;

    --radius-medium: 18px;

    --radius-large: 28px;

    --radius-full: 999px;

    /* ======================================================
       Transition
    ====================================================== */

    --transition-fast: .20s;

    --transition-normal: .35s;

    --transition-slow: .60s;

    /* ======================================================
       Font
    ====================================================== */

    --font-fa:
        "Vazirmatn",
        sans-serif;

    --font-en:
        "Inter",
        sans-serif;

    /* ======================================================
       Font Size
    ====================================================== */

    --font-xs: .75rem;

    --font-sm: .875rem;

    --font-md: 1rem;

    --font-lg: 1.25rem;

    --font-xl: 2rem;

    --font-xxl: 3.5rem;

    /* ======================================================
       Spacing
    ====================================================== */

    --space-1: .25rem;

    --space-2: .50rem;

    --space-3: .75rem;

    --space-4: 1rem;

    --space-5: 1.5rem;

    --space-6: 2rem;

    --space-7: 3rem;

    --space-8: 4rem;

    /* ادامه در قسمت ۲ */

    /* ======================================================
       Layout
    ====================================================== */

    --header-height: 80px;

    --container-width: 1400px;

    --section-spacing: 120px;

    /* ======================================================
       Z-Index
    ====================================================== */

    --z-background: -1;

    --z-default: 1;

    --z-header: 100;

    --z-dropdown: 300;

    --z-overlay: 600;

    --z-modal: 900;

    --z-loading: 9999;

    /* ======================================================
       Search
    ====================================================== */

    --search-height: 64px;

    --search-radius: 999px;

    --search-border:
        1px solid rgba(255,255,255,.15);

    /* ======================================================
       Buttons
    ====================================================== */

    --button-height: 52px;

    --button-radius: 16px;

    /* ======================================================
       Cards
    ====================================================== */

    --card-radius: 24px;

    --card-padding: 24px;

    /* ======================================================
       Animation
    ====================================================== */

    --animation-speed-fast: .25s;

    --animation-speed-normal: .40s;

    --animation-speed-slow: .80s;

    /* ======================================================
       Responsive Breakpoints
    ====================================================== */

    --mobile: 576px;

    --tablet: 768px;

    --laptop: 1024px;

    --desktop: 1280px;

    --wide: 1536px;

    /* ======================================================
       Gradient
    ====================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #0B6CFF 0%,
            #4CC9F0 100%
        );

    --gradient-dark:
        linear-gradient(
            180deg,
            #05070D 0%,
            #0F172A 100%
        );

    /* ======================================================
       Selection
    ====================================================== */

    --selection-background: #0B6CFF;

    --selection-color: #FFFFFF;

}

/* ==========================================================
   Light Theme
========================================================== */

[data-theme="light"] {

    --background-color: #F4F7FC;

    --surface-color: rgba(255,255,255,.82);

    --surface-hover: rgba(255,255,255,.95);

    --glass-color: rgba(255,255,255,.75);

    --text-primary: #111827;

    --text-secondary: #374151;

    --text-muted: #6B7280;

    --border-color: rgba(0,0,0,.08);

    --border-light: rgba(0,0,0,.04);

    --glass-border: 1px solid rgba(0,0,0,.08);

    --gradient-dark:
        linear-gradient(
            180deg,
            #F4F7FC 0%,
            #E4EAF5 100%
        );

}

/* ==========================================================
   End Of File
========================================================== */