:root {
    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));

    --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));
    --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);
}