/* Schedulance design tokens (layer sched.tokens). Canonical source of every --sched-* brand/neutral/scale value. Extracted from schedulance.css so the Keycloak `schedulance` theme can build-COPY this one file (Dockerfile) and re-skin Keycloak onto the same values - no brand value is authored twice. schedulance.css @imports this into layer sched.tokens; the CssContractTests read schedulance.css + this file together. Raw hex/length literals are permitted here because they live in custom-property *definitions* (the tokenization point); components consume the semantic slots, never raw hex. */ @layer sched.tokens { @property --sched-switch-thumb-position { syntax: ""; inherits: false; initial-value: 0%; } :root { color-scheme: light dark; --sched-bg: #f4f5f7; --sched-surface: #ffffff; --sched-surface-2: #fafbfc; --sched-line: #e6e8ec; --sched-line-2: #edeff2; --sched-line-strong: #d7dbe0; --sched-ink: #1c2230; --sched-ink-2: #5a6273; --sched-ink-3: #8a92a1; --sched-ink-4: #aeb5c1; --sched-brand: #1f4fb0; --sched-brand-hover: #1a4396; --sched-brand-soft: #eaf0fb; --sched-brand-dark: #7aa7ff; --sched-brand-hover-dark: #9bbcff; /* Deep band: the marketing site inverts one or two sections per page onto a near-black plate. These are a self-contained foreground set so the band reads correctly in BOTH schemes - in dark mode the plate becomes an elevated surface above the darker page, which is why every slot here has a dark-scheme entry rather than being hardcoded white. */ --sched-ink-deep: #171b27; --sched-ink-on-deep: #ffffff; --sched-ink-on-deep-2: #a7afc2; --sched-ink-on-deep-3: #7e8aa8; --sched-line-on-deep: rgba(255, 255, 255, .1); --sched-brand-on-deep: #8fa8d8; --sched-live: #13b97a; --sched-status-sched: #2563eb; --sched-status-sched-bg: #eef3fe; --sched-status-sched-bd: #cfe0fc; --sched-status-enroute: #6d49c7; --sched-status-enroute-bg: #f2eefb; --sched-status-enroute-bd: #e0d6f6; --sched-status-onsite: #0e865a; --sched-status-onsite-bg: #e7f5ee; --sched-status-onsite-bd: #c7e8d6; --sched-status-done: #6b7587; --sched-status-done-bg: #f2f4f6; --sched-status-done-bd: #e2e6eb; --sched-status-hold: #b06a12; --sched-status-hold-bg: #fbf1df; --sched-status-hold-bd: #f0dcb4; --sched-status-emer: #ce3e32; --sched-status-emer-bg: #fcebe8; --sched-status-emer-bd: #f4ccc5; --sched-font-ui: "Hanken Grotesk", system-ui, sans-serif; --sched-font-sans: var(--sched-font-ui); --sched-font-mono: "Spline Sans Mono", ui-monospace, monospace; --sched-font-size-3xs: .59375rem; --sched-font-size-2xs: .625rem; --sched-font-size-2xs-plus: .65625rem; --sched-font-size-xs: .6875rem; --sched-font-size-xs-plus: .71875rem; --sched-font-size-sm: .75rem; --sched-font-size-sm-plus: .78125rem; --sched-font-size-md: .8125rem; --sched-font-size-md-plus: .84375rem; --sched-font-size-base: .875rem; --sched-font-size-base-plus: .9375rem; --sched-font-size-lg: 1rem; --sched-font-size-lg-plus: 1.0625rem; --sched-font-size-xl: 1.125rem; --sched-font-size-xl-plus: 1.25rem; --sched-font-size-2xl: 1.375rem; --sched-font-size-3xl: 1.4375rem; --sched-font-size-4xl: 1.5625rem; --sched-font-size-5xl: 1.75rem; --sched-font-size-6xl: 1.875rem; /* Display scale - marketing headlines only. Deliberately a SEPARATE ladder from the --sched-font-size-* UI scale, which tops out at 6xl (30px) because a console never needs more; mixing 54px rungs into it would invite display sizes into app chrome. The --sched-display-* role tokens below are fluid: one clamp() replaces the three per-breakpoint rungs the reference site hand-authored per headline, so a marketing recipe declares a role and gets the whole responsive curve. */ --sched-display-3xs: 1.9375rem; --sched-display-2xs: 2rem; --sched-display-xs: 2.125rem; --sched-display-sm: 2.375rem; --sched-display-md: 2.5rem; --sched-display-lg: 2.625rem; --sched-display-xl: 3.125rem; --sched-display-2xl: 3.25rem; --sched-display-3xl: 3.375rem; --sched-display-hero: clamp(var(--sched-display-xs), 2.2vw + 1.61rem, var(--sched-display-3xl)); --sched-display-page: clamp(var(--sched-display-3xs), 2.07vw + 1.47rem, var(--sched-display-xl)); --sched-display-section: clamp(var(--sched-display-2xs), .87vw + 1.8rem, var(--sched-display-md)); --sched-display-band: clamp(var(--sched-display-2xs), 1.09vw + 1.75rem, var(--sched-display-lg)); --sched-display-metric: clamp(var(--sched-display-xs), 1.96vw + 1.68rem, var(--sched-display-2xl)); --sched-display-feature: var(--sched-display-3xs); --sched-font-weight-regular: 400; --sched-font-weight-medium: 500; --sched-font-weight-semibold: 600; --sched-font-weight-bold: 700; --sched-font-weight-extrabold: 800; --sched-font-weight-black: 900; --sched-line-height-none: 1; --sched-line-height-display: 1.04; --sched-line-height-compact: 1.05; --sched-line-height-tight: 1.1; --sched-line-height-heading: 1.15; --sched-line-height-title: 1.18; --sched-line-height-snug: 1.2; --sched-line-height-row: 1.3; --sched-line-height-caption: 1.35; --sched-line-height-ui: 1.4; --sched-line-height-base: 1.45; --sched-line-height-relaxed: 1.5; --sched-line-height-counter-sm: 1.0625rem; --sched-line-height-counter-md: 1.125rem; --sched-line-height-counter-lg: 1.375rem; /* Optical tracking. Display type needs negative tracking to stop large glyphs reading loose; --sched-tracking-caps is the positive counterpart for uppercase eyebrows. */ --sched-tracking-display: -.03em; --sched-tracking-tight: -.022em; --sched-tracking-snug: -.015em; --sched-tracking-normal: -.01em; --sched-tracking-caps: .06em; --sched-border-width-hairline: 1px; --sched-border-width-strong: .125rem; --sched-border-width-caret: var(--sched-border-width-strong); --sched-radius-none: 0; --sched-radius-2xs: .125rem; --sched-radius-xs: .1875rem; --sched-radius-sm: .3125rem; --sched-radius-md: .375rem; --sched-radius-lg: .4375rem; --sched-radius-control: .5rem; --sched-radius-avatar: .5625rem; --sched-radius-popover: .625rem; --sched-radius-panel: .6875rem; --sched-radius-card: .75rem; --sched-radius-xl: .8125rem; /* Marketing radii. The console ladder stops at xl (13px) because app chrome is dense; marketing plates are physically larger, so their corners scale with them. */ --sched-radius-2xl: .875rem; --sched-radius-3xl: 1rem; --sched-radius-4xl: 1.25rem; --sched-radius-5xl: 1.5rem; --sched-radius-pill: 999rem; --sched-space-0: 0; --sched-space-0-25: .0625rem; --sched-space-0-5: .125rem; --sched-space-0-75: .1875rem; --sched-space-1: .25rem; --sched-space-1-25: .3125rem; --sched-space-1-5: .375rem; --sched-space-1-75: .4375rem; --sched-space-2: .5rem; --sched-space-2-25: .5625rem; --sched-space-2-5: .625rem; --sched-space-2-75: .6875rem; --sched-space-3: .75rem; --sched-space-3-25: .8125rem; --sched-space-3-5: .875rem; --sched-space-3-75: .9375rem; --sched-space-4: 1rem; --sched-space-4-25: 1.0625rem; --sched-space-4-5: 1.125rem; --sched-space-5: 1.25rem; --sched-space-5-5: 1.375rem; --sched-space-6: 1.5rem; --sched-space-6-5: 1.625rem; --sched-space-7: 1.75rem; --sched-space-7-5: 1.875rem; --sched-space-8: 2rem; --sched-space-8-5: 2.125rem; --sched-space-9-5: 2.375rem; --sched-space-10: 2.5rem; --sched-space-10-5: 2.625rem; --sched-space-12: 3rem; /* Marketing rhythm rungs. The console ladder stops at 12 (48px) because app chrome is dense and never needs more; marketing sections breathe at 4-6rem, so the ladder is extended rather than letting a recipe reach for a raw length. */ --sched-space-14: 3.5rem; --sched-space-15: 3.75rem; --sched-space-16: 4rem; --sched-space-18: 4.5rem; --sched-space-22: 5.5rem; --sched-space-24: 6rem; --sched-size-a11y-hidden: 1px; --sched-size-rule: .0625rem; --sched-size-0-5: .125rem; --sched-size-0-75: .1875rem; --sched-size-1-25: .3125rem; --sched-size-1-75: .4375rem; --sched-size-2: .5rem; --sched-size-2-5: .625rem; --sched-size-3-5: .875rem; --sched-size-4: 1rem; --sched-size-4-25: 1.0625rem; --sched-size-4-5: 1.125rem; --sched-size-5: 1.25rem; --sched-size-5-5: 1.375rem; --sched-size-6: 1.5rem; --sched-size-6-5: 1.625rem; --sched-size-7: 1.75rem; --sched-size-7-5: 1.875rem; --sched-size-8: 2rem; --sched-size-8-25: 2.0625rem; --sched-size-8-5: 2.125rem; --sched-size-9-5: 2.375rem; --sched-size-10: 2.5rem; --sched-size-10-5: 2.625rem; --sched-size-11-5: 2.875rem; --sched-size-12-5: 3.125rem; --sched-size-13: 3.25rem; --sched-size-13-5: 3.375rem; --sched-size-14-5: 3.625rem; --sched-size-15: 3.75rem; --sched-size-16: 4rem; --sched-size-17: 4.25rem; --sched-size-18-5: 4.625rem; --sched-size-19-5: 4.875rem; --sched-size-21-5: 5.375rem; --sched-size-23: 5.75rem; --sched-size-33: 8.25rem; --sched-size-105: 26.25rem; --sched-measure-action: 6.5rem; --sched-measure-compact: 10.625rem; --sched-measure-control: 13.75rem; --sched-field-affordance: 2.75rem; --sched-measure-search: 20.625rem; --sched-measure-search-wide: 22.5rem; --sched-measure-content: 42.5rem; --sched-measure-title: 46.25rem; --sched-measure-resource-table: 47.5rem; --sched-measure-inventory-table: 61.25rem; --sched-measure-workbook-table: 70rem; --sched-measure-service-table: 73.75rem; --sched-measure-blurb: 17.5rem; --sched-measure-narrow: 32.5rem; --sched-measure-lede: 37.5rem; --sched-measure-hero: 43.75rem; --sched-measure-prose: 62ch; --sched-measure-page: 75rem; --sched-size-icon-xs: var(--sched-size-1-75); --sched-size-icon-sm: var(--sched-size-2); --sched-size-icon-md: var(--sched-size-3-5); --sched-size-icon-lg: var(--sched-size-4-5); --sched-size-icon-xl: var(--sched-size-5); --sched-size-control-sm: var(--sched-size-8); --sched-size-control-md: var(--sched-size-8-5); --sched-size-control-lg: var(--sched-size-10); --sched-size-control-xl: var(--sched-size-11-5); --sched-size-avatar-sm: var(--sched-size-7-5); --sched-size-avatar-md: var(--sched-size-8); --sched-size-avatar-menu: var(--sched-size-8-5); --sched-size-avatar-lg: var(--sched-size-15); --sched-size-avatar-xl: var(--sched-size-16); --sched-shell-sidebar-min-inline-size: 13.75rem; --sched-shell-sidebar-max-inline-size: 16.25rem; --sched-shell-sidebar-inline-size: 14.875rem; --sched-mobile-sidebar-inline-size: min(20rem, calc(100vw - var(--sched-space-8))); --sched-mobile-sidebar-z-index: 40; --sched-mobile-sidebar-backdrop-z-index: 30; --sched-overlay-scrim: rgba(16, 20, 28, .46); --sched-page-stack-padding-inline: var(--sched-space-6-5); --sched-app-font-size: var(--sched-font-size-base); --sched-app-line-height: var(--sched-line-height-base); --sched-eyebrow-font-size: var(--sched-font-size-xs); --sched-eyebrow-font-weight: var(--sched-font-weight-bold); --sched-brand-font-size: var(--sched-font-size-lg); --sched-brand-mark-size: var(--sched-size-6-5); --sched-brand-mark-radius: var(--sched-radius-lg); --sched-nav-font-size: var(--sched-font-size-md-plus); --sched-nav-font-weight: var(--sched-font-weight-semibold); --sched-nav-icon-size: var(--sched-size-4-5); --sched-nav-count-font-size: var(--sched-font-size-xs); --sched-nav-count-font-weight: var(--sched-font-weight-bold); --sched-nav-count-min-inline-size: var(--sched-size-6); --sched-nav-count-line-height: var(--sched-line-height-counter-md); --sched-button-font-size: var(--sched-font-size-md); --sched-button-font-weight: var(--sched-font-weight-bold); --sched-control-block-size: var(--sched-size-control-md); --sched-control-compact-block-size: var(--sched-size-control-sm); --sched-control-radius: var(--sched-radius-control); --sched-control-gap: var(--sched-space-1-5); --sched-control-padding-inline: var(--sched-space-3); --sched-select-caret-size: var(--sched-size-1-25); --sched-select-caret-position-end: var(--sched-space-3-75); --sched-select-caret-position-start: var(--sched-space-2-5); --sched-icon-button-size: var(--sched-size-control-md); --sched-search-icon-size: var(--sched-size-icon-md); --sched-account-font-size: var(--sched-font-size-md); --sched-account-meta-font-size: var(--sched-font-size-xs); --sched-account-team-label-font-size: var(--sched-font-size-2xs-plus); --sched-account-team-title-font-size: var(--sched-font-size-sm-plus); --sched-account-select-font-size: var(--sched-font-size-sm-plus); --sched-account-action-font-size: var(--sched-font-size-sm-plus); --sched-account-caret-size: var(--sched-size-icon-xs); --sched-account-caret-offset: var(--sched-space-0-5); --sched-account-radius: var(--sched-radius-popover); --sched-badge-font-size: var(--sched-font-size-xs-plus); --sched-badge-font-weight: var(--sched-font-weight-extrabold); --sched-badge-dot-size: var(--sched-size-1-75); --sched-badge-padding: var(--sched-space-0-75) var(--sched-space-2-25) var(--sched-space-0-75) var(--sched-space-1-75); --sched-card-title-font-size: var(--sched-font-size-base); --sched-card-title-font-weight: var(--sched-font-weight-extrabold); --sched-table-header-font-size: var(--sched-font-size-xs); --sched-table-header-font-weight: var(--sched-font-weight-extrabold); --sched-table-cell-font-size: var(--sched-font-size-md); --sched-table-caption-font-size: var(--sched-font-size-base); --sched-table-caption-font-weight: var(--sched-font-weight-extrabold); --sched-avatar-size: var(--sched-size-avatar-md); --sched-avatar-font-size: var(--sched-font-size-sm); --sched-status-dot-size: var(--sched-size-2); --sched-section-header-gap: var(--sched-space-3); --sched-section-header-padding-block-start: var(--sched-space-3-5); --sched-section-header-padding-block-end: var(--sched-space-2-75); --sched-section-header-padding-inline: var(--sched-space-4-5); --sched-section-header-border-color: var(--sched-line-2); --sched-settings-nav-inline-size: 14.25rem; --sched-settings-nav-sticky-offset: var(--sched-space-4); --sched-settings-nav-group-gap: var(--sched-space-4-5); --sched-settings-nav-link-gap: var(--sched-space-1); --sched-settings-nav-link-block-size: var(--sched-size-8); --sched-settings-nav-link-padding-inline: var(--sched-space-2-5); --sched-settings-nav-heading-margin-block-end: var(--sched-space-1-5); --sched-sidebar-gap: var(--sched-space-4); --sched-sidebar-padding-block: var(--sched-space-4); --sched-sidebar-padding-inline: var(--sched-space-3-5); --sched-sidebar-inner-padding-inline: var(--sched-space-2-5); --sched-account-region-padding-block: var(--sched-space-3); --sched-account-region-padding-inline: var(--sched-space-2-5); --sched-account-summary-padding-block: var(--sched-space-1-5); --sched-account-summary-padding-inline: var(--sched-space-2-5); --sched-account-avatar-size: var(--sched-size-avatar-menu); --sched-account-caret-column-size: var(--sched-space-3-5); --sched-account-panel-gap: var(--sched-space-2); --sched-account-panel-padding: var(--sched-space-3); --sched-account-overlay-offset: var(--sched-space-1); --sched-account-overlay-travel: var(--sched-space-2); --sched-account-menu-inline-size: var(--sched-measure-control); --sched-account-team-mark-size: var(--sched-size-7); --sched-menu-trigger-block-size: var(--sched-control-block-size); --sched-menu-trigger-compact-block-size: var(--sched-control-compact-block-size); --sched-menu-trigger-icon-size: var(--sched-icon-button-size); --sched-menu-trigger-gap: var(--sched-space-2); --sched-menu-trigger-padding-inline: var(--sched-space-3); --sched-menu-trigger-font-size: var(--sched-font-size-md); --sched-menu-trigger-font-weight: var(--sched-font-weight-semibold); --sched-menu-min-inline-size: var(--sched-measure-control); --sched-menu-max-inline-size: min(var(--sched-size-105), calc(100vw - var(--sched-space-8))); --sched-menu-viewport-margin: var(--sched-space-4); --sched-menu-offset: var(--sched-space-2); --sched-menu-submenu-offset: var(--sched-space-1-25); --sched-menu-padding: var(--sched-space-1-5); --sched-menu-label-padding-block: var(--sched-space-2-25) var(--sched-space-1-25); --sched-menu-label-padding-inline: var(--sched-space-2-5); --sched-menu-label-font-size: var(--sched-font-size-2xs-plus); --sched-menu-item-gap: var(--sched-space-2-5); --sched-menu-item-min-block-size: var(--sched-size-8); --sched-menu-item-padding-block: var(--sched-space-2); --sched-menu-item-padding-inline: var(--sched-space-2-5); --sched-menu-item-font-size: var(--sched-font-size-md-plus); --sched-menu-item-meta-font-size: var(--sched-font-size-xs); --sched-menu-item-icon-size: var(--sched-size-icon-lg); --sched-menu-check-size: var(--sched-size-icon-sm); --sched-menu-separator-margin-block: var(--sched-space-1-5); --sched-menu-separator-margin-inline: var(--sched-space-2); --sched-menu-motion-offset: var(--sched-space-1-5); --sched-menu-z-index: 50; --sched-tabs-strip-gap: var(--sched-space-0-5); --sched-tabs-strip-padding-block: 0; --sched-tabs-strip-padding-inline: var(--sched-space-1); --sched-tabs-strip-tab-padding-block: var(--sched-space-2-25); --sched-tabs-strip-tab-padding-inline: var(--sched-space-3); --sched-postgrest-row-line-height: var(--sched-line-height-row); --sched-postgrest-row-block-size: var(--sched-size-13); --sched-postgrest-row-padding-block: var(--sched-space-2-5); --sched-postgrest-row-padding-inline: var(--sched-space-3-5); --sched-postgrest-head-padding-block: var(--sched-space-2-25); --sched-postgrest-edit-row-padding-block: var(--sched-space-2-5); --sched-postgrest-inline-control-block-size: var(--sched-control-block-size); --sched-postgrest-popover-min-inline-size: var(--sched-measure-control); --sched-postgrest-popover-max-inline-size: var(--sched-measure-content); /* Fallback create-popover column character measure for surfaces that do not stamp a render-time --sched-popover-col-ch; mirrors SettingsFormFieldPresentation.TextFloorCh. (fn-52 C) */ --sched-postgrest-create-popover-col-ch: 22; /* Hard floor for adaptive form dialogs: below this the footer's paired actions (cancel + submit, each --sched-measure-action wide plus gap and inline padding) wrap into a stack. */ --sched-postgrest-create-popover-min-inline-size: 20rem; --sched-postgrest-create-popover-max-inline-size: var(--sched-measure-resource-table); --sched-postgrest-filter-popover-inline-size: var(--sched-measure-inventory-table); /* Delete/bulk-delete confirm dialogs are compact (heading + one prompt line + two actions), so they cap well below the form-dialog measure - the prompt wraps into a tight column instead of stretching to one wide line. */ --sched-postgrest-confirm-popover-inline-size: var(--sched-measure-search-wide); --sched-postgrest-popover-viewport-margin: var(--sched-size-8); --sched-postgrest-modal-header-min-block-size: var(--sched-size-13-5); --sched-postgrest-modal-header-padding-block-start: var(--sched-section-header-padding-block-start); --sched-postgrest-modal-header-padding-block-end: var(--sched-section-header-padding-block-end); --sched-postgrest-modal-header-padding-inline: var(--sched-section-header-padding-inline); --sched-postgrest-modal-body-padding-block: var(--sched-space-4); --sched-postgrest-modal-body-padding-inline: var(--sched-space-4-5); --sched-postgrest-modal-footer-gap: var(--sched-space-3); --sched-postgrest-modal-footer-padding-block: var(--sched-space-3-5); --sched-postgrest-modal-footer-padding-inline: var(--sched-space-4-5); --sched-choice-control-size: var(--sched-size-4-5); --sched-choice-control-mark-color: var(--sched-surface); --sched-choice-control-check-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.25 8.35 3 3.05 6.5-6.8' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'/%3E%3C/svg%3E"); --sched-choice-control-check-block-size: var(--sched-size-2-5); --sched-choice-control-check-inline-size: var(--sched-size-1-25); --sched-choice-control-dot-size: var(--sched-size-2); --sched-choice-control-dot-radius: calc(var(--sched-choice-control-dot-size) / 2); --sched-choice-control-shadow: 0 1px 2px rgba(20, 30, 50, .06); --sched-choice-control-press-scale: .96; --sched-switch-inline-size: var(--sched-size-10); --sched-switch-block-size: var(--sched-size-5); --sched-switch-thumb-size: var(--sched-size-4); --sched-switch-thumb-radius: calc(var(--sched-switch-thumb-size) / 2); --sched-motion-active-scale: .985; --sched-motion-entrance-offset: var(--sched-space-2-5); --sched-motion-panel-scale: .98; --sched-motion-popover-scale: .985; --sched-workbook-row-padding-block: var(--sched-space-3); --sched-workbook-row-padding-inline: var(--sched-postgrest-row-padding-inline); --sched-shadow-lift: 0 6px 18px -10px rgba(20, 30, 50, .25); /* Marketing elevation ladder. The console needs exactly one shadow (--sched-shadow-lift) because everything sits on one plane; marketing stacks plates over plates, so it needs real rungs. Each pairs a 1px contact shadow with a wide diffuse one - the contact edge is what keeps a plate from looking like it is floating unattached. */ --sched-shadow-hairline: 0 1px 2px rgba(20, 30, 50, .12); --sched-shadow-raise: 0 1px 2px rgba(20, 30, 50, .04), 0 14px 30px -20px rgba(20, 30, 50, .25); --sched-shadow-panel: 0 1px 2px rgba(20, 30, 50, .04), 0 24px 50px -26px rgba(20, 30, 50, .28); --sched-shadow-float: 0 1px 2px rgba(20, 30, 50, .04), 0 30px 60px -28px rgba(20, 30, 50, .34), 0 12px 24px -16px rgba(20, 30, 50, .2); --sched-shadow-brand: 0 14px 32px -18px rgba(31, 79, 176, .35); --sched-shadow-on-deep: 0 16px 36px -16px rgba(0, 0, 0, .45); --sched-motion-fast: .12s; --sched-motion-base: .18s; --sched-motion-overlay: .2s; --sched-motion-reduced: 1ms; --sched-motion-slow: .26s; --sched-motion-reveal: .7s; --sched-ease-standard: cubic-bezier(.2, .7, .2, 1); --sched-ease-enter: cubic-bezier(.3, .8, .3, 1); --sched-ease-exit: cubic-bezier(.4, 0, .2, 1); /* Marketing page-shell slots. The console shell is a fixed-viewport app frame; the marketing shell is a scrolling document, so its rhythm gets its own vocabulary rather than a reinterpretation of the app's. Gutter and section padding are single-term fluid - one vw slope clamped between a floor and a ceiling - so there is no per-breakpoint rung to keep in sync with anything. */ --sched-site-gutter: clamp(var(--sched-space-5), 2.5vw, var(--sched-space-8)); --sched-site-section-padding-block: clamp(var(--sched-space-16), 6.875vw, var(--sched-space-22)); --sched-site-section-gap: var(--sched-space-14); --sched-site-band-gap: var(--sched-space-24); --sched-site-nav-block-size: var(--sched-size-16); --sched-site-nav-z-index: 100; --sched-site-nav-bg: rgba(255, 255, 255, .82); --sched-site-nav-blur: blur(14px); --sched-site-cta-block-size: var(--sched-size-control-xl); --sched-site-reveal-offset: var(--sched-space-5); /* The hero/deep washes are whole gradients rather than colour stops so a recipe applies one token and the scheme swap happens at the leaf (--sched-site-wash, --sched-brand-soft) instead of being re-authored per section. */ --sched-site-wash: #f3f6fb; --sched-site-hero-wash: radial-gradient(120% 80% at 80% -10%, var(--sched-brand-soft) 0%, transparent 55%), radial-gradient(90% 60% at 0% 0%, var(--sched-site-wash) 0%, transparent 50%); --sched-site-deep-glow: radial-gradient(80% 60% at 50% 0%, rgba(45, 78, 150, .34) 0%, transparent 60%); --sched-site-cta-glow: radial-gradient(70% 120% at 50% 0%, rgba(45, 78, 150, .4) 0%, transparent 60%); --sched-site-surface-on-deep: rgba(255, 255, 255, .03); --sched-site-surface-on-deep-hover: rgba(255, 255, 255, .06); --sched-site-line-on-deep-hover: rgba(255, 255, 255, .3); --sched-site-button-bg-on-deep-hover: #eef1f6; --sched-site-button-border-on-deep: rgba(255, 255, 255, .28); --sched-site-button-border-on-deep-hover: rgba(255, 255, 255, .6); } @media (prefers-color-scheme: dark) { :root { --sched-bg: #10141c; --sched-surface: #171c25; --sched-surface-2: #1d2430; --sched-line: #2b3443; --sched-line-2: #242c39; --sched-line-strong: #3b4657; --sched-ink: #edf2f8; --sched-ink-2: #c4ccd8; --sched-ink-3: #929cab; --sched-ink-4: #707b8c; --sched-brand: var(--sched-brand-dark); --sched-brand-hover: var(--sched-brand-hover-dark); --sched-brand-soft: #1f3155; --sched-choice-control-check-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.25 8.35 3 3.05 6.5-6.8' fill='none' stroke='%23171c25' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'/%3E%3C/svg%3E"); --sched-status-sched: #8ab4ff; --sched-status-sched-bg: #172744; --sched-status-sched-bd: #2b4672; --sched-status-enroute: #b9a4ff; --sched-status-enroute-bg: #261f3f; --sched-status-enroute-bd: #45366f; --sched-status-onsite: #70d4a5; --sched-status-onsite-bg: #122f25; --sched-status-onsite-bd: #245744; --sched-status-done: #aab4c3; --sched-status-done-bg: #222936; --sched-status-done-bd: #3a4454; --sched-status-hold: #f2bf68; --sched-status-hold-bg: #382710; --sched-status-hold-bd: #62451b; --sched-status-emer: #ff8b7d; --sched-status-emer-bg: #3c1d1c; --sched-status-emer-bd: #653332; --sched-shadow-lift: 0 10px 24px -14px rgba(0, 0, 0, .72); /* The deep band inverts direction in dark mode: on a light page it is a near-black plate that recedes, on a dark page it becomes an ELEVATED surface above the darker bg. Same recipe, same tokens, correct optics in both schemes - which is the whole reason the band consumes --sched-*-on-deep slots instead of hardcoding #fff. */ --sched-ink-deep: #1d2430; --sched-ink-on-deep: #edf2f8; --sched-ink-on-deep-2: #c4ccd8; --sched-ink-on-deep-3: #929cab; --sched-line-on-deep: rgba(255, 255, 255, .08); --sched-brand-on-deep: var(--sched-brand-dark); --sched-live: #3fd69b; --sched-shadow-hairline: 0 1px 2px rgba(0, 0, 0, .5); --sched-shadow-raise: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -20px rgba(0, 0, 0, .66); --sched-shadow-panel: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 50px -26px rgba(0, 0, 0, .72); --sched-shadow-float: 0 1px 2px rgba(0, 0, 0, .3), 0 30px 60px -28px rgba(0, 0, 0, .78), 0 12px 24px -16px rgba(0, 0, 0, .6); --sched-shadow-brand: 0 14px 32px -18px rgba(122, 167, 255, .3); --sched-shadow-on-deep: 0 16px 36px -16px rgba(0, 0, 0, .7); /* Only the two wash/scrim leaves flip - --sched-site-hero-wash composes from them, so the gradient token itself never needs a dark-scheme copy. */ --sched-site-nav-bg: rgba(23, 28, 37, .82); --sched-site-wash: #151b26; --sched-site-button-bg-on-deep-hover: #dbe2ec; } } }