/* ==========================================
   SHREELABS DESIGN SYSTEM
   ========================================== */

   :root {

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

    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;

    --secondary-color: #14b8a6;
    --secondary-dark: #0f766e;

    --accent-color: #6366f1;

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

    --background-color: #f8fafc;
    --surface-color: #ffffff;
    --surface-light: #f1f5f9;

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

    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-light: #6b7280;
    --text-white: #ffffff;

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

    --border-color: #e5e7eb;
    --border-light: #f3f4f6;

    /* ======================================
       SUCCESS
    ====================================== */

    --success-color: #16a34a;
    --warning-color: #f59e0b;
    --danger-color: #dc2626;

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

    --font-heading: "Poppins", sans-serif;
    --font-body: "Inter", sans-serif;

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

    --fs-hero: 3.5rem;
    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 2rem;
    --fs-h4: 1.5rem;

    --fs-large: 1.25rem;
    --fs-body: 1rem;
    --fs-small: .9rem;

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

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;

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

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

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

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 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 50px rgba(0, 0, 0, .12);

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

    --transition-fast: .2s ease;
    --transition-normal: .35s ease;
    --transition-slow: .5s ease;

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

    --container-width: 1200px;

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

    --header-height: 80px;

}