@font-face {
    font-family: BricolageGrotesque;
    src: url('/fonts/BricolageGrotesque.ttf');
    font-display: swap;
}

/* THEME TOKENS */
:root {
    /* Palette */
    --white-color: #ffffff;
    --section-bg-color: #f9f9f9;
    --dark-color: #212529;
    --p-color: rgba(33, 37, 41, 0.7);
    --primary-color: #0d6efd;
    --primary-strong-color: #0a58ca;
    --border-color: rgba(33, 37, 41, 0.12);

    /* Typography scale */
    --font-weight: 200;
    --font-base: 1.041rem;
    --font-small: 0.92rem;
    --font-large: 1.1rem;

    /* Spacing (rem scale) */
    --space-1: 0.35rem;
    --space-2: 0.65rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.25rem;

    /* Radius */
    --radius-sm: 0.35rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;

    /* Shadows */
    --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-strong: 0 16px 36px rgba(27, 110, 194, 0.14);

    /* Typography */
    --font-family-base: BricolageGrotesque;
}

html, body {
    font-family: var(--font-family-base), sans-serif;
    font-weight: var(--font-weight);
    font-size: var(--font-base);
    color: var(--dark-color);
}

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