/* ===========================================================
   AISUBIO DESIGN SYSTEM
   Version : 3.0 Production
=========================================================== */

:root{

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

--color-primary:#2563eb;
--color-primary-hover:#1d4ed8;
--color-primary-light:#60a5fa;
--color-primary-soft:#dbeafe;

--color-secondary:#7c3aed;
--color-secondary-hover:#6d28d9;
--color-secondary-light:#a78bfa;
--color-secondary-soft:#ede9fe;

--color-accent:#06b6d4;
--color-accent-hover:#0891b2;
--color-accent-light:#67e8f9;
--color-accent-soft:#cffafe;

--color-success:#16a34a;
--color-success-light:#22c55e;
--color-success-soft:#dcfce7;

--color-warning:#f59e0b;
--color-warning-light:#fbbf24;
--color-warning-soft:#fef3c7;

--color-danger:#ef4444;
--color-danger-light:#f87171;
--color-danger-soft:#fee2e2;

--color-info:#0284c7;
--color-info-light:#38bdf8;
--color-info-soft:#e0f2fe;


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

--bg-body:#f8fafc;
--bg-surface:#ffffff;
--bg-card:#ffffff;
--bg-card-hover:#f8fafc;
--bg-elevated:#ffffff;
--bg-muted:#f1f5f9;

--bg-glass:rgba(255,255,255,.72);
--bg-glass-strong:rgba(255,255,255,.90);


/* ===========================================================
   SURFACE SYSTEM
=========================================================== */

--surface-1:var(--bg-card);
--surface-2:var(--bg-surface);
--surface-3:var(--bg-muted);


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

--text-primary:#0f172a;
--text-secondary:#475569;
--text-muted:#94a3b8;
--text-disabled:#cbd5e1;
--text-white:#ffffff;

--text-heading:var(--text-primary);
--text-body:var(--text-secondary);
--text-caption:var(--text-muted);


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

--border-color:rgba(15,23,42,.08);
--border-light:rgba(255,255,255,.45);
--border-strong:rgba(15,23,42,.12);

--border-focus:#3b82f6;
--border-hover:rgba(37,99,235,.22);


/* ===========================================================
   GRADIENT
=========================================================== */

--gradient-primary:
linear-gradient(
135deg,
#2563eb,
#3b82f6,
#60a5fa
);

--gradient-secondary:
linear-gradient(
135deg,
#7c3aed,
#a855f7
);

--gradient-hero:
linear-gradient(
135deg,
#2563eb,
#7c3aed
);

--gradient-card:
linear-gradient(
180deg,
rgba(255,255,255,.96),
rgba(255,255,255,.84)
);

--gradient-success:
linear-gradient(
135deg,
#16a34a,
#22c55e
);

--gradient-warning:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

--gradient-danger:
linear-gradient(
135deg,
#ef4444,
#f87171
);

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

--font-family:
"Inter",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

--font-size-xs:.75rem;
--font-size-sm:.875rem;
--font-size-base:1rem;
--font-size-lg:1.125rem;
--font-size-xl:1.25rem;

--font-size-2xl:
clamp(1.5rem,2vw,1.75rem);

--font-size-3xl:
clamp(2rem,3vw,2.5rem);

--font-size-4xl:
clamp(2.6rem,5vw,3.8rem);

--font-size-5xl:
clamp(3.2rem,6vw,4.6rem);

--font-size-display:
clamp(3.5rem,7vw,5.6rem);

--fw-thin:100;
--fw-light:300;
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-black:800;

--lh-tight:1.1;
--lh-normal:1.5;
--lh-relaxed:1.8;

--letter-tight:-.03em;
--letter-normal:0;
--letter-wide:.04em;


/* ===========================================================
   CONTAINER
=========================================================== */

--container-width:1320px;
--container-lg:1440px;
--container-md:1140px;
--container-sm:960px;

--container-padding:20px;


/* ===========================================================
   SECTION
=========================================================== */

--section-space:120px;
--section-space-lg:100px;
--section-space-md:88px;
--section-space-mobile:72px;


/* ===========================================================
   HEADER
=========================================================== */

--header-height:82px;
--header-height-scrolled:70px;
--header-blur:20px;


/* ===========================================================
   SIDEBAR
=========================================================== */

--sidebar-width:320px;


/* ===========================================================
   CARD
=========================================================== */

--card-radius:24px;
--card-radius-lg:30px;
--card-radius-sm:18px;

--card-padding:24px;
--card-gap:22px;


/* ===========================================================
   BUTTON
=========================================================== */

--button-height:56px;
--button-height-lg:62px;
--button-height-sm:46px;

--button-radius:18px;

--button-padding-x:28px;


/* ===========================================================
   INPUT
=========================================================== */

--input-height:58px;

--input-radius:16px;

--input-padding:18px;


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

--radius-xs:6px;
--radius-sm:10px;
--radius-md:14px;
--radius-lg:18px;
--radius-xl:24px;
--radius-2xl:30px;
--radius-3xl:36px;

--radius-round:999px;


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

--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:28px;
--space-8:32px;
--space-9:36px;
--space-10:40px;
--space-12:48px;
--space-14:56px;
--space-16:64px;
--space-18:72px;
--space-20:80px;
--space-24:96px;
--space-28:112px;
--space-32:128px;

/* ===========================================================
   SHADOW SYSTEM
=========================================================== */

--shadow-xs:
0 1px 2px rgba(15,23,42,.05);

--shadow-sm:
0 6px 16px rgba(15,23,42,.08);

--shadow-md:
0 14px 36px rgba(15,23,42,.12);

--shadow-lg:
0 24px 60px rgba(15,23,42,.16);

--shadow-xl:
0 40px 90px rgba(15,23,42,.20);

--shadow-2xl:
0 60px 140px rgba(15,23,42,.25);

--shadow-primary:
0 22px 55px rgba(37,99,235,.28);

--shadow-secondary:
0 22px 55px rgba(124,58,237,.25);

--shadow-success:
0 18px 45px rgba(22,163,74,.22);

--shadow-danger:
0 18px 45px rgba(239,68,68,.20);

--shadow-glow:
0 0 40px rgba(37,99,235,.20);

--shadow-glow-lg:
0 0 70px rgba(37,99,235,.28);

--sidebar-shadow:
0 30px 80px rgba(15,23,42,.20);


/* ===========================================================
   GLASS SYSTEM
=========================================================== */

--glass-blur:18px;

--glass-blur-lg:28px;

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

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


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

--transition-fast:
.18s cubic-bezier(.4,0,.2,1);

--transition-normal:
.30s cubic-bezier(.4,0,.2,1);

--transition-slow:
.55s cubic-bezier(.4,0,.2,1);

--transition-bounce:
.45s cubic-bezier(.22,1,.36,1);

--transition-spring:
.60s cubic-bezier(.22,1,.36,1);


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

--duration-fast:180ms;

--duration-normal:300ms;

--duration-medium:450ms;

--duration-slow:600ms;

--duration-slower:900ms;

--ease-standard:
cubic-bezier(.4,0,.2,1);

--ease-premium:
cubic-bezier(.22,1,.36,1);

--ease-bounce:
cubic-bezier(.34,1.56,.64,1);


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

--z-loader:99999;

--z-toast:9999;

--z-modal:9990;

--z-sidebar:9980;

--z-header:9970;

--z-dropdown:9960;

--z-tooltip:9950;

--z-overlay:9940;

--z-floating:9930;

--z-default:1;


/* ===========================================================
   ACCESSIBILITY
=========================================================== */

--focus-ring-width:3px;

--focus-ring-color:
rgba(37,99,235,.28);

--outline-offset:2px;

--tap-target:44px;


/* ===========================================================
   SCROLLBAR
=========================================================== */

--scrollbar-size:10px;

--scrollbar-track:transparent;

--scrollbar-thumb:#cbd5e1;

--scrollbar-thumb-hover:#94a3b8;


/* ===========================================================
   SKELETON
=========================================================== */

--skeleton-base:#e2e8f0;

--skeleton-highlight:#f8fafc;


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

--hero-max-width:680px;

--hero-image-size:520px;

--offer-card-width:320px;

--offer-image-ratio:16/10;

--modal-width:720px;

--dropdown-width:280px;

--navbar-gap:28px;

--footer-gap:64px;


/* ===========================================================
   SAFE AREA
=========================================================== */

--safe-top:
env(safe-area-inset-top,0px);

--safe-right:
env(safe-area-inset-right,0px);

--safe-bottom:
env(safe-area-inset-bottom,0px);

--safe-left:
env(safe-area-inset-left,0px);

}

/* ===========================================================
   DARK THEME
=========================================================== */

[data-theme="dark"]{

    --bg-body:#020617;

    --bg-surface:#0f172a;

    --bg-card:#111827;

    --bg-card-hover:#1e293b;

    --bg-elevated:#162033;

    --bg-muted:#1e293b;

    --bg-glass:rgba(15,23,42,.72);

    --bg-glass-strong:rgba(15,23,42,.88);


    --text-primary:#f8fafc;

    --text-secondary:#cbd5e1;

    --text-muted:#94a3b8;

    --text-disabled:#64748b;

    --text-white:#ffffff;


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

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

    --border-strong:rgba(255,255,255,.18);

    --border-focus:#60a5fa;

    --border-hover:rgba(96,165,250,.28);


    --gradient-card:
    linear-gradient(
        180deg,
        rgba(30,41,59,.96),
        rgba(15,23,42,.90)
    );

    --gradient-primary:
    linear-gradient(
        135deg,
        #2563eb,
        #60a5fa
    );

    --gradient-secondary:
    linear-gradient(
        135deg,
        #7c3aed,
        #a78bfa
    );

    --gradient-hero:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );


    --shadow-xs:
    0 2px 8px rgba(0,0,0,.25);

    --shadow-sm:
    0 10px 24px rgba(0,0,0,.35);

    --shadow-md:
    0 20px 48px rgba(0,0,0,.45);

    --shadow-lg:
    0 32px 72px rgba(0,0,0,.55);

    --shadow-xl:
    0 48px 120px rgba(0,0,0,.65);

    --shadow-2xl:
    0 60px 150px rgba(0,0,0,.72);

    --shadow-primary:
    0 24px 60px rgba(37,99,235,.42);

    --shadow-secondary:
    0 24px 60px rgba(124,58,237,.34);

    --shadow-glow:
    0 0 45px rgba(59,130,246,.25);

    --shadow-glow-lg:
    0 0 80px rgba(59,130,246,.30);


    --scrollbar-thumb:#334155;

    --scrollbar-thumb-hover:#475569;


    --skeleton-base:#1e293b;

    --skeleton-highlight:#334155;

}


/* ===========================================================
   COLOR SCHEME
=========================================================== */

:root{

    color-scheme:light;

}

[data-theme="dark"]{

    color-scheme:dark;

}


/* ===========================================================
   TEXT SELECTION
=========================================================== */

::selection{

    background:rgba(37,99,235,.20);

    color:inherit;

}

::-moz-selection{

    background:rgba(37,99,235,.20);

    color:inherit;

}


/* ===========================================================
   SCROLLBAR
=========================================================== */

*{

    scrollbar-width:thin;

    scrollbar-color:

        var(--scrollbar-thumb)

        var(--scrollbar-track);

}

::-webkit-scrollbar{

    width:var(--scrollbar-size);

    height:var(--scrollbar-size);

}

::-webkit-scrollbar-track{

    background:var(--scrollbar-track);

}

::-webkit-scrollbar-thumb{

    background:var(--scrollbar-thumb);

    border-radius:999px;

    border:2px solid transparent;

    background-clip:padding-box;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--scrollbar-thumb-hover);

    background-clip:padding-box;

}


/* ===========================================================
   REDUCED MOTION
=========================================================== */

@media(prefers-reduced-motion:reduce){

    *,

    *::before,

    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}


/* ===========================================================
   PRINT
=========================================================== */

@media print{

    :root{

        --shadow-xs:none;

        --shadow-sm:none;

        --shadow-md:none;

        --shadow-lg:none;

        --shadow-xl:none;

        --shadow-2xl:none;

        --shadow-primary:none;

        --shadow-secondary:none;

        --shadow-glow:none;

        --shadow-glow-lg:none;

    }

}


/* ===========================================================
   END OF VARIABLES
=========================================================== */