/* WasteWhere portal theme generated from Design/design.json. Do not edit by hand. */
:root {
    color-scheme: light;
    --brand-primary: #3E9555;
    --brand-primary-hover: #337C47;
    --brand-primary-active: #2A663B;
    --brand-accent: #53B8D2;
    --brand-info: #9EDCAC;

    --color-primary: var(--brand-primary);
    --color-accent: var(--brand-accent);
    --portal-primary: var(--brand-primary);
    --portal-primary-strong: var(--brand-primary-active);
    /* Core.Portal.Chrome shell mark/app-rail/selection chrome use --portal-accent /
       --portal-brand-accent as the primary brand chrome color (OfferRunner maps this to
       blue). WasteWhere maps those to green primary; --brand-accent stays cyan for
       secondary chart/KPI accents. */
    --portal-accent: var(--brand-primary);
    --portal-brand-accent: var(--brand-primary);
    --portal-brand-accent-hover: var(--brand-primary-hover);
    --cds-brand-accent: var(--brand-primary);
    --cds-brand-accent-hover: var(--brand-primary-hover);
    --portal-focus-ring: color-mix(in srgb, var(--brand-primary) 28%, transparent);

    --portal-ink: #14201a;
    --portal-muted: #5d6d62;
    --portal-surface: #ffffff;
    --portal-canvas: #eef4ee;
    /* Core.Portal.Chrome semantic surfaces: the authenticated page background
       uses the tinted canvas; cards and the sidebar stay white. */
    --cds-surface-page: #eef4ee;
    --cds-surface-card: #ffffff;
    --cds-surface-toolbar: #fbfdfb;
    --portal-public-surface: #ffffff;
    --portal-border: #d9e4dc;
    --portal-input-surface: #ffffff;
    --portal-input-border: #d9e4dc;
    --portal-on-primary: #ffffff;
    --portal-topbar: #17201b;
    --portal-topbar-border: rgba(255, 255, 255, 0.08);
    --portal-on-topbar: #ffffff;
    --portal-topbar-muted: rgba(255, 255, 255, 0.78);
    --portal-topbar-subtle: rgba(255, 255, 255, 0.72);
    --portal-topbar-chip-bg: rgba(255, 255, 255, 0.08);
    --portal-topbar-hover-bg: rgba(255, 255, 255, 0.1);
    --portal-warning: #d5b35f;
    --portal-success-border: #8fcea3;
    --portal-danger-border: #df8f86;
    --portal-soft-surface: #eef5f0;
    --portal-soft-surface-strong: #eef3f0;
    --portal-card-soft: #fbfdfb;
    --portal-callout-surface: #f6faf7;
    --portal-filter-surface: #f8fbf9;
    --portal-warning-surface: #fff9e9;
    --portal-warning-strong: #5f4600;
    --portal-status-ready-bg: #e6f4ea;
    --portal-status-ready-text: var(--brand-primary-active);
    --portal-status-pending-bg: #fff6e6;
    --portal-status-pending-text: #8a6116;
    --portal-status-active-bg: #e8f2ff;
    --portal-status-active-text: #2459a6;
    --portal-status-planned-bg: #eef1f4;
    --portal-status-planned-text: #4a5568;
    --portal-success-surface: #e9f7ed;
    --portal-error-surface: #fdeceb;
    --portal-alert-surface: #fff4d8;
    --portal-alert-info-surface: #e8f2ff;
    --portal-alert-info-border: #9fc8ff;
    --portal-alert-info-text: #2459a6;
    --portal-alert-danger-surface: #fdeceb;
    --portal-alert-danger-text: #842029;
    --portal-alert-success-surface: #eaf7ee;
    --portal-alert-success-border: #8fcea3;
    --portal-alert-success-text: var(--brand-primary-active);
    --portal-panel-shadow: 0 16px 40px rgba(20, 32, 26, 0.18);
    --portal-overlay-backdrop: rgba(20, 32, 26, 0.45);
    --portal-overlay-shadow: 0 24px 60px rgba(20, 32, 26, 0.24);
    --portal-interactive-shadow: 0 8px 18px rgba(20, 32, 26, 0.08);
    --portal-sample-surface: #fff4cc;
    --portal-sample-border: #b7791f;
    --portal-sample-text: #6f3f00;
    --portal-public-brand-background: linear-gradient(160deg, #7ECB8E 0%, #3E9555 58%, #14201a 100%);

    --kendo-color-primary: var(--brand-primary);
    --kendo-color-primary-hover: var(--brand-primary-hover);
    --kendo-color-primary-active: var(--brand-primary-active);
    --kendo-color-app-surface: var(--portal-canvas);
    --kendo-color-surface: var(--portal-surface);
    --kendo-color-surface-alt: var(--portal-soft-surface);
    --kendo-color-on-app-surface: var(--portal-ink);
    --kendo-color-subtle: var(--portal-muted);
    --kendo-color-border: var(--portal-border);
    --kendo-color-base: var(--portal-surface);
    --kendo-color-base-hover: var(--portal-soft-surface);
    --kendo-color-base-active: var(--portal-soft-surface-strong);
    --kendo-color-base-emphasis: var(--portal-border);
    --kendo-color-base-on-surface: var(--portal-ink);
    --kendo-body-bg: var(--portal-canvas);
    --kendo-body-text: var(--portal-ink);
    --kendo-component-bg: var(--portal-surface);
    --kendo-component-text: var(--portal-ink);
    --kendo-component-border: var(--portal-border);
    --kendo-grid-bg: var(--portal-surface);
    --kendo-grid-text: var(--portal-ink);
    --kendo-grid-border: var(--portal-border);
    --kendo-input-bg: var(--portal-input-surface);
    --kendo-input-text: var(--portal-ink);
    --kendo-input-border: var(--portal-input-border);
    --kendo-popup-bg: var(--portal-surface);
    --kendo-popup-text: var(--portal-ink);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --brand-primary: #7ECB8E;
    --brand-primary-hover: #9EDCAC;
    --brand-primary-active: #B9E8C5;
    --brand-accent: #53B8D2;
    --brand-info: #9EDCAC;

    --color-primary: var(--brand-primary);
    --color-accent: var(--brand-accent);
    --portal-primary: var(--brand-primary);
    --portal-primary-strong: var(--brand-primary-active);
    --portal-accent: var(--brand-primary);
    --portal-brand-accent: var(--brand-primary);
    --portal-brand-accent-hover: var(--brand-primary-hover);
    --cds-brand-accent: var(--brand-primary);
    --cds-brand-accent-hover: var(--brand-primary-hover);
    --portal-focus-ring: color-mix(in srgb, var(--brand-primary) 28%, transparent);

    --portal-ink: var(--core-token-theme-dark-app-text, #e8eaed);
    --portal-muted: var(--core-token-theme-dark-app-muted, #9aa0a6);
    --portal-surface: var(--core-token-theme-dark-app-surface, #1f2328);
    --portal-canvas: var(--core-token-theme-dark-app-background, #121416);
    --portal-public-surface: var(--core-token-theme-dark-app-background, #121416);
    --portal-border: var(--core-token-theme-dark-app-border, rgba(255, 255, 255, 0.14));
    --portal-input-surface: var(--core-token-theme-dark-app-input, #171b20);
    --portal-input-border: var(--core-token-theme-dark-app-border, rgba(255, 255, 255, 0.14));
    --portal-on-primary: var(--core-token-theme-dark-app-text-inverse, #121416);
    --portal-topbar: #0b100d;
    --portal-topbar-border: rgba(255, 255, 255, 0.06);
    --portal-on-topbar: #f7fff9;
    --portal-topbar-muted: #d9e7dd;
    --portal-topbar-subtle: #b9cbbf;
    --portal-topbar-chip-bg: rgba(255, 255, 255, 0.08);
    --portal-topbar-hover-bg: rgba(255, 255, 255, 0.12);
    --portal-soft-surface: var(--core-token-theme-dark-app-surface-alt, #252a31);
    --portal-soft-surface-strong: var(--core-token-theme-dark-app-surface-strong, #2b3138);
    --portal-card-soft: var(--core-token-theme-dark-app-surface, #1f2328);
    --portal-callout-surface: var(--core-token-theme-dark-app-surface-alt, #252a31);
    --portal-filter-surface: var(--core-token-theme-dark-app-surface-alt, #252a31);
    --portal-warning-surface: var(--core-token-theme-dark-app-alert-warning-surface, rgba(231, 147, 21, 0.16));
    --portal-warning-strong: var(--core-token-theme-dark-app-alert-warning-text, #ffd185);
    --portal-status-ready-bg: var(--core-token-theme-dark-app-alert-success-surface, rgba(69, 175, 110, 0.16));
    --portal-status-ready-text: var(--core-token-theme-dark-app-alert-success-text, #a9dfbe);
    --portal-status-pending-bg: var(--core-token-theme-dark-app-alert-warning-surface, rgba(231, 147, 21, 0.16));
    --portal-status-pending-text: var(--core-token-theme-dark-app-alert-warning-text, #ffd185);
    --portal-status-active-bg: var(--core-token-theme-dark-app-alert-info-surface, rgba(34, 128, 224, 0.16));
    --portal-status-active-text: var(--core-token-theme-dark-app-alert-info-text, #90cdf8);
    --portal-status-planned-bg: var(--core-token-theme-dark-app-surface-alt, #252a31);
    --portal-status-planned-text: #c0ccd8;
    --portal-success-surface: var(--core-token-theme-dark-app-alert-success-surface, rgba(69, 175, 110, 0.16));
    --portal-error-surface: var(--core-token-theme-dark-app-alert-error-surface, rgba(207, 61, 61, 0.14));
    --portal-alert-surface: var(--core-token-theme-dark-app-alert-warning-surface, rgba(231, 147, 21, 0.16));
    --portal-alert-info-surface: var(--core-token-theme-dark-app-alert-info-surface, rgba(34, 128, 224, 0.16));
    --portal-alert-info-border: var(--core-token-theme-dark-app-alert-info-border, rgba(116, 188, 244, 0.44));
    --portal-alert-info-text: var(--core-token-theme-dark-app-alert-info-text, #90cdf8);
    --portal-alert-danger-surface: var(--core-token-theme-dark-app-alert-error-surface, rgba(207, 61, 61, 0.14));
    --portal-alert-danger-text: var(--core-token-theme-dark-app-alert-error-text, #f8a4a4);
    --portal-alert-success-surface: var(--core-token-theme-dark-app-alert-success-surface, rgba(69, 175, 110, 0.16));
    --portal-alert-success-border: var(--core-token-theme-dark-app-alert-success-border, rgba(148, 214, 174, 0.44));
    --portal-alert-success-text: var(--core-token-theme-dark-app-alert-success-text, #a9dfbe);
    --portal-panel-shadow: var(--core-token-theme-dark-app-shadow-3, 0 14px 40px rgba(0, 0, 0, 0.42));
    --portal-overlay-backdrop: rgba(0, 0, 0, 0.62);
    --portal-overlay-shadow: var(--core-token-theme-dark-app-shadow-4, 0 20px 56px rgba(0, 0, 0, 0.48));
    --portal-interactive-shadow: var(--core-token-theme-dark-app-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.36));
    --portal-sample-surface: var(--core-token-theme-dark-app-alert-warning-surface, rgba(231, 147, 21, 0.16));
    --portal-sample-border: var(--core-token-theme-dark-app-alert-warning-border, rgba(253, 195, 106, 0.44));
    --portal-sample-text: var(--core-token-theme-dark-app-alert-warning-text, #ffd185);
    --portal-public-brand-background: linear-gradient(160deg, #225431 0%, #14331D 58%, #060806 100%);

    --kendo-color-primary: var(--brand-primary);
    --kendo-color-primary-hover: var(--brand-primary-hover);
    --kendo-color-primary-active: var(--brand-primary-active);
    --kendo-color-app-surface: var(--portal-canvas);
    --kendo-color-surface: var(--portal-surface);
    --kendo-color-surface-alt: var(--portal-soft-surface);
    --kendo-color-on-app-surface: var(--portal-ink);
    --kendo-color-subtle: var(--portal-muted);
    --kendo-color-border: var(--portal-border);
    --kendo-color-base: var(--portal-surface);
    --kendo-color-base-hover: var(--portal-soft-surface);
    --kendo-color-base-active: var(--portal-soft-surface-strong);
    --kendo-color-base-emphasis: var(--portal-border);
    --kendo-color-base-on-surface: var(--portal-ink);
    --kendo-body-bg: var(--portal-canvas);
    --kendo-body-text: var(--portal-ink);
    --kendo-component-bg: var(--portal-surface);
    --kendo-component-text: var(--portal-ink);
    --kendo-component-border: var(--portal-border);
    --kendo-grid-bg: var(--portal-surface);
    --kendo-grid-text: var(--portal-ink);
    --kendo-grid-border: var(--portal-border);
    --kendo-input-bg: var(--portal-input-surface);
    --kendo-input-text: var(--portal-ink);
    --kendo-input-border: var(--portal-input-border);
    --kendo-popup-bg: var(--portal-surface);
    --kendo-popup-text: var(--portal-ink);
}

html[data-text-scale="small"] { font-size: 87.5%; }
html[data-text-scale="default"] { font-size: 100%; }
html[data-text-scale="large"] { font-size: 106.25%; }
html[data-text-scale="xlarge"] { font-size: 112.5%; }

@media (prefers-reduced-motion: reduce) {
    :root {
        --portal-motion-short: 0ms;
        --core-token-duration-fast: 0ms;
        --core-token-duration-normal: 0ms;
        --core-token-motion-duration-fast: 0ms;
        --core-token-motion-duration-normal: 0ms;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --portal-border: color-mix(in srgb, var(--portal-ink) 34%, transparent);
        --portal-focus-ring: var(--brand-primary);
    }
}