@import url('navbar.css');
@import url('reusables.css');
@import url('home.css');
@import url('booker.css');


/* CSS Variables used by the navbar */
:root {
    --color-1: #ffffff;
    --color-1-1: #E6E9EF;
    --color-1-2: #ABB0AD;
    --color-1-3: #A29E9A;

    --color-2-a: #18191B;
    --color-2: #18191B;
    --color-2-1: #20252E;
    --color-2-1-a: #181d24ee;

    --color-3: #7B9F78;
    --color-3-1: #4A5744;
    --color-3-2: #1C5D99;

    --bg-2-1: var(--color-2-1);
    --bg-2-1-a: var(--color-2-1-a);

    --header-height: 4.375rem;
    --form-spacing: 20px;
    --animation-duration: 300ms;
    --calendar-width: 15.625rem;
    --calendar-spacing: 0.5rem;

    --multiform-bar-width: 180px;
    --nav-height: 70px;
    --hero-height-lg: 600px;
    --hero-height-md: 400px;

    --max-width-xl: 1500px;
    --max-width-lg: 1200px;
    --max-width-md: 900px;
    --max-width-sm: 600px;

    --space-100: 100px;
    --space-80: 80px;
    --space-64: 64px;
    --space-50: 50px;
    --space-40: 40px;
    --space-30: 30px;
    --space-24: 24px;
    --space-16: 16px;
    --space-12: 12px;
    --space-10: 10px;
    --space-5: 5px;
    --space-6: 6px;

    --txt-56: 56px;
    --txt-40: 40px;
    --txt-32: 32px;
    --txt-28: 28px;
    --txt-20: 20px;
    --txt-18: 18px;
    --txt-16: 16px;
    --txt-14: 14px;

    --brad-4: 4px;
    --brad-6: 6px;
    --brad-8: 8px;
    --brad-12: 12px;
    --brad-20: 20px;
    --brad-99: 99px;

    --shadow-md: 0 0 12px;
    --shadow-lg: 0 0 22px;

    --primary-color: var(--color-4);
    --primary-hover: var(--color-4-1);
    --accent-color: var(--color-3);
    --success-color: var(--color-5);
    --text-dark: var(--color-1);
    --text-light: var(--color-1-3);
    --text-muted: var(--color-1-2);
    --border-color: var(--color-2-4);
    --bg-light: var(--color-2-2);
    --bg-inset: var(--color-2-3);
    --surface: var(--color-2-1);
    --surface-raised: var(--color-2-2);
    --white: var(--color-1);
    --selected-bg: rgba(0, 178, 202, 0.12);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg-booking: 0 12px 40px rgba(0, 0, 0, 0.5);
}

@font-face {
    font-family: roboto;
    font-display: swap;
    src: url('../fonts/Roboto-VariableFont.ttf');
}

* {
    scrollbar-color: var(--color-2-4) var(--color-2);
    scrollbar-width: thin;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow-x: hidden;
    background: var(--color-2-1);
    color: var(--color-1);
}

main {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

a {
    text-decoration: none;
}