@font-face {
    font-family: 'Namdhinggo';
    src: url('../fonts/Namdhinggo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Namdhinggo';
    src: url('../fonts/Namdhinggo-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Namdhinggo';
    src: url('../fonts/Namdhinggo-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Namdhinggo';
    src: url('../fonts/Namdhinggo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Namdhinggo';
    src: url('../fonts/Namdhinggo-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/** ROOT STYLE CONFIGURATIONS
 ******************************************************/
:root {

    /* ==============================
       COLOURS
    ============================== */

    /* Backgrounds */
    --site-background: 224 232 226;
    --content-background: 252 249 238;
    --section-background-alt: 237 219 168;

    /* Typography colours */
    --text-colour: 32 33 31;
    --text-muted: 100 105 100;
    --heading-colour: 42 63 63;
    --heading-accent: 168 131 54;

    /* Brand */
    --brand-primary: 42 63 63;
    --brand-secondary: 211 189 143;
    --brand-accent: 173 192 184;

    /* Links */
    --link-colour: 137 87 0;
    --link-hover: 110 70 0;

    /* Buttons */
    --button-background: var(--brand-primary);
    --button-colour: 255 255 255;
    --button-hover-background: 30 50 50;

    /* Borders */
    --border-colour: 0 0 0 / 0.12;
    --border-subtle: 0 0 0 / 0.06;

    /* Utility states */
    --colour-success: 120 180 140;
    --colour-warning: 254 225 147;
    --colour-danger: 255 107 113;

    /* Shadows */
    --shadow-colour: 0 0 0 / 0.08;


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

    --font-primary: "Amster", sans-serif;
    --font-heading: "Namdhinggo", sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.375rem;
    --font-size-xl: 1.75rem;
    --font-size-xxl: 2.5rem;
    --font-size-hero: 3.5rem;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.7;


    /* ==============================
       SPACING
    ============================== */

    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-xxl: 72px;


    /* ==============================
       LAYOUT
    ============================== */

    --page-max-width: 1200px;
    --page-gutter: 20px;

    --header-height: 90px;

    --section-padding: var(--space-xl);


    /* ==============================
       COMPONENTS
    ============================== */

    --button-padding-y: 10px;
    --button-padding-x: 18px;

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 14px;

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;

}