/* ==========================================================
   CONTEMPO DANCE ACADEMY
   DESIGN SYSTEM v1.0

   Contents
   ----------------------------------------------------------
   1. Root Variables
   2. Base
   3. Layout
========================================================== */


/* ==========================================================
   1. ROOT VARIABLES
========================================================== */

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

    box-sizing:border-box;

}

:focus-visible{

    outline: 2px solid var(--color-brand);

    outline-offset:4px;

}

:root {   

    /* ==========================
       Brand Colors
    ========================== */

    --color-brand: #7A2335;
    --color-brand-hover: #631C2B;

    --color-accent: #C8A45D;

    --color-white: #FFFFFF;

    --color-black: #1A1A1A;

    --color-text: #2C2C2C;
    --color-text-light: #6B7280;

    --color-background: #FFFFFF;
    --color-background-alt: #FAFAFA;

    --color-border: #E8E8E8;

    --color-overlay: rgba(0,0,0,.45);



    /* ==========================
       Typography
    ========================== */

    --font-family: "Manrope", sans-serif;

    --font-heading: "DM Sans", serif;
    --font-body: var(--font-family);



    /* ==========================
       Font Sizes
    ========================== */

    --font-size-display: clamp(2rem, 5vw, 4.25rem);

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

    --font-size-h2: clamp(2.4rem, 4vw, 3.5rem);

    --font-size-h3: clamp(1.8rem, 3vw, 2.4rem);

    --font-size-body-lg: 1.125rem;

    --font-size-body: 1rem;

    --font-size-small: .875rem;



    /* ==========================
       Font Weight
    ========================== */

    --font-weight-light: 300;

    --font-weight-regular: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;



    /* ==========================
       Line Height
    ========================== */

    --line-height-heading: 1.15;

    --line-height-body: 1.75;



    /* ==========================
       Spacing
    ========================== */

    --space-xs: .25rem;

    --space-sm: .5rem;

    --space-md: 1rem;

    --space-lg: 1.5rem;

    --space-xl: 2rem;

    --space-2xl: 3rem;

    --space-3xl: 4rem;

    --space-4xl: 6rem;

    --space-5xl: 8rem;



    /* ==========================
       Radius
    ========================== */

    --radius-sm: .5rem;

    --radius-md: 1rem;

    --radius-lg: 1.75rem;

    --radius-pill: 999px;



    /* ==========================
       Shadows
    ========================== */

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

    --shadow-md:
        0 15px 40px rgba(0,0,0,.08);

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



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



    --container-width: 1200px;

    --container-padding: 24px;



    /* ==========================
       Section Spacing
    ========================== */

    --section-padding: clamp(5rem, 8vw, 8rem);



    /* ==========================
       Animation
    ========================== */

    --transition-fast: .2s ease;

    --transition-normal: .35s ease;

    --transition-slow: .5s ease;

}



/* ==========================================================
   2. BASE
========================================================== */

html {

    scroll-padding-top: 110px;

    scroll-behavior: smooth;

}

body {

    min-height: 100vh;

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

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

    font-weight: var(--font-weight-regular);

    line-height: var(--line-height-body);

    color: var(--color-text);

    background: var(--color-background);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;

}

body.menu-open{

    overflow:hidden;

}

img {

    display: block;

    max-width: 100%;

    height: auto;

}

picture {

    display: block;

}

svg {

    display: block;

}

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition-fast);

}

button {

    padding: 0;

    font: inherit;

    color: inherit;

    background: none;

    border: none;

    cursor: pointer;

}

input,
textarea,
select {

    outline: none;

    font: inherit;

    color: inherit;

}

::selection {

    color: var(--color-white);

    background: var(--color-brand);

}



/* ==========================================================
   3. LAYOUT
========================================================== */

.container{

    width:100%;

    max-width:var(--container-width);

    margin-inline:auto;

    padding-inline:var(--container-padding);

}

.section {

    position: relative;

    padding-block: var(--section-padding);

}

.grid {

    display: grid;

}

.flex {

    display: flex;

}

.hidden {

    display: none !important;

}