:root {
    /*
    |--------------------------------------------------------------------------
    | Treasure Pelo Industries Brand Colours
    |--------------------------------------------------------------------------
    */

    --color-gold: #b08014;
    --color-gold-light: #d6a324;
    --color-gold-dark: #7a560c;

    --color-black: #101112;
    --color-charcoal: #1c1d1f;
    --color-dark-grey: #3a3a3a;
    --color-grey: #777777;
    --color-light-grey: #f3f4f5;
    --color-border: #e1e1e1;

    --color-white: #ffffff;
    --color-off-white: #fafafa;

    /*
    |--------------------------------------------------------------------------
    | Semantic Colours
    |--------------------------------------------------------------------------
    */

    --color-primary: var(--color-gold);
    --color-primary-light: var(--color-gold-light);
    --color-primary-dark: var(--color-gold-dark);

    --color-text: #222222;
    --color-text-muted: #666666;
    --color-heading: #151515;

    --color-bg: var(--color-white);
    --color-bg-soft: var(--color-off-white);
    --color-bg-dark: var(--color-black);

    /*
    |--------------------------------------------------------------------------
    | Typography
    |--------------------------------------------------------------------------
    */

    --font-primary: "Inter", "Segoe UI", Arial, sans-serif;
    --font-heading: "Montserrat", "Segoe UI", Arial, 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.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.25rem;

    --line-height-base: 1.7;
    --line-height-heading: 1.2;

    /*
    |--------------------------------------------------------------------------
    | Font Weights
    |--------------------------------------------------------------------------
    */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;

    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    */

    --container-width: 1200px;
    --container-padding: 20px;

    --section-padding: 90px;
    --section-padding-sm: 60px;

    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    --main-header-height-desktop: 82px;
    --main-header-height-tablet: 72px;
    --main-header-height-mobile: 66px;
    --header-z-index: 1000;

    /*
    |--------------------------------------------------------------------------
    | Border Radius
    |--------------------------------------------------------------------------
    */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 999px;

    /*
    |--------------------------------------------------------------------------
    | Shadows
    |--------------------------------------------------------------------------
    */

    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 12px 35px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 55px rgba(0, 0, 0, 0.18);

    /*
    |--------------------------------------------------------------------------
    | Transitions
    |--------------------------------------------------------------------------
    */

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-normal: var(--transition-base);
}