/*
 * CRAFID GLOBAL INTER UI V1
 *
 * Official typography for the CRAFID SaaS interface.
 *
 * IMPORTANT:
 * Public invitation rendering is intentionally excluded
 * by not loading this stylesheet inside the public renderer.
 *
 * Builder invitation canvas keeps its template typography.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --crafid-ui-font:
        "Inter",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/*
 * ------------------------------------------------------
 * NORMAL CRAFID UI
 * ------------------------------------------------------
 */

html body:not(.crafid-builder-v29){
    font-family:
        var(--crafid-ui-font) !important;

    /*
     * Replace common legacy typography variables
     * without rewriting the underlying components.
     */
    --sans:
        var(--crafid-ui-font);

    --serif:
        var(--crafid-ui-font);

    --font-sans:
        var(--crafid-ui-font);

    --font-serif:
        var(--crafid-ui-font);
}


html body:not(.crafid-builder-v29)
:where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    button,
    input,
    textarea,
    select,
    option,
    label,
    legend,
    span,
    small,
    strong,
    b,
    em,
    li,
    dt,
    dd,
    blockquote,
    figcaption,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    th,
    td,
    code,
    pre,
    kbd,
    samp
)
:not(.material-icons)
:not(.material-symbols-outlined)
:not([class^="fa-"])
:not([class*=" fa-"])
:not([class^="bi-"])
:not([class*=" bi-"]){
    font-family:
        var(--crafid-ui-font) !important;
}


/*
 * Catch legacy display/title classes whose own container
 * may declare Georgia / Playfair / Cormorant directly.
 */
html body:not(.crafid-builder-v29)
:where(
    [class*="title"],
    [class*="heading"],
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="metric"],
    [class*="stat"],
    [class*="label"]
)
:not(.material-icons)
:not(.material-symbols-outlined){
    font-family:
        var(--crafid-ui-font) !important;
}


/*
 * ------------------------------------------------------
 * BUILDER UI
 * ------------------------------------------------------
 *
 * Controls, panels, navigation, tutorial and editor UI
 * use Inter.
 *
 * .canvas is deliberately protected because typography
 * inside an invitation remains controlled by template /
 * customer font settings.
 * ------------------------------------------------------
 */

html body.crafid-builder-v29{
    font-family:
        var(--crafid-ui-font) !important;
}


html body.crafid-builder-v29
:where(
    button,
    input,
    textarea,
    select,
    option,
    label,
    legend,
    a,
    p,
    span,
    small,
    strong,
    b,
    em,
    li,
    dt,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    th,
    td,
    code,
    pre,
    [class*="title"],
    [class*="heading"],
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="label"]
)
:not(.canvas)
:not(.canvas *)
:not(.material-icons)
:not(.material-symbols-outlined)
:not([class^="fa-"])
:not([class*=" fa-"])
:not([class^="bi-"])
:not([class*=" bi-"]){
    font-family:
        var(--crafid-ui-font) !important;
}


/*
 * Inputs/buttons should never fall back to browser-specific
 * serif/sans defaults.
 */
html body
:where(
    button,
    input,
    textarea,
    select,
    option
){
    font-family:
        var(--crafid-ui-font) !important;
}


/*
 * Premium typography is now produced through weight,
 * spacing and scale rather than switching font families.
 */
html body:not(.crafid-builder-v29)
:where(
    h1,
    h2,
    h3,
    .display,
    [class*="hero-title"],
    [class*="section-title"]
){
    font-style:normal;
}