/*!
 * Template:  MissCarmine version 2.0.0
 * File:      Configuration file
 * Copyright: © 2025 Bahit & Bahit Ltd.
 * Licence:   All rights reserved.
 */

/* FONT FAMILY FILES */
@font-face {
    font-display: swap;
    font-family: "BrandFont";
    font-style: normal;
    font-weight: 400;
    src: url('/media/fonts/brand-name-subset.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "SloganFont";
    font-style: normal;
    font-weight: 700;
    src: url('/media/fonts/brand-slogan.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "TextFont";
    font-style: normal;
    font-weight: 400;
    src: url('/media/fonts/text-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "TextFont";
    font-style: normal;
    font-weight: 700;
    src: url('/media/fonts/text-bold.woff2') format('woff2');
}

/* BRAND VARIABLES */
:root {

    /* Font names */
    --font-brand: "BrandFont";
    --font-slogan: "SloganFont";
    --font-text: "TextFont";
    --font-title: "TextFont";

    /* Font sizes at scale */
    --base-size: 16;
    --rescaling-font-size: clamp(1rem, 1.1713vw,
        calc(70.464 / var(--base-size) * 1rem));

    --xxs-font-size: calc(12 / var(--base-size) * 1rem);
    --xs-font-size: calc(14 / var(--base-size) * 1rem);
    --s-font-size: calc(15 / var(--base-size) * 1rem);
    --m-font-size: calc(16 / var(--base-size) * 1rem);
    --l-font-size: calc(18 / var(--base-size) * 1rem);
    --xl-font-size: calc(40 / var(--base-size) * 1rem);
    --xxl-font-size: calc(64 / var(--base-size) * 1rem);

    /* Colour palette */
    --primary-brand-colour: #292745;
    --secondary-brand-colour: #8fa8c8;
    --emphasis-colour: #ba5031;  /* c25333 */
    --dark-colour: #444;  /* 555 */
    --neutral-colour: #666; /* 888 */
    --light-colour: #f6f6f6;
    --whitest-colour: #fff;

    /* Others */
    --border-width: calc(1 / var(--base-size) * 1rem);
    --standard-hmargin: calc(14 / var(--base-size) * 1rem);
    --standard-wmargin: calc(45 / var(--base-size) * 1rem);

    /* Auxiliary variables */
    --fluid-increment-factor: 3;
    --viewport-breakpoint: 959px;
    --fake-preferred-size: calc((100vw - var(--viewport-breakpoint)) * 1000);
}


/* TEMPLATE VARIABLES */
body {
    --bg: var(--whitest-colour);
    --font: var(--font-text);
    --size: var(--m-font-size);
}

body > nav {
    --bg: var(--primary-brand-colour);
    --color: var(--whitest-colour);
    --size: clamp(0px, var(--fake-preferred-size), var(--l-font-size));
}

body > nav > a {
    --color: var(--whitest-colour);
}

header {
    --bg: var(--whitest-colour);
    --color: var(--primary-brand-colour);
}

header > p:nth-child(2) {
    --color: var(--secondary-brand-colour);
    --font: var(--font-slogan);
    --shadow: var(--whitest-colour);
    --size: var(--xs-font-size);
}

header > p:nth-child(3) {
    --color: var(--secondary-brand-colour);
    --font: var(--font-slogan);
    --shadow: var(--whitest-colour);
    --size: var(--xxs-font-size);
}

header > p:nth-child(4) {
    --font: var(--font-brand);
    --shadow: var(--whitest-colour);

    --min: calc(var(--xxl-font-size) / 2);
    --size: clamp(
        var(--min),
        calc(var(--min) + var(--fluid-increment-factor) * 1vw),
        var(--xxl-font-size)
    );
}

header > p:nth-child(4) > sup {
    --font: var(--font-slogan);
    --size: var(--s-font-size);
}

main {
    --bg: var(--whitest-colour);
    --color: var(--neutral-colour);
}

main > h1 {
    --color: var(--primary-brand-colour);

    --min: calc(var(--xl-font-size) / 2);
    --size: clamp(
        var(--min),
        calc(var(--min) + var(--fluid-increment-factor) * 1vw),
        var(--xl-font-size)
    );
}

footer {
    --bg: var(--primary-brand-colour);
    --color: var(--whitest-colour);
}

footer a {
    --color: var(--whitest-colour);
}

footer nav {
    --size: var(--s-font-size);
}

footer nav > a {
    --color: var(--whitest-colour);
}

footer nav > a:hover {
    --color: var(--emphasis-colour);
}

footer > div > p {
    --size: var(--xs-font-size);
}

/* HOME VARIABLES */
main > section > div > h2 {
    --color: var(--primary-brand-colour);
    --size: var(--l-font-size);
}

main > section > div > a {
    --bg: var(--emphasis-colour);
    --color: var(--whitest-colour);
    --size: var(--xs-font-size);
}

main > section > div > a:hover {
    --bg: var(--primary-brand-colour);
}