/* ==========================================
   BASE
   Ramazan Market
========================================== */

/* ---------- Reset ---------- */

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

/* ---------- Root ---------- */

:root{

    /* Colors */

    --color-primary:#f59e0b;
    --color-primary-dark:#d97706;

    --color-secondary:#111827;

    --color-white:#ffffff;

    --color-bg:#f8fafc;

    --color-text:#374151;

    --color-border:#e5e7eb;

    --color-success:#22c55e;

    --color-danger:#ef4444;

    /* Radius */

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

    /* Shadow */

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

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

    /* Transition */

    --transition:.3s ease;

}

/* ---------- HTML ---------- */

html{

    scroll-behavior:smooth;

}

/* ---------- Body ---------- */

body{

    font-family:
        "Cairo",
        "Tajawal",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:16px;

    line-height:1.7;

    color:var(--color-text);

    background:var(--color-bg);

    overflow-x:hidden;

}

/* ---------- Images ---------- */

img{

    max-width:100%;

    height:auto;

    display:block;

}

/* ---------- Links ---------- */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/* ---------- Lists ---------- */

ul,
ol{

    list-style:none;

}

/* ---------- Buttons ---------- */

button{

    font:inherit;

    cursor:pointer;

    border:none;

    background:none;

}

/* ---------- Inputs ---------- */

input,
textarea,
select{

    font:inherit;

}

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

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

    color:var(--color-secondary);

    font-weight:700;

    line-height:1.2;

}

h1{

    font-size:clamp(2.5rem,5vw,4.5rem);

}

h2{

    font-size:clamp(2rem,4vw,3rem);

}

h3{

    font-size:1.5rem;

}

p{

    color:var(--color-text);

}

/* ---------- Selection ---------- */

::selection{

    background:var(--color-primary);

    color:#fff;

}

/* ---------- Focus ---------- */

:focus-visible{

    outline:3px solid var(--color-primary);

    outline-offset:3px;

}