:root {
    /* The tokens below are light-dark() pairs, resolved against the color-scheme of
       the element that uses them, not against the page's. So a surface that is dark
       in both modes (the menus, the insight sidebar) declares `color-scheme: dark`,
       and everything placed on it gets the dark values: a card, a label, an input
       drawn for the page then reads on the dark surface too, with no overrides. Leave
       it out, and in light mode the card comes out white with the surface's white
       text in it. */
    color-scheme: light dark;

    /* ---------------------------------------------------------------
       Surface ramp

       Dark mode has no shadows to lean on, so elevation is expressed
       purely as lightness: the further "up" a surface is, the lighter
       it gets. All four steps share one hue (192deg, the hue of
       --dryft-dark-color) so nested surfaces read as the same material.

       surface-0  page background
       surface-1  panel, table row hover
       surface-2  nested panel, card, input, disabled fill
       surface-3  panel header, inverted/secondary panel
       --------------------------------------------------------------- */
    --surface-0: #0E1C20;
    --surface-1: #16292E;
    --surface-2: #20383E;
    --surface-3: #2B454C;

    /* ---------------------------------------------------------------
       Borders

       Two weights only. Hairlines and table rules use -subtle;
       -strong is for divisions that carry real structure (input
       outlines, section splits). Neither is anywhere near text
       contrast — a border is not text.
       --------------------------------------------------------------- */
    --border-subtle: light-dark(#DFDEE4, #395056);
    --border-strong: light-dark(#C4CDD1, #547178);

    /* Ink for text placed on a bright/pastel accent fill. In dark mode
       accent fills get lighter, so their label has to get darker. */
    --contrast-ink-color: #0B181B;

    /* Dryft design system */
    --dryft-light-color: #E5F7B1;
    --dryft-middle-muted: #EBEBEB;
    --dryft-dark-muted: light-dark(#5E7176, #9AACB1);
    --dryft-subtle-text-color: var(--dryft-dark-muted);
    --dryft-text-color-dark-background: white;
    --dryft-border-color: var(--border-subtle);

    --border-radius: 10px;
    --border-radius-small: 4px;
    /* A pill: a radius larger than anything can be tall. Same name and value as
       the offer site's, so a component drawn on both is drawn the same way. */
    --pill-radius: 100px;

    --box-color: light-dark(white, var(--bg-color));
    /* The step-up surface: nested boxes, table row heads, chips. A warm
       off-white rather than the cool #F7F7F9 it used to borrow from
       --dryft-light-muted, which is also the dark mode's body ink and so could
       not be warmed without tinting text. Same family as --panel-bg-color, so
       a nested surface and a panel read as the same material. */
    --box-level-2-color: light-dark(#F7F4EC, var(--surface-2));

    --color-state-unread: light-dark(#e9d1ff, #342159);

    --info-color: light-dark(#7B3FD4, #A97DFF);
    --info-contrast-color: light-dark(white, var(--contrast-ink-color));

    /* Departments */
    --projektledning-color: #266ef1;
    --vvs-color: #FAAFA7;
    --el-color: #FFCF70;
    --plattsättning-color: #F79D54;
    --måleri-color: #73C496;
    --bygg-color: #46639F;
    --finsnickeri-color: #46639F;

    --projektledning-color-light: light-dark(#266ef1, #0057EF);
    --vvs-color-light: light-dark(#ffe5e3, #652d2b);
    --el-color-light: light-dark(#fff0d5, #503908);
    --plattsättning-color-light: light-dark(#ffe7d6, #543724);
    --måleri-color-light: light-dark(#e0ffec, #21422b);
    --bygg-color-light: light-dark(#d6e2ff, #1f2c5b);
    --finsnickeri-color-light: light-dark(#d6e2ff, #1f2c5b);

    --safe-area-padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
    --worker-page-menu-height: calc(3.5rem + var(--safe-area-padding-bottom));
    /* Set by js/fixed_bottom_bars.js from the bars actually on the page. */
    --fixed-bottom-bars-height: 0px;

    --table-row-hover-color: light-dark(#f0f8e5, var(--surface-1));

    /* colors */
    --bg-color: light-dark(white, var(--surface-0));

    --dryft-dark-color: #173841;
    --dryft-light-muted: #F7F7F9;
    --dryft-text-color: light-dark(var(--dryft-dark-color), var(--dryft-light-muted));

    --muted-color: light-dark(#6B7478, #9AACB1);
    --muted-contrast-color: light-dark(#fff, var(--contrast-ink-color));

    --notice-color: light-dark(#21ABD9, #01B3E5);
    --notice-contrast-color: var(--contrast-ink-color);

    --pale-color: light-dark(#EDE8DF, var(--surface-2));
    --pale-contrast-color: light-dark(var(--dryft-dark-color), var(--dryft-light-muted));

    --muted-light-color: light-dark(#F5F5F7, var(--surface-2));
    --muted-light-contrast-color: light-dark(var(--dryft-dark-color), var(--dryft-light-muted));

    --primary-color: light-dark(#2C474D, #42B4CA);
    --primary-contrast-color: light-dark(white, var(--contrast-ink-color));

    --tertiary-color: light-dark(#000, white);
    --tertiary-contrast-color: light-dark(#fff, var(--contrast-ink-color));

    /* Danger has two roles that pull in opposite directions, so it has two
       tokens. A solid danger fill carries white text, so it stays the
       light-mode red in both themes — a filled danger button should look
       the same everywhere. Danger drawn ON a surface (text, outline
       badges/buttons, borders, low-% tints) has to lift in dark mode or it
       disappears into the background, hence --danger-text-color. */
    --danger-color: #CC2944;
    --danger-contrast-color: white;
    --danger-text-color: light-dark(#CC2944, #FF5A4A);

    --success-color: light-dark(#17786A, #04BDA6);
    --success-contrast-color: light-dark(white, var(--contrast-ink-color));

    /* Warning reads well on both grounds unlifted, so it needs no split. */
    --warning-color: #F09443;
    --warning-contrast-color: var(--contrast-ink-color);

    /* Marks off a group of fields the customer is shown, inside a form that is
       otherwise ours alone. A mint, deliberately off the 192deg hue of the
       surface ramp, so the box reads as a different kind of thing rather than
       as one more step up the elevation ladder. The dark pair is the same hue
       at roughly surface-3's lightness -- a tint diluted from a light-mode
       color loses its hue on a dark ground, so both ends are stated. */
    --customer-facing-tint: light-dark(#ECF5F2, #2B463B);
    --customer-facing-border: light-dark(#B8D4C8, #406D5C);

    --link-color: light-dark(#046A8C, #47B0DC);

    /* buttons */
    --btn-disabled-bg: light-dark(#E9E9F0, var(--surface-2));
    --btn-disabled-color: light-dark(#9999A2, #7B8A8F);
    --btn-text-light: light-dark(#000, white);
    --btn-disabled-border: light-dark(#E9E9F0, rgba(255, 255, 255, 0.30));
    --btn-cta-bg: #FFC98B;
    --btn-cta-text: #000;
    --btn-cta-hover-bg: light-dark(#000, #FFDCA8);
    --btn-cta-hover-text: light-dark(white, var(--contrast-ink-color));
    /* The chat's send button: the customer chat's peach, which the internal chats
       now wear too (chat-attachments Phase 5). Its own pair rather than
       --btn-cta-*, so restyling the CTA button never silently restyles the chat.
       Lighter in dark mode with darker ink, per --contrast-ink-color's note above:
       a pastel accent fill on a dark ground has to lift, and its glyph has to
       drop. The dark value is the one --btn-cta-hover-bg already uses, so no new
       hue enters the system. */
    --chat-accent-color: light-dark(#FFC98B, #FFDCA8);
    --chat-accent-contrast-color: light-dark(#1A353B, var(--contrast-ink-color));
    --btn-hover-bg: light-dark(#F0F0F4, var(--surface-2));

    /* table */
    --table-border: var(--border-subtle);
    --table-sort-hover: var(--link-color);

    /* menu */
    --menu-bg-color: #2c474d;
    --menu-active-bg: #19353b;
    --menu-contrast-active-bg: #FFC98B;

    /* form-control */
    --form-control-border-color: var(--border-strong);
    --form-control-placeholder-color: light-dark(#6A7377, #93A3A8);
    --form-control-color: light-dark(#1A353B, white);
    --form-control-bg-color: light-dark(#f5f5f7, var(--surface-2));
    --form-control-changed-bg-color: light-dark(#ffffca, #4A421C);

    /* tabs */
    --tab-color: light-dark(#1A353B, white);
    --tab-bar-bg-color: light-dark(#EBEBEB, var(--surface-1));

    /* progress */
    --progress-bg: light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .10));

    /* panel */
    --panel-bg-color: light-dark(#F7F4F0, var(--surface-1));
    /* A panel that barely lifts off the page: it groups without claiming a level
       of its own, for a container whose job is to hold other panels and cards
       rather than to be a surface itself. Light mode keeps it a hair off white;
       dark mode keeps it a hair off the page ground, half a step under
       --surface-1, which is the same small separation seen from the other side. */
    --panel-light-bg-color: light-dark(#FDFCFA, #122227);
    --panel-nested-bg-color: light-dark(white, var(--surface-2));
    --panel-border-color: light-dark(#EDE8DF, var(--border-subtle));
    --panel-border-width: 1px;
    --panel-border-radius: 16px;
    --panel-padding: 16px;
    --panel-header-bg-color: light-dark(#EDE8DF, var(--surface-2));

    /* ---------------------------------------------------------------
       Action status: accepted / published / draft

       These three are deliberately NOT mode-aware. A version's state is
       identified by its color, so it has to be the same color in both
       themes — a reader should recognize "draft orange" at a glance
       without re-learning it per theme. That means they are pinned to
       the light-mode values and do not follow --success/--notice/
       --warning, which do lighten in dark mode for their other uses.
       --------------------------------------------------------------- */
    --status-accepted-bg: #17786A;
    --status-accepted-text: white;
    --status-published-bg: #21ABD9;
    --status-published-text: white;
    --status-draft-bg: #F09443;
    --status-draft-text: white;
    --completed-bg-color: light-dark(#E1F3F0, #193A33);

    --panel-secondary-bg-color: light-dark(var(--dryft-dark-color), var(--surface-3));

    /* overlay / scrim */
    --scrim-color: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.65));
    --shadow-color: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5));

    /* spacing */
    --tiny-gap: 4px;
    --close-gap: 8px;
    --medium-gap: 16px;
    --large-gap: 24px;

    /*
     * The material flow (customer_choice_materials_flow.css), shared with the
     * customer's offer page. Same roles, resolved here to this site's surfaces so
     * the picture survives dark mode -- the offer page has no dark mode and hard
     * whites there would come out as hard whites here.
     */
    --flow-panel-background: var(--panel-bg-color);
    --flow-card-background: var(--box-color);
    --flow-border-color: var(--panel-border-color);
    --flow-muted-color: var(--dryft-subtle-text-color);
    --flow-strong-color: var(--primary-color);

    /* The offer page sets its small labels in tracked capitals; this site sets
       them in the sentence case everything else here is written in. */
    --flow-label-transform: none;
    --flow-label-tracking: normal;

    --flow-step-pending-background: light-dark(#F4F1EB, #2A3338);
    --flow-step-pending-color: light-dark(#6B6558, #C6CDD0);
    --flow-step-waiting-background: light-dark(#FFF1D6, #3B3220);
    --flow-step-waiting-color: light-dark(#7A5A1A, #E8CE96);
    --flow-step-waiting-border-color: light-dark(#F0DBA0, #5A4A26);
    --flow-step-to-approve-background: light-dark(#FFC98B, #4A3418);
    --flow-step-to-approve-color: light-dark(#6B3200, #FFC98B);
    --flow-step-to-approve-border-color: var(--warning-color);
    --flow-step-ordered-background: light-dark(#DFF0DC, #1F3324);
    --flow-step-ordered-color: light-dark(#2E5E22, #A9D69B);
    --flow-step-ordered-border-color: light-dark(#B5D4A8, #35502C);
    --flow-step-delivered-background: light-dark(#173841, #E5F7B1);
    --flow-step-delivered-color: light-dark(white, #173841);
}