/*
 * DESIGN.md 4.0.0 front matter as CSS custom properties (Liquid Glass, D55).
 * Every colour role below is copied from that front matter's `colors:` group; DesignTokenTests fails
 * when the two disagree. A role is --bc-{role}; the other groups are --bc-glass-*, --bc-type-*,
 * --bc-radius-*, --bc-shadow-*, --bc-spring-* / --bc-duration-*, and the layout sizes (DESIGN.md 2, 3, 5).
 *
 * Themes (DESIGN.md 2.2): html[data-theme] is always set before first paint by each layout's inline
 * script — "system" (the default: the operating system decides through the media query below), "light"
 * or "dark" (the viewer's choice, stored by theme.js). Light is also what a page without the attribute
 * shows. The dark palette therefore appears twice, under the media query for Sistem and under
 * :root[data-theme="dark"] for Koyu; DesignTokenTests fails when the two copies disagree.
 *
 * --bc-logo-container is the one colour here that is not a front-matter role: it names one of them per
 * theme, so that an uploaded logo keeps a light backing in both (D46, D47).
 */

:root {
    color-scheme: light;

    /* ---- Colour roles (DESIGN.md 2.1) */
    --bc-background: #F2F3F7;
    --bc-content: #FFFFFF;
    --bc-content-secondary: #F6F7F9;
    --bc-label: #1D1D1F;
    --bc-label-secondary: #5B5F69;
    --bc-label-tertiary: #8A8E98;
    --bc-separator: rgb(60 60 67 / 0.18);
    --bc-separator-strong: #7C808A;
    --bc-fill: rgb(118 118 128 / 0.12);
    --bc-fill-hover: rgb(118 118 128 / 0.18);
    --bc-tint: #3557A4;
    --bc-tint-fill: #3557A4;
    --bc-on-tint: #FFFFFF;
    --bc-tint-soft: rgb(53 87 164 / 0.12);
    --bc-destructive: #B51319;
    --bc-destructive-fill: #C4161C;
    --bc-destructive-soft: rgb(196 22 28 / 0.1);
    --bc-success: #156A36;
    --bc-success-soft: rgb(28 122 58 / 0.12);
    /* The rate card's wash of its trend colour (D65); above it label-secondary falls under 4.5:1. */
    --bc-trend-wash: 14%;
    --bc-warning: #A34700;
    --bc-warning-soft: rgb(255 152 56 / 0.14);
    --bc-stage-new: #8A3FC7;
    --bc-stage-planning: #5048C8;
    --bc-stage-installation: #1F6FD1;
    --bc-stage-commissioning: #0F7F8C;
    --bc-handoff-fill: #FF9838;
    --bc-on-handoff: #3A1D00;
    --bc-scrim: rgb(0 0 0 / 0.25);

    /* The square behind an organization's logo or a person's picture (DESIGN.md 2.1). Light in both
       themes: a logo is drawn for a light page, and a transparent one would vanish on a dark one. */
    --bc-logo-container: var(--bc-content-secondary);

    /* A solid control raised off a glass track: the segmented control's current item (DESIGN.md 6.4). In
       dark it is a step lighter than the content, so it still stands off the glass. */
    --bc-control-raised: var(--bc-content);

    /* The window's background (DESIGN.md 2.3), the same on the app and the sign-in pages: one diagonal
       gradient from a brand-blue tint at the top leading corner, through the plain background, to a tint of
       the logo's orange (#ED7B26) at the bottom trailing corner. Its last layer is the plain background, which
       the theme-color meta reads and which shows wherever the gradient does not paint. */
    --bc-brand-gradient-blue: #E2E8F5;
    --bc-brand-gradient-orange: #FBE6D4;
    --bc-app-background:
        linear-gradient(135deg, var(--bc-brand-gradient-blue), var(--bc-background) 50%, var(--bc-brand-gradient-orange)),
        var(--bc-background);

    /* ---- Glass materials (DESIGN.md 2.4). The fills are per theme; --bc-glass-regular / -thin are what
       components read, and fall back to the solid colour without backdrop-filter, under reduced
       transparency and under more contrast (the groups at the end of this file). */
    --bc-glass-regular-fill: rgb(255 255 255 / 0.66);
    --bc-glass-thin-fill: rgb(255 255 255 / 0.6);
    --bc-glass-solid: var(--bc-content);
    --bc-glass-regular: var(--bc-glass-regular-fill);
    --bc-glass-thin: var(--bc-glass-thin-fill);
    --bc-glass-regular-filter: blur(24px) saturate(180%);
    --bc-glass-thin-filter: blur(20px) saturate(180%);
    --bc-glass-rim: rgb(255 255 255 / 0.55);
    /* A soft glow across a large glass panel (the sign-in card), never a line on an edge. */
    --bc-glass-sheen: rgb(255 255 255 / 0.9);
    --bc-glass-shadow: rgb(26 38 64 / 0.14);
    --bc-glass-border: 1px solid var(--bc-glass-rim);
    /* Menus and popovers that hold rows to read (the account menu, the search suggestions): the regular glass
       made more solid, so a bright control under it tints it softly instead of showing through as a blot. It
       follows --bc-glass-regular into every fallback. */
    --bc-glass-popover: color-mix(in srgb, var(--bc-glass-solid) 55%, var(--bc-glass-regular));
    /* The sign-in pages' card (admin-auth.css), on the same rim and edge; its fields are the ordinary ones. */
    --bc-glass-fill: color-mix(in srgb, var(--bc-content) 66%, transparent);

    /* ---- Depth (DESIGN.md 5.2) */
    --bc-shadow-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.07);
    --bc-shadow-2: 0 4px 14px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
    --bc-shadow-3: 0 16px 48px rgb(0 0 0 / 0.16), 0 2px 8px rgb(0 0 0 / 0.08);

    /* ---- Shape (DESIGN.md 5.1) */
    --bc-radius-field: 10px;
    --bc-radius-menu: 12px;
    --bc-radius-table: 12px;
    --bc-radius-card: 14px;
    --bc-radius-group: 14px;
    --bc-radius-sidebar: 18px;
    --bc-radius-sheet: 22px;
    --bc-radius-bottom-sheet: 28px;
    --bc-radius-capsule: 9999px;

    /* The 4px spacing scale: --bc-space-{n} is n * 4px. */
    --bc-space-1: 4px;
    --bc-space-2: 8px;
    --bc-space-3: 12px;
    --bc-space-4: 16px;
    --bc-space-5: 20px;
    --bc-space-6: 24px;
    --bc-space-7: 28px;
    --bc-space-8: 32px;
    --bc-space-9: 36px;
    --bc-space-10: 40px;
    --bc-space-11: 44px;
    --bc-space-12: 48px;

    /* ---- Sizes (DESIGN.md 5.1). Breakpoints are written as ranges in media queries, because there is no
       build step for custom media: compact (width < 600px), medium 600–1199px, large (min-width: 1200px);
       840px only where a screen already uses it. */
    --bc-sidebar-width: 248px;
    --bc-sidebar-collapsed-width: 54px;
    --bc-sidebar-inset: 8px;
    --bc-toolbar-height: 52px;
    --bc-tab-bar-height: 64px;
    --bc-control-height: 36px;
    --bc-field-height: 36px;
    --bc-row-height: 44px;
    --bc-target-min: 24px;

    /* ---- Motion (DESIGN.md 5.3): damped springs sampled into linear() easings. */
    --bc-spring-snappy: linear(0, 0.079, 0.243, 0.425, 0.588, 0.721, 0.821, 0.892, 0.939, 0.97, 0.988, 0.998, 1.003, 1.005, 1.005, 1.004, 1);
    --bc-spring-smooth: linear(0, 0.096, 0.277, 0.46, 0.613, 0.731, 0.816, 0.877, 0.918, 0.946, 0.965, 0.978, 0.986, 0.991, 0.994, 0.996, 0.998, 0.999, 1);
    --bc-spring-bouncy: linear(0, 0.085, 0.276, 0.498, 0.702, 0.864, 0.978, 1.046, 1.077, 1.083, 1.074, 1.057, 1.038, 1.022, 1.009, 1, 0.995, 0.993, 0.993, 0.994, 0.996, 0.997, 1);
    --bc-ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
    --bc-duration-snappy: 250ms;
    --bc-duration-smooth: 420ms;
    --bc-duration-bouncy: 380ms;
    --bc-duration-fade: 150ms;

    /* Focus (DESIGN.md 9) */
    --bc-focus-ring: 2px solid var(--bc-tint);
    --bc-focus-offset: 2px;

    /* ---- Type (DESIGN.md 3.1). Inter, tracked per its dynamic metrics; phone sizes in the group below. */
    --bc-font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    --bc-font-family-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --bc-icon-font-family: "Material Symbols Rounded";

    --bc-type-large-title-size: 28px;
    --bc-type-large-title-line: 34px;
    --bc-type-large-title-weight: 700;
    --bc-type-large-title-tracking: -0.021em;

    --bc-type-title-1-size: 22px;
    --bc-type-title-1-line: 28px;
    --bc-type-title-1-weight: 650;
    --bc-type-title-1-tracking: -0.018em;

    --bc-type-title-2-size: 17px;
    --bc-type-title-2-line: 22px;
    --bc-type-title-2-weight: 600;
    --bc-type-title-2-tracking: -0.013em;

    --bc-type-headline-size: 14px;
    --bc-type-headline-line: 20px;
    --bc-type-headline-weight: 600;
    --bc-type-headline-tracking: -0.006em;

    --bc-type-body-size: 14px;
    --bc-type-body-line: 20px;
    --bc-type-body-weight: 400;
    --bc-type-body-tracking: -0.006em;

    --bc-type-callout-size: 13px;
    --bc-type-callout-line: 18px;
    --bc-type-callout-weight: 400;
    --bc-type-callout-tracking: -0.003em;

    --bc-type-footnote-size: 12px;
    --bc-type-footnote-line: 16px;
    --bc-type-footnote-weight: 400;
    --bc-type-footnote-tracking: 0em;

    --bc-type-caption-size: 11px;
    --bc-type-caption-line: 14px;
    --bc-type-caption-weight: 500;
    --bc-type-caption-tracking: 0.005em;

    --bc-type-mono-body-size: 13px;
    --bc-type-mono-body-line: 18px;
    --bc-type-mono-body-weight: 400;
    --bc-type-mono-body-tracking: 0px;
}

/* Phones (DESIGN.md 3.1, 5.1): larger type and 44px targets. */
@media (width < 600px) {
    :root {
        --bc-control-height: 44px;
        --bc-field-height: 44px;
        --bc-row-height: 52px;
        --bc-target-min: 44px;

        --bc-type-large-title-size: 30px;
        --bc-type-large-title-line: 36px;
        --bc-type-large-title-tracking: -0.021em;
        --bc-type-title-2-size: 18px;
        --bc-type-title-2-line: 24px;
        --bc-type-title-2-tracking: -0.014em;
        --bc-type-headline-size: 16px;
        --bc-type-headline-line: 22px;
        --bc-type-headline-tracking: -0.011em;
        --bc-type-body-size: 16px;
        --bc-type-body-line: 22px;
        --bc-type-body-tracking: -0.011em;
        --bc-type-callout-size: 15px;
        --bc-type-callout-line: 20px;
        --bc-type-callout-tracking: -0.009em;
        --bc-type-footnote-size: 13px;
        --bc-type-footnote-line: 18px;
        --bc-type-footnote-tracking: -0.003em;
        --bc-type-caption-size: 12px;
        --bc-type-caption-line: 16px;
        --bc-type-caption-tracking: 0em;
    }
}

/* Sistem: the OS decides (the default, DESIGN.md 2.2). */
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --bc-background: #0B0C10;
        --bc-content: #1C1C1E;
        --bc-content-secondary: #242427;
        --bc-label: #F5F5F7;
        --bc-label-secondary: #A3A6AE;
        --bc-label-tertiary: #6E717A;
        --bc-separator: rgb(84 84 88 / 0.55);
        --bc-separator-strong: #7A7D86;
        --bc-fill: rgb(118 118 128 / 0.24);
        --bc-fill-hover: rgb(118 118 128 / 0.32);
        --bc-tint: #8DAAF5;
        --bc-tint-fill: #3D63C2;
        --bc-on-tint: #FFFFFF;
        --bc-tint-soft: rgb(141 170 245 / 0.18);
        --bc-destructive: #FF7A72;
        --bc-destructive-fill: #C9302C;
        --bc-destructive-soft: rgb(255 107 99 / 0.16);
        --bc-success: #4ED07A;
        --bc-success-soft: rgb(78 208 122 / 0.18);
        --bc-trend-wash: 10%;
        --bc-warning: #FFB04A;
        --bc-warning-soft: rgb(255 176 74 / 0.18);
        --bc-stage-new: #C78BFF;
        --bc-stage-planning: #8E89FF;
        --bc-stage-installation: #5AA9FF;
        --bc-stage-commissioning: #47C9D6;
        --bc-handoff-fill: #FF9838;
        --bc-on-handoff: #3A1D00;
        --bc-scrim: rgb(0 0 0 / 0.5);

        --bc-logo-container: var(--bc-label);
        --bc-control-raised: color-mix(in srgb, var(--bc-label) 14%, var(--bc-content));

        --bc-brand-gradient-blue: #16223F;
        --bc-brand-gradient-orange: #3A2210;

        --bc-glass-regular-fill: rgb(36 36 40 / 0.72);
        --bc-glass-thin-fill: rgb(36 36 40 / 0.7);
        --bc-glass-solid: #252528;
        --bc-glass-rim: rgb(255 255 255 / 0.12);
        --bc-glass-sheen: rgb(255 255 255 / 0.2);
        --bc-glass-shadow: rgb(0 0 0 / 0.4);

        --bc-shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.2);
        --bc-shadow-2: 0 4px 14px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.25);
        --bc-shadow-3: 0 16px 48px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.3);
    }
}

/* Koyu: the viewer chose dark whatever the OS says. The same values as the block above. */
:root[data-theme="dark"] {
    --bc-background: #0B0C10;
    --bc-content: #1C1C1E;
    --bc-content-secondary: #242427;
    --bc-label: #F5F5F7;
    --bc-label-secondary: #A3A6AE;
    --bc-label-tertiary: #6E717A;
    --bc-separator: rgb(84 84 88 / 0.55);
    --bc-separator-strong: #7A7D86;
    --bc-fill: rgb(118 118 128 / 0.24);
    --bc-fill-hover: rgb(118 118 128 / 0.32);
    --bc-tint: #8DAAF5;
    --bc-tint-fill: #3D63C2;
    --bc-on-tint: #FFFFFF;
    --bc-tint-soft: rgb(141 170 245 / 0.18);
    --bc-destructive: #FF7A72;
    --bc-destructive-fill: #C9302C;
    --bc-destructive-soft: rgb(255 107 99 / 0.16);
    --bc-success: #4ED07A;
    --bc-success-soft: rgb(78 208 122 / 0.18);
    --bc-trend-wash: 10%;
    --bc-warning: #FFB04A;
    --bc-warning-soft: rgb(255 176 74 / 0.18);
    --bc-stage-new: #C78BFF;
    --bc-stage-planning: #8E89FF;
    --bc-stage-installation: #5AA9FF;
    --bc-stage-commissioning: #47C9D6;
    --bc-handoff-fill: #FF9838;
    --bc-on-handoff: #3A1D00;
    --bc-scrim: rgb(0 0 0 / 0.5);

    --bc-logo-container: var(--bc-label);
    --bc-control-raised: color-mix(in srgb, var(--bc-label) 14%, var(--bc-content));

    --bc-brand-gradient-blue: #16223F;
    --bc-brand-gradient-orange: #3A2210;

    --bc-glass-regular-fill: rgb(36 36 40 / 0.72);
    --bc-glass-thin-fill: rgb(36 36 40 / 0.7);
    --bc-glass-solid: #252528;
    --bc-glass-rim: rgb(255 255 255 / 0.12);
    --bc-glass-sheen: rgb(255 255 255 / 0.2);
    --bc-glass-shadow: rgb(0 0 0 / 0.4);

    --bc-shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.2);
    --bc-shadow-2: 0 4px 14px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.25);
    --bc-shadow-3: 0 16px 48px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.3);
}

/* Firefox reports backdrop-filter as supported but does not blur when it renders in software (as headless
   Firefox does): the page then shows through sharply, and a sheet's form over a table is hard to
   read. No script or query can tell, so in Firefox the glass is mostly solid — the fill mixed 70% toward the
   solid material, about 90% opaque — and still blurs where the GPU does (DESIGN.md 2.4, 9). -moz-orient
   exists only in Firefox. */
@supports (-moz-orient: inline) {
    :root {
        --bc-glass-regular: color-mix(in srgb, var(--bc-glass-solid) 70%, var(--bc-glass-regular-fill));
        --bc-glass-thin: color-mix(in srgb, var(--bc-glass-solid) 70%, var(--bc-glass-thin-fill));
    }
}

/* Glass falls back to a solid surface with the same rim where it cannot blur, and wherever the viewer
   asked for less transparency (DESIGN.md 2.4). These come after the theme blocks and only switch which
   per-theme colour --bc-glass-regular / -thin name, so they hold in both themes. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --bc-glass-regular: var(--bc-glass-solid);
        --bc-glass-thin: var(--bc-glass-solid);
        --bc-glass-regular-filter: none;
        --bc-glass-thin-filter: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --bc-glass-regular: var(--bc-glass-solid);
        --bc-glass-thin: var(--bc-glass-solid);
        --bc-glass-regular-filter: none;
        --bc-glass-thin-filter: none;
    }
}

@media (prefers-contrast: more) {
    :root {
        --bc-glass-regular: var(--bc-glass-solid);
        --bc-glass-thin: var(--bc-glass-solid);
        --bc-glass-regular-filter: none;
        --bc-glass-thin-filter: none;
        --bc-glass-border: 1px solid var(--bc-separator-strong);
    }
}

/* Forced colours (Windows High Contrast) paint every surface Canvas but keep its alpha: the glass is made
   solid first, so no blurred page shows through the system colours (DESIGN.md 9). */
@media (forced-colors: active) {
    :root {
        --bc-glass-regular: var(--bc-glass-solid);
        --bc-glass-thin: var(--bc-glass-solid);
        --bc-glass-regular-filter: none;
        --bc-glass-thin-filter: none;
    }
}

/* The UA's own widgets (scrollbars, native controls) follow the theme in effect. Scrollbars are a
   strong-separator thumb on a transparent track, so a scrolling surface keeps its own colour to the edge. */
:root {
    scrollbar-color: var(--bc-separator-strong) transparent;
}

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

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

@media (prefers-reduced-motion: reduce) {
    :root {
        --bc-duration-snappy: 0.01ms;
        --bc-duration-smooth: 0.01ms;
        --bc-duration-bouncy: 0.01ms;
        --bc-duration-fade: 0.01ms;
    }
}