/* =========================================================
   YAIDEL DESIGN SYSTEM
========================================================= */

:root {

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

    /*
     * Main Yaidel accent.
     * Used for branded highlights, gradients and selected
     * interface elements.
     */
    --yaidel-accent: #01a5b2;

    /*
     * Main action color.
     * Used primarily for CTAs and important interactive
     * elements.
     */
    --yaidel-primary: #0fb3bd /*#18c5cb*/;

    /*
     * Primary dark color.
     * Used for headings, dark sections and strong contrast.
     */
    --yaidel-dark: #202020;


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

    --yaidel-text: #202020;

    --yaidel-muted: #667085;

    --yaidel-text-soft: #8b949e;


    /* =====================================================
       SURFACE COLORS
    ===================================================== */

    --yaidel-white: #ffffff;

    --yaidel-soft: #f6fafb;

    --yaidel-surface: #ffffff;

    --yaidel-surface-soft: #f8fafb;

    --yaidel-border: #e5eaed;


    /* =====================================================
       PRODUCT COLOR PALETTE
       
       Secondary colors used throughout the website to
       distinguish modules, business functions, charts,
       statistics and product interface elements.
    ===================================================== */

    --yaidel-blue: #2563eb;

    --yaidel-green: #16a34a;

    --yaidel-amber: #f59e0b;

    --yaidel-teal: #0f766e;

    --yaidel-indigo: #4f46e5;

    --yaidel-pink: #db2777;

    --yaidel-red: #ef4444;

    --yaidel-purple: #7c3aed;

    --yaidel-slate: #334155;


    /* =====================================================
       SOFT PRODUCT COLORS
       
       These should be preferred for icon containers,
       badges, subtle backgrounds and small interface
       accents.
    ===================================================== */

    --yaidel-blue-soft:
        rgba(37, 99, 235, 0.09);

    --yaidel-green-soft:
        rgba(22, 163, 74, 0.10);

    --yaidel-amber-soft:
        rgba(245, 158, 11, 0.11);

    --yaidel-teal-soft:
        rgba(15, 118, 110, 0.10);

    --yaidel-indigo-soft:
        rgba(79, 70, 229, 0.09);

    --yaidel-pink-soft:
        rgba(219, 39, 119, 0.09);

    --yaidel-red-soft:
        rgba(239, 68, 68, 0.09);

    --yaidel-purple-soft:
        rgba(124, 58, 237, 0.09);

    --yaidel-slate-soft:
        rgba(51, 65, 85, 0.09);


    /* =====================================================
       SEMANTIC MODULE COLORS
       
       Section CSS should preferably use these variables
       instead of raw color variables.
       
       Example:
       
       color: var(--yaidel-inventory);
       background: var(--yaidel-inventory-soft);
       
       This allows module colors to be changed globally
       without editing every section stylesheet.
    ===================================================== */


    /* -----------------------------------------------------
       INVENTORY / ITEMS
    ----------------------------------------------------- */

    --yaidel-inventory:
        var(--yaidel-blue);

    --yaidel-inventory-soft:
        var(--yaidel-blue-soft);


    /* -----------------------------------------------------
       SALES
    ----------------------------------------------------- */

    --yaidel-sales:
        var(--yaidel-green);

    --yaidel-sales-soft:
        var(--yaidel-green-soft);


    /* -----------------------------------------------------
       POINT OF SALE
    ----------------------------------------------------- */

    --yaidel-pos:
        var(--yaidel-pink);

    --yaidel-pos-soft:
        var(--yaidel-pink-soft);


    /* -----------------------------------------------------
       PURCHASING
    ----------------------------------------------------- */

    --yaidel-purchasing:
        var(--yaidel-amber);

    --yaidel-purchasing-soft:
        var(--yaidel-amber-soft);


    /* -----------------------------------------------------
       SUPPLIERS
    ----------------------------------------------------- */

    --yaidel-suppliers:
        var(--yaidel-amber);

    --yaidel-suppliers-soft:
        var(--yaidel-amber-soft);


    /* -----------------------------------------------------
       CUSTOMERS
    ----------------------------------------------------- */

    --yaidel-customers:
        var(--yaidel-green);

    --yaidel-customers-soft:
        var(--yaidel-green-soft);


    /* -----------------------------------------------------
       STAFF
    ----------------------------------------------------- */

    --yaidel-staff:
        var(--yaidel-teal);

    --yaidel-staff-soft:
        var(--yaidel-teal-soft);


    /* -----------------------------------------------------
       INVOICES
    ----------------------------------------------------- */

    --yaidel-invoices:
        var(--yaidel-purple);

    --yaidel-invoices-soft:
        var(--yaidel-purple-soft);


    /* -----------------------------------------------------
       QUOTATIONS
    ----------------------------------------------------- */

    --yaidel-quotations:
        var(--yaidel-slate);

    --yaidel-quotations-soft:
        var(--yaidel-slate-soft);


    /* -----------------------------------------------------
       REPORTS / ANALYTICS
    ----------------------------------------------------- */

    --yaidel-reports:
        var(--yaidel-indigo);

    --yaidel-reports-soft:
        var(--yaidel-indigo-soft);


    /* -----------------------------------------------------
       EXPENSES
    ----------------------------------------------------- */

    --yaidel-expenses:
        var(--yaidel-red);

    --yaidel-expenses-soft:
        var(--yaidel-red-soft);


    /* -----------------------------------------------------
       ACCOUNTING / FINANCE
    ----------------------------------------------------- */

    --yaidel-finance:
        var(--yaidel-slate);

    --yaidel-finance-soft:
        var(--yaidel-slate-soft);


    /* -----------------------------------------------------
       ORGANIZATION / BUSINESS
    ----------------------------------------------------- */

    --yaidel-organization:
        var(--yaidel-teal);

    --yaidel-organization-soft:
        var(--yaidel-teal-soft);


    /* =====================================================
       STATUS COLORS
       
       These describe meaning rather than modules.
    ===================================================== */

    --yaidel-success:
        var(--yaidel-green);

    --yaidel-success-soft:
        var(--yaidel-green-soft);

    --yaidel-warning:
        var(--yaidel-amber);

    --yaidel-warning-soft:
        var(--yaidel-amber-soft);

    --yaidel-danger:
        var(--yaidel-red);

    --yaidel-danger-soft:
        var(--yaidel-red-soft);

    --yaidel-info:
        var(--yaidel-blue);

    --yaidel-info-soft:
        var(--yaidel-blue-soft);


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

    --yaidel-header-height: 76px;


    /* =====================================================
       GLOBAL BORDER RADIUS
       
       Shared values that can be reused by sections where
       appropriate without forcing every component to have
       the same shape.
    ===================================================== */

    --yaidel-radius-sm: 8px;

    --yaidel-radius-md: 12px;

    --yaidel-radius-lg: 18px;

    --yaidel-radius-xl: 24px;


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

    --yaidel-transition-fast:
        160ms ease;

    --yaidel-transition:
        250ms ease;

    --yaidel-transition-slow:
        400ms ease;

    
    
    
    
    
    
    
    
    
    
    
    
    
    



/* =====================================================
   RGB COLOR VALUES
   Used for gradients, overlays and rgba() backgrounds
===================================================== */

--yaidel-primary-rgb: 15,179,189;

--yaidel-accent-rgb: 1,165,178;

--yaidel-dark-rgb: 32,32,32;

--yaidel-white-rgb: 255,255,255;



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

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

--yaidel-shadow-sm:
    0 8px 24px rgba(0,0,0,.06);

--yaidel-shadow-md:
    0 16px 36px rgba(0,0,0,.08);

--yaidel-shadow-lg:
    0 24px 60px rgba(0,0,0,.12);

--yaidel-shadow-xl:
    0 36px 80px rgba(0,0,0,.18);



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

--yaidel-overlay-dark:

linear-gradient(
135deg,
rgba(var(--yaidel-dark-rgb), .92) 0%,
rgba(var(--yaidel-dark-rgb), .82) 45%,
rgba(var(--yaidel-dark-rgb), .65) 100%
);

--yaidel-overlay-primary:

radial-gradient(
circle at top left,
rgba(var(--yaidel-primary-rgb), .18),
transparent 32%
);

--yaidel-overlay-accent:

radial-gradient(
circle at bottom right,
rgba(var(--yaidel-accent-rgb), .14),
transparent 28%
);



/* =====================================================
   BACKGROUNDS
===================================================== */

--yaidel-section-light:

var(--yaidel-white);

--yaidel-section-soft:

var(--yaidel-soft);

--yaidel-section-dark:

var(--yaidel-dark);



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

--yaidel-section-padding:

100px;

--yaidel-section-padding-mobile:

72px;



/* =====================================================
   CONTENT WIDTHS
===================================================== */

--yaidel-container-width:

1280px;

--yaidel-copy-width:

620px;

--yaidel-text-width:

760px;



/* =====================================================
   IMAGE RADIUS
===================================================== */

--yaidel-image-radius:

28px;



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

--yaidel-card-background:

var(--yaidel-white);

--yaidel-card-border:

1px solid var(--yaidel-border);

--yaidel-card-shadow:

var(--yaidel-shadow-md);



/* =====================================================
   GLASS EFFECTS
===================================================== */

--yaidel-glass-background:

rgba(255,255,255,.08);

--yaidel-glass-border:

rgba(255,255,255,.12);

--yaidel-glass-blur:

12px;



/* =====================================================
   ICON CONTAINERS
===================================================== */

--yaidel-icon-size-sm:

42px;

--yaidel-icon-size-md:

54px;

--yaidel-icon-size-lg:

68px;



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

--yaidel-button-height:

52px;

--yaidel-button-padding:

0 26px;



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

--yaidel-gap-sm:

12px;

--yaidel-gap-md:

20px;

--yaidel-gap-lg:

32px;

--yaidel-gap-xl:

48px;






    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   DOCUMENT
========================================================= */

html {
    width: 100%;

    scroll-behavior: smooth;
}


/* =========================================================
   BODY
========================================================= */

body {
    width: 100%;
    min-height: 100%;

    margin: 0;

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    color: var(--yaidel-text);

    background:
        var(--yaidel-white);

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;

    overflow-x: hidden;
}


/* =========================================================
   MEDIA
========================================================= */

img,
picture,
svg,
video {
    display: block;

    max-width: 100%;
}


/* =========================================================
   LINKS
========================================================= */

a {
    color: inherit;

    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   BUTTONS / INPUTS
========================================================= */

button,
input,
textarea,
select {
    font: inherit;
}

button {
    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   FRONTEND PAGE
========================================================= */

.frontend-main {
    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}








































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

.yaidel-container{

    width:
        min(
            var(--yaidel-container-width),
            calc(100% - 40px)
        );

    margin-inline:auto;

}



/* =====================================================
   TEXT WIDTH
===================================================== */

.yaidel-copy{

    max-width:
        var(--yaidel-copy-width);

}

.yaidel-text{

    max-width:
        var(--yaidel-text-width);

}



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

.yaidel-section{

    padding:
        var(--yaidel-section-padding)
        0;

}



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

@media (max-width:768px){

    .yaidel-section{

        padding:
            var(--yaidel-section-padding-mobile)
            0;

    }

}