/* Questo brand layer.
   Mirrors landing/tailwind.config.ts and landing/src/styles.css.
   Every url() is relative to this stylesheet, so the bundle stays
   independent of the deploy sub-path. */

/* === Diatype (Sans) === */
@font-face {
    font-family: "Diatype";
    src: url("../fonts/ABCDiatype-Regular-Trial.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Diatype";
    src: url("../fonts/ABCDiatype-Medium-Trial.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* === PS Times (Serif) === */
@font-face {
    font-family: "PS Times";
    src: url("../fonts/PSTimes-Regular.otf") format("opentype");
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

:root {
    --questo-black: #000000;
    --questo-white: #ffffff;
    --questo-yellow: #edff00;
    --questo-link: #0088ff;
    --questo-link-bg: #f0f7ff;
    --questo-grey-1: #fafafa;
    --questo-grey-3: #ededed;
    --questo-grey-7: #747474;
    --questo-grey-8: #646464;

    --md-text-font-family: "Diatype", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

/* The theme resolves `primary = "custom"` / `accent = "custom"` to no built-in
   rule, which is the hook for defining the palette here. */
[data-md-color-primary="custom"] {
    --md-primary-fg-color: var(--questo-white);
    --md-primary-fg-color--light: var(--questo-grey-1);
    --md-primary-fg-color--dark: var(--questo-grey-3);
    --md-primary-bg-color: var(--questo-black);
    --md-primary-bg-color--light: var(--questo-grey-8);
}

[data-md-color-accent="custom"] {
    --md-accent-fg-color: var(--questo-link);
    --md-accent-fg-color--transparent: var(--questo-link-bg);
    --md-accent-bg-color: var(--questo-white);
    --md-accent-bg-color--light: var(--questo-grey-1);
}

[data-md-color-scheme="default"] {
    --md-typeset-color: var(--questo-black);
    --md-typeset-a-color: var(--questo-link);
    /* Yellow is a highlight only, never text and never a surface. */
    --md-typeset-mark-color: var(--questo-yellow);
}

/* The header sits on white, so it needs a hairline to separate from content. */
.md-header {
    border-bottom: 1px solid var(--questo-grey-3);
    box-shadow: none;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: "PS Times", serif;
    font-weight: 350;
    color: var(--questo-black);
    font-feature-settings:
        "liga" 0,
        "dlig" 0,
        "clig" 0,
        "ss02" 1,
        "ss04" 1;
}

.md-typeset h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: normal;
}

.md-typeset h2 {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: normal;
}

.md-typeset h3 {
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: normal;
}

.md-typeset mark {
    background-color: var(--questo-yellow);
    color: var(--questo-black);
}

.md-typeset blockquote {
    border-left-color: var(--questo-grey-3);
    color: var(--questo-grey-8);
}

.md-typeset table:not([class]) th {
    background-color: var(--questo-grey-1);
    color: var(--questo-black);
}

.md-nav__title,
.md-nav__link {
    color: var(--questo-grey-8);
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
    color: var(--questo-link);
}

.md-footer {
    background-color: var(--questo-black);
}

.md-footer-meta {
    background-color: var(--questo-black);
}