/* 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-measure-app-page: 90rem; --sched-rail-sticky-offset: var(--sched-space-4); --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-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); /* One frame rhythm. The sidebar rail, the appbar, the page stack and the page intro all measure from this, and it equals the card inline padding, so the space between the sidebar and a card equals the space inside that card. */ --sched-frame-gap: var(--sched-space-4-5); --sched-page-stack-padding-inline: var(--sched-frame-gap); --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-card-padding-block: var(--sched-space-3-5); /* A card body and its header must share a left edge. Binding the body to the header role token makes that relationship explicit instead of coincidental. */ --sched-card-padding-inline: var(--sched-section-header-padding-inline); --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); /* A sidebar row bleeds past its text so the hover pill has room. The group inset plus the pill inset make one frame gap, so nav text, the brand and the appbar breadcrumb share a left edge. */ --sched-sidebar-pill-padding-inline: var(--sched-space-2-5); --sched-sidebar-inner-padding-inline: calc(var(--sched-frame-gap) - var(--sched-sidebar-pill-padding-inline)); --sched-account-region-padding-block: var(--sched-space-3); --sched-account-region-padding-inline: var(--sched-sidebar-inner-padding-inline); --sched-account-summary-padding-block: var(--sched-space-1-5); --sched-account-summary-padding-inline: var(--sched-sidebar-pill-padding-inline); --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); /* A picker list shows seven and a half option rows (md text, 1.5 block padding, the listbox gap), so the eighth row peeks and says "more below" with no shadow. The panel never adds height for a long list: it is the list that scrolls. */ --sched-ref-search-list-max-block-size: 15.75rem; --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); /* Row density. These four drive every PostgREST table, so density is set here and nowhere else. The rows were tall enough that a listing outgrew the viewport well before it ran out of rows; trimming the block padding and the row floor fits appreciably more data on a screen without touching the type size or the inline rhythm. */ --sched-postgrest-row-line-height: var(--sched-line-height-row); --sched-postgrest-row-block-size: var(--sched-size-10); --sched-postgrest-row-padding-block: var(--sched-space-1-75); --sched-postgrest-row-padding-inline: var(--sched-space-3-5); --sched-postgrest-head-padding-block: var(--sched-space-1-75); --sched-postgrest-edit-row-padding-block: var(--sched-space-1-75); --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); /* Whole-number and decimal inputs never carry long content: form dialogs cap them at this compact character measure instead of letting them fill their column, so a quantity beside a wide picker reads as the small field it is. */ --sched-postgrest-number-field-ch: 8; /* 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; /* The workbook table is the catalog/settings grid. It carried the loosest rows in the app, so it moves with the PostgREST tables above rather than keeping a density of its own. */ --sched-workbook-row-padding-block: var(--sched-postgrest-row-padding-block); --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 width below which the plan comparison scrolls instead of squeezing. Four columns of prices stop being comparable long before they stop fitting, so this is a legibility floor rather than a breakpoint - there is no layout on the other side of it. */ --sched-site-plan-table-min: 46rem; /* 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; } } }