:root {
    /* Color variables */
    --bulma-primary-h: 163deg;
    --bulma-primary-s: 89%;
    --bulma-primary-l: 24%;
    --bulma-primary: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
    --bulma-link: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 45%);
    --bulma-background: #FFFFFF;
    --bulma-scheme-main: #F8FBF9;
    --bulma-border: #5c626eB3;
    --bulma-text: #31444c;
    --bulma-title-color: rgb(7, 16, 34);

    /* Cards & UI */
    --bulma-radius-large: 14px;
    --bulma-box-shadow: 0 2px 12px 0 rgba(60, 80, 120, 0.05);

    /* Typography */
    --bulma-family-primary: 'Inter', sans-serif;
    --bulma-family-title: 'IBM Plex Serif', serif;
    --bulma-title-weight: 700;
}

/* Example extra styling for cards and buttons */
.card {
    border-radius: var(--bulma-radius-large);
    box-shadow: var(--bulma-box-shadow);
    border: 1px solid var(--bulma-border);
    padding: 1.5rem;
}

.button.is-primary {
    background: var(--bulma-primary);
    color: #fff;
    font-weight: 500;
    font-family: var(--bulma-family-primary);
}

.button.is-light {
    background: #fff;
    border: 1px solid var(--bulma-border);
    color: var(--bulma-primary);
}

/* Typography overrides */
.title,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bulma-family-title);
    color: var(--bulma-title-color);
    letter-spacing: 0.01em;

}
body, .content, p {
    font-family: var(--bulma-family-primary);
    color: var(--bulma-text);
}

/* Layout spacing */
.section, .hero {
    background: var(--bulma-background);
    padding: 2.5rem 0;
}