/*!
 * GENERATED BY engine — do not edit by hand
 * Regenerate with: engine site:build hiba-studio
 *
 * Typography role bindings for Hiba Studio.
 * Wrapped in :where() — zero specificity, so explicit block choices win.
 */

:where(.has-body-lg-font-size) {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    font-style: normal;
    line-height: 1.28;
}

:where(.has-body-md-font-size) {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.54;
}

:where(.has-body-sm-font-size) {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.36;
}

:where(.has-body-xs-font-size) {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.26;
}

:where(.has-mono-lg-font-size) {
    font-family: var(--wp--preset--font-family--mono);
    font-weight: 700;
    font-style: normal;
    line-height: 1.48;
}

:where(.has-mono-md-font-size) {
    font-family: var(--wp--preset--font-family--mono);
    font-weight: 700;
    font-style: normal;
    line-height: 1.48;
    letter-spacing: 0.0478em;
}

:where(.has-mono-sm-font-size) {
    font-family: var(--wp--preset--font-family--mono);
    font-weight: 700;
    font-style: normal;
    line-height: 1.48;
    letter-spacing: 0.0478em;
}

:where(.has-eyebrow-font-size) {
    font-family: var(--wp--preset--font-family--mono);
    font-weight: 700;
    font-style: normal;
    line-height: 1.48;
    letter-spacing: 0.068em;
    text-transform: uppercase;
}

:where(.has-eyebrow-sm-font-size) {
    font-family: var(--wp--preset--font-family--mono);
    font-weight: 700;
    font-style: normal;
    line-height: 1.48;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

:where(.has-display-xxl-font-size) {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 400;
    font-style: normal;
    line-height: 1.06;
}

:where(.has-display-xl-font-size) {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 400;
    font-style: normal;
    line-height: 1.08;
}

:where(.has-display-lg-font-size) {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 400;
    font-style: normal;
    line-height: 1.14;
}

:where(.has-display-md-font-size) {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 400;
    font-style: normal;
    line-height: 1.11;
}

:where(.has-display-sm-font-size) {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 400;
    font-style: normal;
    line-height: 1.21;
}

:where(.has-display-xs-font-size) {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 400;
    font-style: italic;
    line-height: 1.23;
}

/* Semantic role aliases — see settings.custom.color in theme.json:
 *   var(--wp--custom--color--canvas) = var(--wp--preset--color--blush-50)
 *   var(--wp--custom--color--surface-alt) = var(--wp--preset--color--blush-100)
 *   var(--wp--custom--color--surface-card) = var(--wp--preset--color--mist-50)
 *   var(--wp--custom--color--ink) = var(--wp--preset--color--sand-900)
 *   var(--wp--custom--color--ink-soft) = var(--wp--preset--color--red-600)
 *   var(--wp--custom--color--ink-inverse) = var(--wp--preset--color--mist-50)
 *   var(--wp--custom--color--brand-deep) = var(--wp--preset--color--sand-900)
 *   var(--wp--custom--color--brand-mid) = var(--wp--preset--color--gold-300)
 *   var(--wp--custom--color--accent) = var(--wp--preset--color--gold-500)
 *   var(--wp--custom--color--accent-soft) = var(--wp--preset--color--gold-400)
 *   var(--wp--custom--color--ink-on-accent) = var(--wp--preset--color--mist-50)
 *   var(--wp--custom--color--surface-dark) = var(--wp--preset--color--sand-900)
 *   var(--wp--custom--color--surface-inverse) = var(--wp--preset--color--sand-900)
 *   var(--wp--custom--color--ink-on-inverse) = var(--wp--preset--color--mist-50)
 */

/*
 * Colourways. html[data-palette="<key>"] repaints the role layer for every
 * descendant of body, which is where patterns read it; the parent theme
 * stamps the default key on <html> and ships the switcher (inc/palette.php).
 * [data-palette-only="<key>"] elements show only under their key (display);
 * [data-palette-layer="<key>"] elements fade out under any other key (opacity),
 * for stacked layers such as a hero photograph per colourway;
 * [data-palette-card="<key>"] elements get --engine-palette-active: 1 under it.
 */
[data-palette-layer], .is-palette-layer { transition: opacity var(--wp--custom--transition--slow, 450ms ease); }
@media (prefers-reduced-motion: reduce) { [data-palette-layer], .is-palette-layer { transition: none; } }
/* eclosion — Éclosion */
html[data-palette="eclosion"] body {
    --wp--custom--color--canvas: #FBF6F5;
    --wp--custom--color--surface-alt: #F5E9E7;
    --wp--custom--color--surface-card: #FFFFFF;
    --wp--custom--color--ink: #2A211E;
    --wp--custom--color--ink-soft: #7A6863;
    --wp--custom--color--ink-inverse: #FFFFFF;
    --wp--custom--color--brand-deep: #2A211E;
    --wp--custom--color--brand-mid: #F1A869;
    --wp--custom--color--accent: #F2541A;
    --wp--custom--color--accent-soft: #C99A80;
    --wp--custom--color--ink-on-accent: #FFFFFF;
    --wp--custom--color--surface-dark: #2A211E;
    --wp--custom--color--surface-inverse: #2A211E;
    --wp--custom--color--ink-on-inverse: #FFFFFF;
    --wp--preset--gradient--hero-glow: linear-gradient(180deg, #00000000 0%, #000000BF 100%);
    --wp--preset--gradient--panel: linear-gradient(170deg, #FDF1E7 0%, #F1A869 100%);
    --wp--preset--gradient--card: linear-gradient(180deg, #170D088C 0%, #CC571AB8 100%);
    --wp--preset--gradient--card2: linear-gradient(166deg, #232C11 0%, #C9A93E 100%);
    --wp--preset--gradient--card3: linear-gradient(166deg, #050912 0%, #0F2947 100%);
    --wp--preset--gradient--card4: linear-gradient(166deg, #031B30 0%, #6F868D 100%);
    --wp--preset--gradient--button: linear-gradient(180deg, #F2541A 0%, #F2541A 100%);
}
html[data-palette="eclosion"] [data-palette-only]:not([data-palette-only="eclosion"]) { display: none !important; }
html[data-palette="eclosion"] [data-palette-layer]:not([data-palette-layer="eclosion"]), html[data-palette="eclosion"] .is-palette-layer:not(.is-palette-layer-eclosion) { opacity: 0; pointer-events: none; }
html[data-palette="eclosion"] [data-palette-card="eclosion"], html[data-palette="eclosion"] .is-palette-card-eclosion { --engine-palette-active: 1; }

/* profondeur — Profondeur */
html[data-palette="profondeur"] body {
    --wp--custom--color--canvas: #F1F5F7;
    --wp--custom--color--surface-alt: #E1EBEF;
    --wp--custom--color--surface-card: #FFFFFF;
    --wp--custom--color--ink: #101A22;
    --wp--custom--color--ink-soft: #546975;
    --wp--custom--color--ink-inverse: #FFFFFF;
    --wp--custom--color--brand-deep: #031B30;
    --wp--custom--color--brand-mid: #6F868D;
    --wp--custom--color--accent: #2E6E8E;
    --wp--custom--color--accent-soft: #2E6E8E;
    --wp--custom--color--ink-on-accent: #FFFFFF;
    --wp--custom--color--surface-dark: #101A22;
    --wp--custom--color--surface-inverse: #101A22;
    --wp--custom--color--ink-on-inverse: #FFFFFF;
    --wp--preset--gradient--hero-glow: linear-gradient(170deg, #031B30 0%, #6F868D 100%);
    --wp--preset--gradient--card: linear-gradient(180deg, #00000040 0%, #000000AD 100%);
    --wp--preset--gradient--card2: linear-gradient(180deg, #00000000 0%, #000000BF 100%);
    --wp--preset--gradient--card3: linear-gradient(166deg, #F7EEEA 0%, #9BAACD 100%);
    --wp--preset--gradient--card4: linear-gradient(166deg, #232C11 0%, #C9A93E 100%);
    --wp--preset--gradient--card5: linear-gradient(166deg, #050912 0%, #0F2947 100%);
    --wp--preset--gradient--panel: linear-gradient(160deg, #031B30 0%, #6F868D 100%);
    --wp--preset--gradient--button: linear-gradient(180deg, #2E6E8E 0%, #2E6E8E 100%);
}
html[data-palette="profondeur"] [data-palette-only]:not([data-palette-only="profondeur"]) { display: none !important; }
html[data-palette="profondeur"] [data-palette-layer]:not([data-palette-layer="profondeur"]), html[data-palette="profondeur"] .is-palette-layer:not(.is-palette-layer-profondeur) { opacity: 0; pointer-events: none; }
html[data-palette="profondeur"] [data-palette-card="profondeur"], html[data-palette="profondeur"] .is-palette-card-profondeur { --engine-palette-active: 1; }

/* lumiere — Lumière */
html[data-palette="lumiere"] body {
    --wp--custom--color--canvas: #FAF7EC;
    --wp--custom--color--surface-alt: #F0E9CC;
    --wp--custom--color--surface-card: #FFFFFF;
    --wp--custom--color--ink: #2B2410;
    --wp--custom--color--ink-soft: #7A6E3E;
    --wp--custom--color--ink-inverse: #FFFFFF;
    --wp--custom--color--brand-deep: #232C11;
    --wp--custom--color--brand-mid: #C9A93E;
    --wp--custom--color--accent: #B9822E;
    --wp--custom--color--accent-soft: #B9822E;
    --wp--custom--color--ink-on-accent: #FFFFFF;
    --wp--custom--color--surface-dark: #2B2410;
    --wp--custom--color--surface-inverse: #2B2410;
    --wp--custom--color--ink-on-inverse: #FFFFFF;
    --wp--preset--gradient--hero-glow: linear-gradient(170deg, #232C11 0%, #C9A93E 100%);
    --wp--preset--gradient--card: linear-gradient(180deg, #00000040 0%, #000000AD 100%);
    --wp--preset--gradient--card2: linear-gradient(180deg, #00000000 0%, #000000BF 100%);
    --wp--preset--gradient--card3: linear-gradient(166deg, #F7EEEA 0%, #9BAACD 100%);
    --wp--preset--gradient--card4: linear-gradient(166deg, #050912 0%, #0F2947 100%);
    --wp--preset--gradient--card5: linear-gradient(166deg, #031B30 0%, #6F868D 100%);
    --wp--preset--gradient--panel: linear-gradient(160deg, #232C11 0%, #C9A93E 100%);
    --wp--preset--gradient--button: linear-gradient(180deg, #B9822E 0%, #B9822E 100%);
}
html[data-palette="lumiere"] [data-palette-only]:not([data-palette-only="lumiere"]) { display: none !important; }
html[data-palette="lumiere"] [data-palette-layer]:not([data-palette-layer="lumiere"]), html[data-palette="lumiere"] .is-palette-layer:not(.is-palette-layer-lumiere) { opacity: 0; pointer-events: none; }
html[data-palette="lumiere"] [data-palette-card="lumiere"], html[data-palette="lumiere"] .is-palette-card-lumiere { --engine-palette-active: 1; }

/* nocturne — Nocturne */
html[data-palette="nocturne"] body {
    --wp--custom--color--canvas: #0D1220;
    --wp--custom--color--surface-alt: #1B2338;
    --wp--custom--color--surface-card: #161D2E;
    --wp--custom--color--ink: #EEF1F8;
    --wp--custom--color--ink-soft: #93A0BE;
    --wp--custom--color--ink-inverse: #EEF1F8;
    --wp--custom--color--brand-deep: #050912;
    --wp--custom--color--brand-mid: #0F2947;
    --wp--custom--color--accent: #93A8E6;
    --wp--custom--color--accent-soft: #93A8E6;
    --wp--custom--color--ink-on-accent: #0D1220;
    --wp--custom--color--surface-dark: #0D1220;
    --wp--custom--color--surface-inverse: #EEF1F8;
    --wp--custom--color--ink-on-inverse: #0D1220;
    --wp--preset--gradient--hero-glow: linear-gradient(170deg, #050912 0%, #0F2947 100%);
    --wp--preset--gradient--card: linear-gradient(180deg, #00000040 0%, #000000AD 100%);
    --wp--preset--gradient--card2: linear-gradient(180deg, #00000000 0%, #000000BF 100%);
    --wp--preset--gradient--card3: linear-gradient(166deg, #F7EEEA 0%, #9BAACD 100%);
    --wp--preset--gradient--card4: linear-gradient(166deg, #031B30 0%, #6F868D 100%);
    --wp--preset--gradient--card5: linear-gradient(166deg, #232C11 0%, #C9A93E 100%);
    --wp--preset--gradient--panel: linear-gradient(160deg, #050912 0%, #0F2947 100%);
    --wp--preset--gradient--button: linear-gradient(180deg, #93A8E6 0%, #93A8E6 100%);
}
html[data-palette="nocturne"] [data-palette-only]:not([data-palette-only="nocturne"]) { display: none !important; }
html[data-palette="nocturne"] [data-palette-layer]:not([data-palette-layer="nocturne"]), html[data-palette="nocturne"] .is-palette-layer:not(.is-palette-layer-nocturne) { opacity: 0; pointer-events: none; }
html[data-palette="nocturne"] [data-palette-card="nocturne"], html[data-palette="nocturne"] .is-palette-card-nocturne { --engine-palette-active: 1; }

/* No attribute at all (no server stamp, the block editor): behave as the default colourway. */
html:not([data-palette]) [data-palette-only]:not([data-palette-only="eclosion"]) { display: none !important; }
html:not([data-palette]) [data-palette-layer]:not([data-palette-layer="eclosion"]), html:not([data-palette]) .is-palette-layer:not(.is-palette-layer-eclosion) { opacity: 0; pointer-events: none; }
html:not([data-palette]) [data-palette-card="eclosion"], html:not([data-palette]) .is-palette-card-eclosion { --engine-palette-active: 1; }