/* ============================================================
   Fonts
   ============================================================ */

@font-face {
    font-family: "Archivo";
    src: url("../assets/fonts/archivo/Archivo-VariableFont_wdth,wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../assets/fonts/archivo/Archivo-Italic-VariableFont_wdth,wght.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../assets/fonts/dm-sans/DMSans-VariableFont_opsz,wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../assets/fonts/dm-sans/DMSans-Italic-VariableFont_opsz,wght.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
}

@font-face {
    font-family: "DM Mono";
    src: url("../assets/fonts/dm-mono/DMMono-VariableFont_wdth,wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
}

@font-face {
    font-family: "DM Mono";
    src: url("../assets/fonts/dm-mono/DMMono-Italic-VariableFont_wdth,wght.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
}


/* ============================================================
   Global defaults
   ============================================================ */

:root {
    --twfx-font-display: "Archivo", sans-serif;
    --twfx-font-body: "DM Sans", sans-serif;
    --twfx-font-mono: "DM Mono", monospace;

    --md-text-font: var(--twfx-font-body);
    --md-code-font: var(--twfx-font-mono);

    --twfx-bg: #0b0e14;
    --twfx-surface: #111520;
    --twfx-surface-raised: #161c2c;
    --twfx-line: #1e2740;

    --twfx-orange: #f97316;
    --twfx-orange-light: #fb923c;

    --twfx-text: #e8eaf0;
    --twfx-text-soft: #c7ccd8;
    --twfx-muted: #8490aa;
    --twfx-muted-dim: #6b7894;
}

body {
    font-family: var(--twfx-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--twfx-font-display);
}

code,
pre,
.md-typeset code {
    font-family: var(--twfx-font-mono);
}



/* ============================================================
   twfx.dev Legal — Zensical colour overrides
   ============================================================ */


/* ------------------------------------------------------------
   DARK MODE
   Based directly on the twfx.dev visual system.
   ------------------------------------------------------------ */

[data-md-color-scheme="slate"] {

    /* Core document colours */
    /* --md-default-bg-color: #0b0e14; */
    --md-default-bg-color: #111520;
    --md-default-fg-color: #e8eaf0;

    --md-default-fg-color--light: #c7ccd8;
    --md-default-fg-color--lighter: #8490aa;
    --md-default-fg-color--lightest: #6b7894;

    /* Header / navigation */
    --md-primary-fg-color: #0b0e14;
    --md-primary-fg-color--light: #111520;
    --md-primary-fg-color--dark: #080a0f;
    --md-primary-bg-color: #e8eaf0;
    --md-primary-bg-color--light: #c7ccd8;

    /* Brand accent */
    --md-accent-fg-color: #f97316;
    --md-accent-fg-color--transparent: rgba(249, 115, 22, 0.12);
    --md-accent-bg-color: #0b0e14;

    /* Links */
    --md-typeset-a-color: #fb923c;

    /* Code */
    --md-code-bg-color: #111520;
    --md-code-fg-color: #e8eaf0;

    /* Borders / dividers */
    --md-typeset-table-color: #111520;

    /* Footer */
    --md-footer-bg-color: #0b0e14;
    --md-footer-bg-color--dark: #080a0f;
    --md-footer-fg-color: #e8eaf0;
    --md-footer-fg-color--light: #c7ccd8;
    --md-footer-fg-color--lighter: #8490aa;

     --twfx-divider: #161C2C;
}

/* Main content horizontal rules */
[data-md-color-scheme="slate"] .md-typeset hr {
    border-color: var(--twfx-divider);
}

/* Header bottom border */
[data-md-color-scheme="slate"] .md-header {
    border-bottom-color: var(--twfx-divider);
}

/* Footer / content boundary */
[data-md-color-scheme="slate"] .md-footer {
    border-top-color: var(--twfx-divider);
}

/* ------------------------------------------------------------
   LIGHT MODE
   Complementary light version of the twfx.dev palette.
   Header/footer remain dark and branded.
   ------------------------------------------------------------ */

[data-md-color-scheme="default"] {

    /* Core document colours */
    --md-default-bg-color: #f7f8fa;
    --md-default-fg-color: #161c2c;

    --md-default-fg-color--light: #465169;
    --md-default-fg-color--lighter: #68748b;
    --md-default-fg-color--lightest: #dce0e8;

    /* Header / navigation
       Deliberately remains dark in light mode */
    --md-primary-fg-color: #0b0e14;
    --md-primary-fg-color--light: #111520;
    --md-primary-fg-color--dark: #080a0f;
    --md-primary-bg-color: #e8eaf0;
    --md-primary-bg-color--light: #c7ccd8;

    /* Brand accent
       Darker orange improves contrast on light backgrounds */
    --md-accent-fg-color: #c65308;
    --md-accent-fg-color--transparent: rgba(198, 83, 8, 0.10);
    --md-accent-bg-color: #ffffff;

    /* Links */
    --md-typeset-a-color: #c65308;

    /* Code */
    --md-code-bg-color: #eef0f4;
    --md-code-fg-color: #161c2c;

    /* Borders / dividers */
    --md-typeset-table-color: #dce0e8;

    /* Footer remains dark */
    --md-footer-bg-color: #0b0e14;
    --md-footer-bg-color--dark: #080a0f;
    --md-footer-fg-color: #e8eaf0;
    --md-footer-fg-color--light: #c7ccd8;
    --md-footer-fg-color--lighter: #8490aa;
}


/* ------------------------------------------------------------
   Explicit structural branding
   Keeps header/footer dark regardless of reading mode.
   ------------------------------------------------------------ */
.md-header {
    background-color: #0b0e14;
    color: #e8eaf0;
    border-bottom: 1px solid #111520;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 2.0rem;
    width: auto;
}

.md-header--shadow {
    box-shadow: 0 1px 0 #111520;
}

.md-tabs {
    background-color: #0b0e14;
    color: #e8eaf0;
}

.md-footer {
    background-color: #0b0e14;
    color: #e8eaf0;
}

.md-footer-meta {
    background-color: #080a0f;
}

.md-footer__copyright_extra {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.64rem;
    text-align: center;
}

/* ------------------------------------------------------------
   Brand interaction states
   ------------------------------------------------------------ */
.md-header a:hover,
.md-tabs a:hover,
.md-footer a:hover {
    color: #fb923c;
}


/* Text selection */

::selection {
    background: #f97316;
    color: #0b0e14;
}


/* Keyboard focus */

:focus-visible {
    outline-color: #fb923c;
}

/* ============================================================
   Footer — always uses the twfx.dev dark palette
   ============================================================ */

.md-footer {
    --md-default-fg-color: #e8eaf0;
    --md-default-fg-color--light: #c7ccd8;
    --md-default-fg-color--lighter: #8490aa;
    --md-default-fg-color--lightest: #6b7894;

    --md-typeset-a-color: #c7ccd8;
}

.md-footer,
.md-footer-meta,
.md-footer-meta.md-footer__copyright_extra {
    background-color: #0b0e14;
    color: #8490aa;
}

/* Normal footer text */
.md-footer-meta,
.md-footer-meta .md-copyright,
.md-footer__copyright_extra {
    color: #8490aa;
}

.md-footer-meta.md-footer__copyright_extra {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.64rem;
    /* color: #8490aa; */
}