/* ==========================================================
   Decor 'n' Sales Quotation & PI System
   Base Design System
   Version: 1.0
   ========================================================== */


/* ==========================================================
   Google Fonts
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap');


/* ==========================================================
   CSS Variables
   ========================================================== */

:root {

    /* ---------- Brand Colors ---------- */

    --primary: #0B6FB8;
    --primary-dark: #085A95;
    --primary-light: #DCEFFC;

    --secondary: #F7941D;
    --secondary-dark: #D97C05;
    --secondary-light: #FFF2DF;

    /* ---------- Semantic ---------- */

    --success: #28A745;
    --danger: #DC3545;
    --warning: #FFC107;
    --info: #17A2B8;

    /* ---------- Background ---------- */

    --bg-color: #F5F7FB;
    --surface: #FFFFFF;
    --surface-alt: #FAFBFC;

    /* ---------- Text ---------- */

    --text-dark: #1F2937;
    --text-light: #6B7280;
    --text-white: #FFFFFF;

    /* ---------- Borders ---------- */

    --border-color: #E5E7EB;

    /* ---------- Radius ---------- */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    /* ---------- Shadows ---------- */

    --shadow-sm:
        0 2px 6px rgba(0,0,0,.06);

    --shadow-md:
        0 6px 20px rgba(0,0,0,.08);

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

    /* ---------- Spacing ---------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* ---------- Typography ---------- */

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

    --transition: .25s ease;
}


/* ==========================================================
   Reset
   ========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


/* ==========================================================
   HTML
   ========================================================== */

html{

    scroll-behavior:smooth;

}


/* ==========================================================
   Body
   ========================================================== */

body{

    font-family:var(--font-body);

    background:var(--bg-color);

    color:var(--text-dark);

    line-height:1.6;

    min-height:100vh;

    font-size:15px;

    overflow-x:hidden;

}


/* ==========================================================
   Headings
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);

    color:var(--text-dark);

    font-weight:600;

    margin-bottom:12px;

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.6rem;

}

h3{

    font-size:1.3rem;

}


/* ==========================================================
   Paragraphs
   ========================================================== */

p{

    margin-bottom:12px;

    color:var(--text-light);

}


/* ==========================================================
   Links
   ========================================================== */

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--primary-dark);

}


/* ==========================================================
   Images
   ========================================================== */

img{

    max-width:100%;

    display:block;

}


/* ==========================================================
   Lists
   ========================================================== */

ul{

    list-style:none;

}


/* ==========================================================
   Container
   ========================================================== */

.container-fluid{

    padding-left:28px;

    padding-right:28px;

}


/* ==========================================================
   Utility Classes
   ========================================================== */

.text-primary{

    color:var(--primary)!important;

}

.text-secondary{

    color:var(--secondary)!important;

}

.text-muted{

    color:var(--text-light)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

.bg-secondary{

    background:var(--secondary)!important;

}

.bg-surface{

    background:var(--surface)!important;

}

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow-md{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

.rounded{

    border-radius:var(--radius-md);

}

.rounded-lg{

    border-radius:var(--radius-lg);

}

.rounded-xl{

    border-radius:var(--radius-xl);

}


/* ==========================================================
   Scrollbar
   ========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ECECEC;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/* ==========================================================
   Selection
   ========================================================== */

::selection{

    background:var(--secondary);

    color:white;

}