/* ==========================================================
   SimpleAIHub Design System
   Version: 1.0
========================================================== */

:root{

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

    --primary:#14B8A6;
    --primary-dark:#0F766E;
    --primary-light:#ECFEFF;

    --secondary:#0F172A;
    --secondary-light:#1E293B;

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

    --text:#111827;
    --text-light:#64748B;
    --text-muted:#94A3B8;

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

    --white:#FFFFFF;

    --background:#F8FAFC;

    --surface:#FFFFFF;

    --border:#E5E7EB;

    /* ==========================================
       Status Colors
    ========================================== */

    --success:#16A34A;

    --warning:#F59E0B;

    --danger:#DC2626;

    --info:#0EA5E9;

    /* ==========================================
       Typography
    ========================================== */

    --font-family:'Inter',sans-serif;

    --font-size-xs:12px;

    --font-size-sm:14px;

    --font-size-base:16px;

    --font-size-lg:18px;

    --font-size-xl:20px;

    --font-size-2xl:24px;

    --font-size-3xl:32px;

    --font-size-4xl:42px;

    --font-size-5xl:56px;

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

    --font-regular:400;

    --font-medium:500;

    --font-semibold:600;

    --font-bold:700;

    --font-black:800;

    /* ==========================================
       Line Height
    ========================================== */

    --line-tight:1.2;

    --line-normal:1.6;

    --line-loose:1.8;

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

    --radius-sm:6px;

    --radius-md:10px;

    --radius-lg:16px;

    --radius-xl:24px;

    --radius-round:999px;

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

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

    --shadow-md:0 8px 24px rgba(0,0,0,.08);

    --shadow-lg:0 20px 40px rgba(0,0,0,.12);

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

    --container:1280px;

    --header-height:80px;

    --sidebar-width:300px;

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

    --space-xs:4px;

    --space-sm:8px;

    --space-md:16px;

    --space-lg:24px;

    --space-xl:32px;

    --space-2xl:48px;

    --space-3xl:64px;

    --space-4xl:96px;

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

    --transition-fast:.2s ease;

    --transition:.3s ease;

    --transition-slow:.5s ease;

}