/* 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. Every host links this file itself, fingerprinted, after schedulance.css, whose layer order statement names sched.tokens first; 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: 25rem; --sched-measure-content: 42.5rem; --sched-measure-title: 46.25rem; /* The PostgREST table width floors. The shell's measure token picks one per table; under the floor the table scrolls sideways inside its card instead of squeezing its cells. */ --sched-measure-table-md: 47.5rem; --sched-measure-table-lg: 61.25rem; --sched-measure-table-xl: 70rem; --sched-measure-table-2xl: 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); /* A viewport-fit table frame never shrinks below this. Under it the page scrolls instead, so a short window still shows a header, a few rows and the pager rather than a sliver. */ --sched-table-viewport-floor: 22rem; /* The sticky column header paints over the row-action trigger (z-index 6) as rows pass under it. */ --sched-table-head-z-index: 7; --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 and the page stack 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); /* The appbar band, stated once. It is the tallest control the band holds (the search field and the icon buttons all measure --sched-control-block-size) plus one rhythm step above and below. The band used to be a standalone 3.375rem, written twice - once as the shell's first grid track and once as the appbar's own floor - so it reserved height its content never asked for, and every page paid that band before any content appeared. */ --sched-shell-appbar-block-size: calc(var(--sched-control-block-size) + (var(--sched-space-1-5) * 2)); --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); /* The account panel takes the same inset as every other menu. Its rows already carry the menu item padding, so a wider panel inset put the text 22px from the edge against the 16px of every other menu and read as empty space around the content. */ --sched-account-panel-padding: var(--sched-menu-padding); --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-caret-size: var(--sched-size-icon-xs); --sched-menu-caret-offset: var(--sched-space-0-5); --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; /* The floor under one option row: one UI line box plus the row's block padding. An option sets overflow: hidden for its ellipsis, and an overflow-hidden grid item takes an automatic minimum size of zero, so a long list could shrink every row to a clipped sliver, never overflow the listbox, and never scroll. A non-zero minimum is what makes the rows refuse to squash. The UI line height sits just under the base line height the option inherits, so the floor lands under the row's rendered height: it binds only when a row would otherwise collapse, and the seven-and-a-half-row list measure above is unchanged. */ --sched-ref-search-option-min-block-size: calc((var(--sched-font-size-md) * var(--sched-line-height-ui)) + (var(--sched-space-1-5) * 2)); --sched-menu-offset: var(--sched-space-2); --sched-menu-submenu-offset: var(--sched-space-1-25); /* A submenu stays open this long after the pointer leaves it, so a diagonal move from the trigger toward the flyout does not close it on the way. */ --sched-menu-submenu-grace: 160ms; --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. The floor has exactly one job: an inline edit control is the tallest thing a row holds, so a row must never be shorter than --sched-control-block-size. It therefore reads that control height instead of a standalone number. A standalone number reserved height no display row asked for - the cell padding and the row line height already come to less than it - and every row on every listing paid the difference. */ --sched-postgrest-row-line-height: var(--sched-line-height-row); --sched-postgrest-row-block-size: var(--sched-control-block-size); --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); /* The search field pads for one inset control on each side: a square hit target plus its gap. */ --sched-postgrest-search-inset: calc(var(--sched-size-6) + var(--sched-space-1-5) + var(--sched-space-1-5)); --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-table-md); --sched-postgrest-filter-popover-inline-size: var(--sched-measure-table-lg); /* 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; /* A column quick filter is one row of controls in a dropdown: the search box takes a short phrase, and a range bound takes a number or a date, so the panel stays near the heading it filters instead of spanning the table. */ --sched-postgrest-column-filter-field-ch: 14; --sched-postgrest-column-filter-bound-ch: 7; /* 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); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --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; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --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; } } }