/* ==========================================================
   SYLFOW MARKET
   VARIABLES GLOBALES
========================================================== */

:root{

    /*======================================================
      COULEURS PRINCIPALES
    ======================================================*/

    --sf-primary:#16a34a;
    --sf-primary-dark:#15803d;
    --sf-primary-light:#dcfce7;

    --sf-secondary:#2563eb;
    --sf-accent:#f59e0b;

    --sf-success:#22c55e;
    --sf-danger:#ef4444;
    --sf-warning:#f59e0b;
    --sf-info:#0ea5e9;

    /*======================================================
      FOND
    ======================================================*/

    --sf-bg:#f8fafc;
    --sf-bg-light:#ffffff;
    --sf-bg-dark:#0f172a;

    --sf-surface:#ffffff;

    /*======================================================
      TEXTE
    ======================================================*/

    --sf-text:#0f172a;

    --sf-text-light:#475569;

    --sf-text-muted:#94a3b8;

    --sf-white:#ffffff;

    /*======================================================
      BORDURES
    ======================================================*/

    --sf-border:#e2e8f0;

    --sf-border-light:#f1f5f9;

    /*======================================================
      RAYONS
    ======================================================*/

    --sf-radius-xs:8px;

    --sf-radius-sm:12px;

    --sf-radius-md:18px;

    --sf-radius-lg:24px;

    --sf-radius-xl:32px;

    --sf-radius-pill:999px;

    /*======================================================
      OMBRES
    ======================================================*/

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

    --sf-shadow-sm:
        0 8px 24px rgba(15,23,42,.08);

    --sf-shadow-md:
        0 16px 40px rgba(15,23,42,.10);

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

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

    /*======================================================
      ESPACEMENTS
    ======================================================*/

    --sf-space-1:.25rem;
    --sf-space-2:.50rem;
    --sf-space-3:.75rem;
    --sf-space-4:1rem;
    --sf-space-5:1.5rem;
    --sf-space-6:2rem;
    --sf-space-7:3rem;
    --sf-space-8:4rem;
    --sf-space-9:5rem;
    --sf-space-10:6rem;

    /*======================================================
      TYPOGRAPHIE
    ======================================================*/

    --sf-font:
        "Inter",
        "Poppins",
        "Segoe UI",
        sans-serif;

    --sf-text-xs:.75rem;
    --sf-text-sm:.875rem;
    --sf-text-md:1rem;
    --sf-text-lg:1.125rem;
    --sf-text-xl:1.35rem;
    --sf-text-2xl:2rem;
    --sf-text-3xl:2.8rem;
    --sf-text-4xl:3.8rem;

    /*======================================================
      POIDS
    ======================================================*/

    --sf-fw-regular:400;
    --sf-fw-medium:500;
    --sf-fw-semibold:600;
    --sf-fw-bold:700;
    --sf-fw-black:800;

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

    --sf-transition:
        all .30s ease;

    --sf-transition-fast:
        all .18s ease;

    --sf-transition-slow:
        all .50s ease;

    /*======================================================
      LARGEURS
    ======================================================*/

    --sf-container:1320px;

    --sf-navbar-height:86px;

    --sf-hero-height:760px;

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

    --sf-z-dropdown:1000;

    --sf-z-navbar:1050;

    --sf-z-modal:2000;

}