/*
 * Corporate Design Theme
 * ----------------------
 *
 * The one stylesheet a web application of confirm IT needs: the corporate
 * design colours, a modern reset, semantic design tokens with a dark & a
 * light theme, and sane typographic defaults.
 *
 *     <link rel="stylesheet" href="https://assets.confirm.ch/theme.css">
 *
 * To avoid a flash of unstyled text, include it early in the <head>, and
 * preload the two most used fonts (body text & headings) right after it:
 *
 *     <link rel="preload" href="https://assets.confirm.ch/fonts/poppins-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>
 *     <link rel="preload" href="https://assets.confirm.ch/fonts/poppins-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin>
 *
 * Dark is the default theme. Use the data-theme attribute to change it:
 *
 *     <html>                       dark
 *     <html data-theme="light">    light
 *     <html data-theme="auto">     follows the operating system
 *
 * The attribute works on any element, e.g. to render a light card inside a
 * dark application.
 *
 * Applications that let users switch the theme must apply the stored choice
 * in the <head>, before the first paint. Otherwise the page flashes in the
 * default theme while loading:
 *
 *     <script>
 *         try { document.documentElement.dataset.theme = localStorage.getItem('theme') || 'dark' } catch {}
 *     </script>
 *
 * Everything is wrapped in the "confirm" cascade layer. Unlayered styles of
 * an application therefore always win, regardless of their specificity.
 * To customise the theme, override its --theme-* custom properties.
 *
 * File built by cicd-builder 3.0.3.dev0+g18144fa24.d20261022.
 */

@layer confirm.colours, confirm.reset, confirm.tokens, confirm.base;

@import url("colours.css?v=3.0.3.dev0%2Bg18144fa24.d20261022") layer(confirm.colours);

/*
 * Fonts
 *
 * Self-hosted Latin subsets of Poppins & Roboto Mono (SIL Open Font License,
 * see fonts/LICENSE-*.txt), fetched from Fontsource by "make fonts". The
 * Poppins files below must match POPPINS_FILES in the Makefile. Their URLs are
 * deliberately unversioned, so applications can preload them.
 */

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-latin-300-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Poppins;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-latin-400-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-latin-700-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("fonts/roboto-mono-latin-wght-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Reset
 */

@layer confirm.reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    /* Keep the browser's centring of modals & popovers */
    dialog,
    [popover] {
        margin: auto;
    }

    body {
        min-height: 100dvh;
    }

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    img,
    video {
        height: auto;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    table {
        border-collapse: collapse;
    }

    :where([hidden]:not([hidden="until-found"])) {
        display: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/*
 * Tokens
 *
 * Colours are defined as light-dark(<light>, <dark>), and resolved by the
 * colour scheme of the element they're used on. All text & fill
 * combinations meet WCAG AA (4.5:1) in both themes.
 */

@layer confirm.tokens {
    :root {
        color-scheme: dark;

        /* Surfaces */
        --theme-background: light-dark(var(--cd-cold-grey-100), var(--cd-cold-grey-10));
        --theme-surface: light-dark(var(--cd-white), var(--cd-cold-grey-20));
        --theme-surface-raised: light-dark(var(--cd-white), var(--cd-cold-grey-30));
        --theme-border: light-dark(var(--cd-cold-grey-80), var(--cd-cold-grey-30));

        /* Text */
        --theme-text: light-dark(var(--cd-cold-grey-10), var(--cd-cold-grey-90));
        --theme-text-muted: light-dark(var(--cd-cold-grey-40), var(--cd-cold-grey-60));

        /* Primary: the logo's orange, identical in both themes */
        --theme-primary: var(--cd-orange-60);
        --theme-primary-hover: var(--cd-orange-70);
        --theme-primary-contrast: var(--cd-cold-grey-10);
        --theme-primary-text: light-dark(var(--cd-orange-40), var(--cd-orange-60));

        /* Accent */
        --theme-accent: light-dark(var(--cd-azure-40), var(--cd-azure-60));
        --theme-accent-hover: light-dark(var(--cd-azure-30), var(--cd-azure-70));
        --theme-accent-contrast: light-dark(var(--cd-white), var(--cd-cold-grey-10));

        /*
         * Status: a fill (e.g. badges) with the text colour on top of it, a
         * text colour for the background, and a subtle tint (e.g. alerts)
         */

        /* Success */
        --theme-success: var(--cd-green-60);
        --theme-success-contrast: var(--cd-cold-grey-10);
        --theme-success-text: light-dark(var(--cd-green-40), var(--cd-green-60));
        --theme-success-subtle: light-dark(var(--cd-green-100), var(--cd-green-20));

        /* Warning */
        --theme-warning: var(--cd-yellow-60);
        --theme-warning-contrast: var(--cd-cold-grey-10);
        --theme-warning-text: light-dark(var(--cd-yellow-40), var(--cd-yellow-60));
        --theme-warning-subtle: light-dark(var(--cd-yellow-100), var(--cd-yellow-20));

        /* Error */
        --theme-error: var(--cd-red-60);
        --theme-error-contrast: var(--cd-cold-grey-10);
        --theme-error-text: light-dark(var(--cd-red-40), var(--cd-red-60));
        --theme-error-subtle: light-dark(var(--cd-red-100), var(--cd-red-20));

        /* Info */
        --theme-info: var(--cd-blue-60);
        --theme-info-contrast: var(--cd-cold-grey-10);
        --theme-info-text: light-dark(var(--cd-blue-40), var(--cd-blue-60));
        --theme-info-subtle: light-dark(var(--cd-blue-100), var(--cd-blue-20));

        /* Interaction */
        --theme-link: var(--theme-primary-text);
        --theme-link-hover: light-dark(var(--cd-orange-30), var(--cd-orange-70));
        --theme-focus: var(--theme-accent);
        --theme-shadow-color: light-dark(rgb(8 10 14 / 12%), rgb(0 0 0 / 50%));
        --theme-shadow: 0 1px 2px var(--theme-shadow-color), 0 4px 16px var(--theme-shadow-color);
        --theme-transition: 150ms ease;

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

        /*
         * Modular scale with a ratio of 1.25 (major third) on large screens
         * (1280px), shrinking fluidly to 1.2 (minor third) on small screens
         * (360px).
         *
         * --theme-font-size is the root font size. All other sizes & spacings
         * are defined in rem, and therefore scale with it.
         */
        --theme-font-size: 1.1rem;
        --theme-font-size-sm: 0.8rem;
        --theme-font-size-lg: clamp(1.2rem, 1.18rem + 0.087vw, 1.25rem);
        --theme-font-size-xl: clamp(1.44rem, 1.392rem + 0.214vw, 1.563rem);
        --theme-font-size-2xl: clamp(1.728rem, 1.64rem + 0.391vw, 1.953rem);
        --theme-font-size-3xl: clamp(2.074rem, 1.93rem + 0.638vw, 2.441rem);

        /* Font weights */
        --theme-font-weight-light: 300;
        --theme-font-weight-regular: 400;
        --theme-font-weight-medium: 500;
        --theme-font-weight-semibold: 600;
        --theme-font-weight-bold: 700;

        /* Line heights */
        --theme-line-height: 1.5;
        --theme-line-height-heading: 1.2;

        /* Spacing */
        --theme-space-xs: 0.25rem;
        --theme-space-sm: 0.5rem;
        --theme-space: 1rem;
        --theme-space-lg: 1.5rem;
        --theme-space-xl: 2rem;
        --theme-space-2xl: 3rem;

        /* Radii */
        --theme-radius-sm: 4px;
        --theme-radius: 8px;
        --theme-radius-lg: 16px;
        --theme-radius-round: 999px;

        /* Widths */
        --theme-content-width: 75rem;
        --theme-text-width: 70ch;
    }

    [data-theme="dark"] {
        color-scheme: dark;
    }

    [data-theme="light"] {
        color-scheme: light;
    }

    [data-theme="auto"] {
        color-scheme: light dark;
    }
}

/*
 * Base
 */

@layer confirm.base {
    :root,
    [data-theme] {
        background-color: var(--theme-background);
        color: var(--theme-text);
    }

    :root {
        accent-color: var(--theme-primary);
        font-family: var(--theme-font-sans);
        font-size: var(--theme-font-size);
        font-weight: var(--theme-font-weight-regular);
        line-height: var(--theme-line-height);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Headings */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--theme-font-weight-semibold);
        line-height: var(--theme-line-height-heading);
        letter-spacing: -0.01em;
        text-wrap: balance;
    }

    h1 {
        font-size: var(--theme-font-size-3xl);
    }

    h2 {
        font-size: var(--theme-font-size-2xl);
    }

    h3 {
        font-size: var(--theme-font-size-xl);
    }

    h4 {
        font-size: var(--theme-font-size-lg);
    }

    h5,
    h6 {
        font-size: 1rem;
    }

    /* Text flow: spacing only between adjacent text blocks, never around UI */

    p {
        text-wrap: pretty;
    }

    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote, table, hr) + :where(p, ul, ol, dl, pre, blockquote, table, hr) {
        margin-block-start: var(--theme-space);
    }

    :where(p, ul, ol, dl, pre, blockquote, table, hr) + :where(h1, h2, h3, h4, h5, h6) {
        margin-block-start: 1.5em;
    }

    :where(h1, h2, h3, h4, h5, h6) + * {
        margin-block-start: 0.5em;
    }

    /* Inline text */

    a {
        color: var(--theme-link);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
        transition: color var(--theme-transition);
    }

    a:hover {
        color: var(--theme-link-hover);
    }

    strong,
    b {
        font-weight: var(--theme-font-weight-semibold);
    }

    small {
        font-size: var(--theme-font-size-sm);
    }

    mark,
    ::selection {
        background-color: var(--theme-primary);
        color: var(--theme-primary-contrast);
    }

    :focus-visible {
        outline: 2px solid var(--theme-focus);
        outline-offset: 2px;
    }

    /* Code */

    code,
    kbd,
    samp,
    pre {
        font-family: var(--theme-font-mono);
        font-size: 0.9em;
    }

    :not(pre) > code,
    kbd {
        padding: 0.1em 0.35em;
        border-radius: var(--theme-radius-sm);
        background-color: var(--theme-surface);
    }

    kbd {
        border: 1px solid var(--theme-border);
    }

    pre {
        padding: var(--theme-space);
        overflow-x: auto;
        border: 1px solid var(--theme-border);
        border-radius: var(--theme-radius);
        background-color: var(--theme-surface);
    }

    /* Blocks */

    blockquote {
        padding-inline-start: var(--theme-space);
        border-inline-start: 3px solid var(--theme-primary);
        color: var(--theme-text-muted);
    }

    hr {
        border: none;
        border-block-start: 1px solid var(--theme-border);
    }

    th,
    td {
        padding: var(--theme-space-sm) var(--theme-space);
        border-block-end: 1px solid var(--theme-border);
        text-align: start;
    }

    th {
        font-weight: var(--theme-font-weight-semibold);
    }

    ::placeholder {
        color: var(--theme-text-muted);
        opacity: 1;
    }
}