/* =========================================================
   FOLLOWMYTRAVELS — GLOBAL DESIGN SYSTEM
   ========================================================= */

@import url(
    "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap"
);


:root {

    /* =========================
       COLORS
       ========================= */

    --color-bg: #FFFFFF;

    --color-surface: #EDF6F7;

    --color-dark: #2B2D42;

    --color-mint: #68EDC6;

    --color-yellow: #F7D85A;

    --color-aqua: #90F3FF;

    --color-muted: #6D7285;

    --color-white: #FFFFFF;


    /* =========================
       TEXT COLORS
       ========================= */

    --text-primary: #2B2D42;

    --text-secondary: #6D7285;

    --text-light: #FFFFFF;


    /* =========================
       FONTS
       ========================= */

    --font-primary:
        "DM Sans",
        sans-serif;

    --font-editorial:
        "Playfair Display",
        serif;


    /* =========================
       SITE WIDTHS
       ========================= */

    --container: 1240px;

    --container-wide: 1360px;


    /* =========================
       BORDER RADIUS
       ========================= */

    --radius-small: 8px;

    --radius-medium: 16px;

    --radius-large: 28px;


    /* =========================
       SHADOWS
       ========================= */

    --shadow-soft:
        0 15px 40px rgba(43, 45, 66, 0.07);

    --shadow-medium:
        0 22px 55px rgba(43, 45, 66, 0.12);

    --shadow-strong:
        0 30px 80px rgba(43, 45, 66, 0.16);
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

html {
    font-family: var(--font-primary);
}


body {
    margin: 0;

    background: var(--color-bg);

    color: var(--text-primary);

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

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


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


/* Editorial text helper */

.font-editorial {
    font-family: var(--font-editorial);
}


/* Italic editorial accent */

.font-editorial-italic {
    font-family: var(--font-editorial);

    font-style: italic;
}