/* Design tokens of home-idp: the ONLY place with literal colours, sizes, radii and shadows. Every other stylesheet
   reads these variables. Light is the default; the dark values replace the colours under prefers-color-scheme.
   Contrast (WCAG 2.x) of every text/background and UI/background pair is verified for both schemes: text 4.5:1,
   UI components and focus 3:1. */

/* ---- Fonts (self-hosted, SIL OFL, see /fonts/OFL.txt); latin + latin-ext subsets ---- */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light dark;

    /* ---- Colour: light ---- */
    --bg: #f1f3f4;                  /* paper: page background, side menu */
    --surface: #ffffff;             /* header, content area, dialog, inputs */
    --ink: #17212b;                 /* text, primary button */
    --ink-hover: #2f3e4d;           /* primary button, hovered */
    --ink-soft: #556170;            /* secondary text, hints */
    --rule: #d6dbe0;                /* hairlines (decorative, not a UI boundary) */
    --control-border: #7c8794;      /* borders of inputs and secondary buttons (3:1) */
    --hover: #e8ecef;               /* hovered menu entry, hovered secondary button */
    --brass: #946200;               /* the only accent: mark, current entry, focus ring, link underline */
    --selection: #f6e9cc;           /* text selection */

    --ok: #1b7a4b;
    --ok-bg: #e3f3ea;
    --pending: #7a5000;
    --pending-bg: #fbf0d6;
    --error: #b3261e;
    --error-bg: #fbe4e2;
    --on-error: #ffffff;            /* text on a solid --error (danger button) */

    --qr-bg: #ffffff;               /* the QR code is drawn black on white in every scheme */
    --backdrop: rgb(15 20 25 / 55%);
    --shadow-color: rgb(15 20 25 / 18%);

    /* ---- Typography ---- */
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;

    --text-xs: 0.8125rem;           /* 13 px: footer, captions */
    --text-sm: 0.875rem;            /* 14 px: tables, hints, labels */
    --text-md: 1rem;                /* 16 px: body */
    --text-lg: 1.1875rem;           /* 19 px: h2 */
    --text-xl: 1.4375rem;           /* 23 px: h1 */
    --text-2xl: 1.75rem;            /* 28 px: code entry */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --leading: 1.5;
    --leading-tight: 1.25;

    /* ---- Spacing ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* ---- Shape ---- */
    --radius: 4px;                  /* controls and banners */
    --radius-lg: 8px;               /* dialog */
    --hairline: 1px;
    --marker: 3px;                  /* brass marker of the current menu entry, banner edge */
    --shadow-float: 0 2px 8px var(--shadow-color);
    --shadow-dialog: 0 10px 30px var(--shadow-color);

    /* ---- Focus ---- */
    --focus-width: 2px;
    --focus-offset: 2px;
    --focus-ring: var(--focus-width) solid var(--brass);

    /* ---- Sizes ---- */
    --measure: 64rem;               /* content column of the application */
    --measure-public: 24rem;        /* narrow column of the public pages */
    --menu-width: 13rem;
    --user-name-max: 12rem;         /* longest display name in the header; longer names end with an ellipsis */
    --label-width: 14rem;           /* first column of definition lists and .form-grid */
    --control-height: 2.5rem;
    --touch-target: 2.75rem;        /* minimum size on coarse pointers */
    --dot-size: 0.5rem;             /* status dot */
    --mark-size: 1.25rem;           /* brand mark next to the product name */
    --qr-size: 12rem;
    --dialog-width: 26rem;
    --notice-width: 28rem;
    --code-cells: 6;                /* cells of the code entry */
    --code-gap: 0.5em;              /* letter-spacing between code cells (relative to the input font size) */
    --code-pad: 0.75rem;            /* horizontal padding of the code entry */
    --cell-line: 2px;               /* thickness of the code cell lines */
    --cell-lift: 0.5rem;            /* distance of the cell lines from the bottom of the input */
    --glyph-mono: 0.6em;            /* advance width of a Plex Mono glyph */
    --toggle-width: 4rem;           /* hit area of the menu toggle on narrow screens */
    --field-narrow: 7.5rem;         /* inline field inside a table cell */
    --code-min: 10rem;              /* minimum width of a recovery-code cell */
    --action-min: 8rem;             /* minimum width of a dialog action */
    --disabled-opacity: 0.6;
    --press-dim: 0.92;              /* brightness of a hovered danger button */

    /* ---- Motion ---- */
    --duration: 120ms;
    --easing: ease-out;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1419;
        --surface: #171e26;
        --ink: #e7ecf1;
        --ink-hover: #ffffff;
        --ink-soft: #9aa6b4;
        --rule: #2a3440;
        --control-border: #6f7d8d;
        --hover: #1f2833;
        --brass: #e2a93a;
        --selection: #3a2e12;

        --ok: #5fcb93;
        --ok-bg: #14281f;
        --pending: #e2b04a;
        --pending-bg: #2c2412;
        --error: #f2877f;
        --error-bg: #321b1a;
        --on-error: #0f1419;

        --backdrop: rgb(0 0 0 / 65%);
        --shadow-color: rgb(0 0 0 / 55%);
    }
}