/**
 * Legwork Booking - design tokens.
 * Source of truth: dev-resources/Inspiration Plugins/DESIGN.md
 * Components use ONLY these custom properties. No raw hex in components (CONVENTIONS SS13).
 */

/* ============================================================
   TIER 1 - ADMIN DESIGN LANGUAGE (--lwbadm-*)  [FIXED]
   Values from the Legwork Intelligence dashboard (brain-service
   design/tokens/theme-app.css, light), ported by DS-003. Names
   stay Legwork's. Do not theme per-site.
   ============================================================ */
:root, .lwb-admin {
  /* Chrome & text */
  --lwbadm-primary:        #0066E9;
  --lwbadm-primary-wash:   #EEF4FE;
  --lwbadm-ink:            #111418;
  --lwbadm-ink-2:          #111418; /* one text colour (DS-005a): body text is ink */
  --lwbadm-text:           #111418;
  --lwbadm-text-muted:     #5E677A;
  --lwbadm-text-faint:     #5E677A; /* folds into muted: the old faint failed AA on small text */
  --lwbadm-border:         #E4E7EC;
  --lwbadm-border-soft:    #C4CAD3;
  --lwbadm-bg:             #F7F8FA;
  --lwbadm-bg-2:           #F1F3F6;
  --lwbadm-surface:        #FFFFFF;
  /* Aliases for names components already used but nothing defined (DS-003 review) */
  --lwbadm-surface-alt:    var(--lwbadm-bg-2);
  --lwbadm-muted:          var(--lwbadm-text-muted);

  /* Status language - semantic, never repurposed. Info, current and over are
     derived in the dashboard's style and never reuse the accent. */
  --lwbadm-ok-bg:    #E7F4EC;  --lwbadm-ok-fg:    #16794C;  --lwbadm-ok: #16794C;
  --lwbadm-warn-bg:  #FDF1E3;  --lwbadm-warn-fg:  #B45309;  --lwbadm-warn: #B45309;  --lwbadm-warn-deep: #8A4106;
  --lwbadm-err-bg:   #FCEBEC;  --lwbadm-err-fg:   #C0262D;  --lwbadm-err-hard: #C0262D;  --lwbadm-err: #C0262D;
  --lwbadm-info-bg:  #EAF0F7;  --lwbadm-info-fg:  #2D4B73;
  --lwbadm-current-bg: #EEF0FB; --lwbadm-current-fg: #3F4BA8;
  --lwbadm-over:     #C2410C;
  --lwbadm-hold-opacity: 0.45;
  --lwbadm-service-dim-opacity: 0.7;

  /* Shape */
  --lwbadm-radius:       8px;   /* inputs, buttons (radius-control) */
  --lwbadm-radius-card:  12px;  /* panels (radius-panel) */
  --lwbadm-radius-sm:    4px;
  --lwbadm-radius-pill:  999px; /* badges (radius-badge) */
  --lwbadm-swatch-size: 12px;   /* small square swatches and legend dots (was misusing radius-pill, which was 12px before DS-003) */
  --lwbadm-border-width: 1px;
  --lwbadm-focus-width:  2px;
  --lwbadm-focus-offset: 2px;
  --lwbadm-accent-width: 3px;
  --lwbadm-pad-xs:       2px;
  /* Spacing scale - the 13 steps keep their names, snapped to a 4px grid */
  --lwbadm-space-1:  4px;
  --lwbadm-space-2:  8px;
  --lwbadm-space-3:  8px;
  --lwbadm-space-4:  10px;
  --lwbadm-space-5:  10px;
  --lwbadm-space-6:  14px;
  --lwbadm-space-7:  14px;
  --lwbadm-space-8:  16px;
  --lwbadm-space-9:  16px;
  --lwbadm-space-10: 20px;
  --lwbadm-space-11: 32px;
  --lwbadm-space-12: 32px;
  --lwbadm-space-13: 40px;
  --lwbadm-space-9px: 8px;
  /* Intelligence control paddings (for DS-005) */
  --lwbadm-pad-button: 6px 12px;
  --lwbadm-pad-field:  6px 10px;
  --lwbadm-pad-row:    9px 14px;
  --lwbadm-control-min: 36px;
  --lwbadm-control-min-sm: 30px;
  /* DS-005a: inputs, selects and buttons are exactly this tall (height, never min-height plus padding).
     The small size is for dense rows only. */
  --lwbadm-control-h: 32px;
  --lwbadm-control-h-sm: 28px;
  --lwbadm-pad-control-x: 11px;
  --lwbadm-pad-button-x: 14px;
  --lwbadm-pad-button-sm-x: 10px;
  --lwbadm-pad-select-end: 32px;  /* room for the chevron */
  --lwbadm-pad-badge: 2px 9px;
  --lwbadm-pad-panel: 14px 16px;  /* card head and body */
  --lwbadm-pad-dialog: 16px 20px; /* drawer and pop-up head and body */
  --lwbadm-pad-dialog-foot: 12px 20px;
  --lwbadm-pad-banner: 10px 14px;
  --lwbadm-textarea-min: 84px;
  --lwbadm-drawer-w: 480px;
  /* DS-068 (owner 2026-10-20): the request page's "Client & notes" side drawer, non-modal, and the
     vertical tab on the window's right edge that swings it in and out. The page keeps a gutter the tab's width. */
  --lwbadm-side-drawer-w: min(23rem, 92vw);
  --lwbadm-side-tab-w: 30px;
  --lwbadm-popup-w: 36rem;
  --lwbadm-popup-wide-w: 960px; /* the wide pop-up shell from DS-009, owner 2026-10-12 ("Wide, about 960px") */
  /* The select chevron, in --lwbadm-text-muted. A data URI cannot read a custom property, so the colour lives here. */
  --lwbadm-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235E677A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lwbadm-stripe: #FFFFFF; /* Intelligence lists don't zebra-stripe */
  --lwbadm-overlay: rgba(17, 20, 24, 0.45);
  --lwbadm-shadow-card:  0 1px 2px rgba(17, 20, 24, 0.06);
  --lwbadm-shadow-float: 0 12px 32px -12px rgba(17, 20, 24, 0.25);
  --lwbadm-shadow-pop:   0 8px 24px rgba(17, 20, 24, 0.14); /* only floating things: menus, drawers, pop-ups */

  /* Calendar (DS-010a, owner 2026-10-13 "Both look right"): cards are rounded with a near-flat
     shadow; an expanded card keeps --lwbadm-shadow-float. The grid line is a step darker than
     --lwbadm-border and is swapped in for it inside the calendar's grids only. */
  --lwbadm-radius-event: 6px;
  --lwbadm-shadow-event: 0 1px 2px rgba(17, 20, 24, 0.08);
  --lwbadm-grid-line:    #D3D8E0;
  /* Store hours (DS-010c, owner 2026-10-13 "Fold, with Show full day"): an empty run of off-hours
     folds into one thin striped band, opaque so a closed tint inside it hides with it; an off-hours
     row that is shown gets a light see-through shade, so the hour striping still reads through. */
  --lwbadm-fold:         repeating-linear-gradient(-45deg, var(--lwbadm-bg-2) 0 5px, #E4E7EC 5px 7px);
  --lwbadm-off-hours:    rgba(94, 103, 122, 0.07);

  /* Floating layers, relative within the Legwork stacking context. The drawer and
     pop-up roots keep their own high z-index, above the WordPress admin bar. */
  --lwbadm-z-menu: 45;
  --lwbadm-z-drawer: 50;
  --lwbadm-z-toast: 60;

  /* Motion */
  --lwbadm-t-fast: 120ms;
  --lwbadm-t-base: 200ms;
  --lwbadm-t-drawer-in: 180ms;
  --lwbadm-t-drawer-out: 120ms;
  --lwbadm-t-pop-in: 150ms;
  --lwbadm-t-pop-out: 100ms;
  --lwbadm-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --lwbadm-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Type - fonts are bundled (fonts/fonts.css), never loaded from Google */
  --lwbadm-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --lwbadm-font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --lwbadm-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --lwbadm-text-page-title: 1.375rem;
  --lwbadm-text-page-title-lh: 1.25;
  --lwbadm-text-section: .9375rem;
  --lwbadm-text-body: .875rem;
  --lwbadm-text-body-lh: 1.55;
  --lwbadm-text-meta: .75rem;
}

/* Beats WordPress's 13px admin base, inside Legwork pages only. */
.lwb-admin {
  font-family: var(--lwbadm-font);
  font-size: var(--lwbadm-text-body);
  line-height: var(--lwbadm-text-body-lh);
  color: var(--lwbadm-ink);
}

/* WordPress pins `p` at 13px; inside Legwork, paragraphs follow the 14px body (DS-068). :where() keeps it weaker than any component rule. */
.lwb-admin :where(p) {
  font-size: inherit;
}

/* Headings only. The theme editor's live preview (.lwb-widget) keeps its own heading font. */
.lwb-admin :where(h1, h2, h3):where(:not(.lwb-widget *)) {
  font-family: var(--lwbadm-font-display);
}

.lwb-admin :focus-visible {
  outline: var(--lwbadm-focus-width) solid var(--lwbadm-primary);
  outline-offset: var(--lwbadm-focus-offset);
}

.lwb-admin .lwb-table-wrap {
  overflow: auto;
  border: var(--lwbadm-border-width) solid var(--lwbadm-border);
  border-radius: var(--lwbadm-radius-card);
  background: var(--lwbadm-surface);
}

.lwb-admin .lwb-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.lwb-admin .lwb-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--lwbadm-space-4) var(--lwbadm-space-5);
  background: var(--lwbadm-bg);
  border-bottom: var(--lwbadm-border-width) solid var(--lwbadm-border);
  /* Sentence case, Inter 600 (DS-005a): no uppercase, no letter-spacing. */
  font-family: var(--lwbadm-font);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--lwbadm-text-muted);
}

.lwb-admin .lwb-table-wrap td {
  padding: var(--lwbadm-space-4) var(--lwbadm-space-5);
  border-bottom: var(--lwbadm-border-width) solid var(--lwbadm-bg-2);
}

.lwb-admin .lwb-table-wrap tbody tr:nth-child(even) td {
  background: var(--lwbadm-stripe);
}

.lwb-admin .lwb-table-wrap tbody tr:hover td {
  background: var(--lwbadm-bg-2);
}

.lwb-admin .lwb-cell-main {
  font-weight: 500;
  color: var(--lwbadm-ink-2);
}

.lwb-admin .lwb-cell-sub {
  font-size: var(--lwbadm-text-meta);
  color: var(--lwbadm-text-faint);
}

/* WP admin sets appearance:none and a white ::before tick. Fill the checked
   ground so the tick reads. Scoped `input { background: surface }` loses to :checked. */
.lwb-admin input[type="checkbox"]:checked,
.lwb-admin input[type="checkbox"]:indeterminate,
.lwb-admin input[type="radio"]:checked {
  background: var(--lwbadm-primary);
  background-color: var(--lwbadm-primary);
  border-color: var(--lwbadm-primary);
}

/* ============================================================
   TIER 1 - DARK (DS-004)  [FIXED]
   The staff app's dark theme: the same --lwbadm-* names, redefined
   under the person's body class (lwbadm-theme-dark, or
   lwbadm-theme-system when the computer is dark). Only .lwb-admin
   ever turns dark: never :root, never the widget or client pages.
   The second selector of each pair covers a body that is itself
   .lwb-admin. With no class, or lwbadm-theme-light, nothing here
   applies and light is exactly as before.
   Values from the Legwork Intelligence dashboard (brain-service
   design/tokens/theme-app.css, dark layer). Names it lacks are
   derived, each noted. The two blocks below are the same list,
   repeated (plain CSS cannot share one block between a class and a
   media query); ds004-dark-mode.test.ts holds them identical.
   Aliases (--lwbadm-surface-alt, --lwbadm-muted) are not repeated:
   they read their target, which is already dark here.
   ============================================================ */
.lwbadm-theme-dark .lwb-admin,
.lwbadm-theme-dark.lwb-admin {
  color-scheme: dark;
  --lwbadm-primary:        #4D94FF;
  --lwbadm-primary-wash:   #14233B;
  --lwbadm-ink:            #E8ECF1;
  --lwbadm-ink-2:          #E8ECF1;
  --lwbadm-text:           #E8ECF1;
  --lwbadm-text-muted:     #98A2B3;
  --lwbadm-text-faint:     #98A2B3;
  --lwbadm-border:         #272E38;
  --lwbadm-border-soft:    #374150; /* derived: light's soft-to-border step against surface, on the dark border's hue */
  --lwbadm-bg:             #0C0F13;
  --lwbadm-bg-2:           #1A1F27;
  --lwbadm-surface:        #13171D;
  --lwbadm-ok-bg:    #10291E;  --lwbadm-ok-fg:    #4CC38A;  --lwbadm-ok: #4CC38A;
  --lwbadm-warn-bg:  #2E2110;  --lwbadm-warn-fg:  #F2A33A;  --lwbadm-warn: #F2A33A;  --lwbadm-warn-deep: #F9D3A0; /* derived: stronger than warn on warn-bg by light's factor */
  --lwbadm-err-bg:   #2F1416;  --lwbadm-err-fg:   #F2676C;  --lwbadm-err-hard: #F2676C;  --lwbadm-err: #F2676C;
  /* derived: each light token's own hue and saturation, at the mean luminance of the dashboard's three dark status pairs */
  --lwbadm-info-bg:  #142233;  --lwbadm-info-fg:  #8DAAD2;
  --lwbadm-current-bg: #191F3F; --lwbadm-current-fg: #9EA5DA;
  --lwbadm-over:     #F58C61;
  /* The select chevron in the dark --lwbadm-text-muted */
  --lwbadm-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lwbadm-stripe:         #13171D; /* as light: no zebra, the surface */
  --lwbadm-overlay:        rgba(0, 0, 0, 0.6);
  /* Depth: the dashboard's dark float shadow with a 1px border ring; flat shadows in black, since ink at 6% vanishes on dark */
  --lwbadm-shadow-card:  0 1px 2px rgba(0, 0, 0, 0.3);
  --lwbadm-shadow-float: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 var(--lwbadm-border-width) var(--lwbadm-border);
  --lwbadm-shadow-pop:   0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 var(--lwbadm-border-width) var(--lwbadm-border);
  --lwbadm-shadow-event: 0 1px 2px rgba(0, 0, 0, 0.4);
  /* Calendar, derived: the grid line keeps light's step between border and border-soft; the fold keeps its
     stripes in the dark border; off-hours lifts with dark muted at light's 7%, so it never reads as closed (which darkens) */
  --lwbadm-grid-line:    #2F3844;
  --lwbadm-fold:         repeating-linear-gradient(-45deg, var(--lwbadm-bg-2) 0 5px, #272E38 5px 7px);
  --lwbadm-off-hours:    rgba(152, 162, 179, 0.07);
}

@media (prefers-color-scheme: dark) {
  .lwbadm-theme-system .lwb-admin,
  .lwbadm-theme-system.lwb-admin {
    color-scheme: dark;
    --lwbadm-primary:        #4D94FF;
    --lwbadm-primary-wash:   #14233B;
    --lwbadm-ink:            #E8ECF1;
    --lwbadm-ink-2:          #E8ECF1;
    --lwbadm-text:           #E8ECF1;
    --lwbadm-text-muted:     #98A2B3;
    --lwbadm-text-faint:     #98A2B3;
    --lwbadm-border:         #272E38;
    --lwbadm-border-soft:    #374150; /* derived: light's soft-to-border step against surface, on the dark border's hue */
    --lwbadm-bg:             #0C0F13;
    --lwbadm-bg-2:           #1A1F27;
    --lwbadm-surface:        #13171D;
    --lwbadm-ok-bg:    #10291E;  --lwbadm-ok-fg:    #4CC38A;  --lwbadm-ok: #4CC38A;
    --lwbadm-warn-bg:  #2E2110;  --lwbadm-warn-fg:  #F2A33A;  --lwbadm-warn: #F2A33A;  --lwbadm-warn-deep: #F9D3A0; /* derived: stronger than warn on warn-bg by light's factor */
    --lwbadm-err-bg:   #2F1416;  --lwbadm-err-fg:   #F2676C;  --lwbadm-err-hard: #F2676C;  --lwbadm-err: #F2676C;
    /* derived: each light token's own hue and saturation, at the mean luminance of the dashboard's three dark status pairs */
    --lwbadm-info-bg:  #142233;  --lwbadm-info-fg:  #8DAAD2;
    --lwbadm-current-bg: #191F3F; --lwbadm-current-fg: #9EA5DA;
    --lwbadm-over:     #F58C61;
    /* The select chevron in the dark --lwbadm-text-muted */
    --lwbadm-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --lwbadm-stripe:         #13171D; /* as light: no zebra, the surface */
    --lwbadm-overlay:        rgba(0, 0, 0, 0.6);
    /* Depth: the dashboard's dark float shadow with a 1px border ring; flat shadows in black, since ink at 6% vanishes on dark */
    --lwbadm-shadow-card:  0 1px 2px rgba(0, 0, 0, 0.3);
    --lwbadm-shadow-float: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 var(--lwbadm-border-width) var(--lwbadm-border);
    --lwbadm-shadow-pop:   0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 var(--lwbadm-border-width) var(--lwbadm-border);
    --lwbadm-shadow-event: 0 1px 2px rgba(0, 0, 0, 0.4);
    /* Calendar, derived: the grid line keeps light's step between border and border-soft; the fold keeps its
       stripes in the dark border; off-hours lifts with dark muted at light's 7%, so it never reads as closed (which darkens) */
    --lwbadm-grid-line:    #2F3844;
    --lwbadm-fold:         repeating-linear-gradient(-45deg, var(--lwbadm-bg-2) 0 5px, #272E38 5px 7px);
    --lwbadm-off-hours:    rgba(152, 162, 179, 0.07);
  }
}

/* DS-004 a3: the worker portal is its own document (templates/portal/app.php). Without this, the
   browser's default body margin left a light frame around the dark portal. The app root already
   paints the whole viewport, so only the margin goes. */
body.lwb-portal-page {
  margin: 0;
}

/* DS-068: the bare portal document has no WordPress admin bar, so the request page's Client & notes
   drawer and tab, which sit under the bar, start at the top. */
body.lwb-portal-page {
  --wp-admin--admin-bar--height: 0px;
}

/* ============================================================
   TIER 2 - FRONT-END THEME TOKENS (--lwb-*)  [CUSTOMIZABLE]
   Preset "Slate" as :root defaults; other presets override via
   [data-lwb-theme="..."]. Theme Editor writes these at runtime.
   ============================================================ */
:root, .lwb-widget {
  --lwb-primary: #1A84EE;  --lwb-primary-contrast: #FFFFFF;  --lwb-accent: #1A84EE;
  --lwb-bg: #FFFFFF;  --lwb-surface: #F8FAFC;  --lwb-surface-2: #F1F5F9;
  --lwb-border: #E2E8F0;  --lwb-overlay: rgba(15,23,42,.55);
  --lwb-text: #1E293B;  --lwb-text-muted: #64748B;  --lwb-heading: #0F172A;
  --lwb-ok: #16A34A;  --lwb-ok-wash: #DCFCE7;
  --lwb-warn: #D97706; --lwb-warn-wash: #FEF3C7;
  --lwb-err: #DC2626;  --lwb-err-wash: #FEE2E2;
  --lwb-day-open: #FFFFFF;  --lwb-day-partial: #FEF3C7;  --lwb-day-full: #F1F5F9;
  --lwb-day-closed: transparent;  --lwb-day-selected: var(--lwb-primary);
  --lwb-range-wash: color-mix(in srgb, var(--lwb-primary) 18%, var(--lwb-bg));
  --lwb-radius: 8px;  --lwb-radius-pill: 999px;  --lwb-btn-radius: var(--lwb-radius);
  --lwb-input-bg: var(--lwb-surface);  --lwb-focus: var(--lwb-primary);
  --lwb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lwb-font-heading: var(--lwb-font);  --lwb-size-base: 14px;
}

/* ============================================================
   TIER 2b - WIDGET DESIGN TOKENS (--lwb-*)  [NOT THEMEABLE]
   Mockup dimensions. Not copied into PresetTokens.php — a
   duplicate-and-customize theme inherits these from :root.
   ============================================================ */
:root, .lwb-widget {
  --lwb-space-1: 4px;
  --lwb-space-2: 6px;
  --lwb-space-3: 8px;
  --lwb-space-4: 10px;
  --lwb-space-5: 11px;
  --lwb-space-6: 12px;
  --lwb-space-7: 14px;
  --lwb-space-8: 15px;
  --lwb-space-9: 16px;
  --lwb-space-10: 17px;
  --lwb-space-11: 18px;
  --lwb-space-12: 22px;
  --lwb-space-13: 24px;
  --lwb-space-px: 2px;
  --lwb-space-tight: 9px;
  --lwb-border-width: 1px;
  --lwb-focus-width: 2px;
  --lwb-focus-offset: 2px;
  --lwb-size-2xs: 8px;
  --lwb-size-xs: 9px;
  --lwb-size-sm: 10px;
  --lwb-size-md: 11px;
  --lwb-size-lg: 12px;
  --lwb-size-xl: 13px;
  --lwb-size-2xl: 18px;
  --lwb-size-3xl: 20px;
  --lwb-weight-body: 400;
  --lwb-weight-medium: 650;
  --lwb-weight-semibold: 700;
  --lwb-weight-bold: 750;
  --lwb-weight-heavy: 800;
  --lwb-line-height: 1.45;
  --lwb-control-min: 42px;
  --lwb-control-nav: 34px;
  --lwb-control-text: 32px;
  --lwb-control-qty: 38px;
  --lwb-brand-mark: 38px;
  --lwb-rail-num: 24px;
  --lwb-radius-shell: calc(var(--lwb-radius) + 6px);
  --lwb-radius-card: var(--lwb-radius);
  --lwb-radius-sm: 4px;
  --lwb-summary-min: 220px;
  --lwb-layout-max: 680px;
  --lwb-day-min-narrow: 40px;
  --lwb-card-min-narrow: 74px;
}

[data-lwb-theme="midnight"] {
  --lwb-primary: #C9A227; --lwb-primary-contrast: #0B0F1A;
  --lwb-bg: #0B0F1A; --lwb-surface: #151B2B; --lwb-surface-2: #1D2536;
  --lwb-border: #2A3349; --lwb-text: #E8EAF2; --lwb-text-muted: #9AA3B8; --lwb-heading: #FFFFFF;
  --lwb-day-open: #151B2B; --lwb-day-partial: #3A3320; --lwb-day-full: #10141F;
  --lwb-radius: 10px;
}

[data-lwb-theme="champagne"] {
  --lwb-primary: #8A6D2F; --lwb-primary-contrast: #FFFFFF;
  --lwb-bg: #FBF8F2; --lwb-surface: #FFFFFF; --lwb-surface-2: #F4EEE2;
  --lwb-border: #E6DCC6; --lwb-text: #2A2419; --lwb-text-muted: #8A7F66; --lwb-heading: #1F1A10;
  --lwb-day-open: #FFFFFF; --lwb-day-partial: #F3E9CF; --lwb-day-full: #EFE9DC;
  --lwb-radius: 12px;
}

[data-lwb-theme="coast"] {
  --lwb-primary: #0E9488; --lwb-primary-contrast: #FFFFFF;
  --lwb-bg: #FFFFFF; --lwb-surface: #F0FDFB; --lwb-surface-2: #E0F5F2;
  --lwb-border: #CBEAE5; --lwb-text: #134E4A; --lwb-text-muted: #5E8B86; --lwb-heading: #0B3A37;
  --lwb-day-open: #FFFFFF; --lwb-day-partial: #FDF3D8; --lwb-day-full: #EDF2F1;
  --lwb-radius: 14px;
}

[data-lwb-theme="carbon"] {
  --lwb-primary: #F97316; --lwb-primary-contrast: #111113;
  --lwb-bg: #111113; --lwb-surface: #1B1B1F; --lwb-surface-2: #232329;
  --lwb-border: #33333B; --lwb-text: #F4F4F5; --lwb-text-muted: #9A9AA3; --lwb-heading: #FFFFFF;
  --lwb-day-open: #1B1B1F; --lwb-day-partial: #3A2E1E; --lwb-day-full: #161619;
  --lwb-radius: 4px;
}