/* =========================================================
   CABS / THE JEWEL AND THE LAKE
   CENTRAL WEBSITE & PHP STYLESHEET
   ========================================================= */


/* ---------------------------------------------------------
   GOOGLE FONT
   --------------------------------------------------------- */

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


/* ---------------------------------------------------------
   GLOBAL VARIABLES
   Later kunnen we hier kleuren enz. centraal aanpassen.
   --------------------------------------------------------- */

:root {
    --cabs-font: "Inter", Arial, Helvetica, sans-serif;

    --cabs-text: #222222;
    --cabs-muted: #666666;

    --cabs-background: #ffffff;
    --cabs-border: #d9d9d9;

    --cabs-radius: 6px;
}


/* ---------------------------------------------------------
   GLOBAL TYPOGRAPHY
   --------------------------------------------------------- */

html,
body {
    font-family: var(--cabs-font);
}

body {
    color: var(--cabs-text);
    font-weight: 400;
}


/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--cabs-font);
    font-weight: 600;
}


/* ---------------------------------------------------------
   FORM ELEMENTS
   --------------------------------------------------------- */

input,
select,
textarea,
button {
    font-family: var(--cabs-font);
}


/* ---------------------------------------------------------
   LINKS
   Laat bestaande pagina-kleuren voorlopig ongemoeid.
   --------------------------------------------------------- */

a {
    font-family: inherit;
}


/* ---------------------------------------------------------
   BUTTON BASE
   Alleen algemene eigenschappen.
   Pagina-specifieke kleuren blijven voorlopig bestaan.
   --------------------------------------------------------- */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font-family: var(--cabs-font);
    font-weight: 500;
    cursor: pointer;
}


/* ---------------------------------------------------------
   FORM FIELDS
   --------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
    font-family: var(--cabs-font);
    font-weight: 400;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

table,
th,
td {
    font-family: var(--cabs-font);
}


/* ---------------------------------------------------------
   SMALL / MUTED TEXT
   --------------------------------------------------------- */

small,
.cabs-muted {
    font-family: var(--cabs-font);
    color: var(--cabs-muted);
}


/* ---------------------------------------------------------
   USEFUL FONT WEIGHTS
   --------------------------------------------------------- */

.cabs-regular {
    font-weight: 400;
}

.cabs-medium {
    font-weight: 500;
}

.cabs-semibold {
    font-weight: 600;
}

.cabs-bold {
    font-weight: 700;
}