/*
 * The two appearances of one product: Citrus Pop (light) and Night Shift
 * (dark), from the theme handoff of 2026-09-26 (Sanyi, Telegram 5430,
 * specification/design-tokens.json). Only colours live here; layout, density
 * and order are the same in both, so a receptionist who switches finds every
 * button where it was.
 *
 * theme-bootstrap.js sets data-theme on <html> before this sheet paints.
 * Without it (no script, an old browser) the light values apply. The dark
 * values are screen-only: a printout is always light, whatever was chosen.
 */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  /* The handoff's tokens, as given. */
  --hm-background: #f5f3ee;
  --hm-surface: #ffffff;
  --hm-text: #242b32;
  /* 2026-09-27 handoff: a shade darker than the first package, so that the
   * muted text keeps 4.5:1 on --hm-surface-2 too. */
  --hm-text-muted: #5d6770;
  --hm-border-subtle: #e5e5df;
  --hm-border-control: #858d96;
  --hm-sidebar: #232d32;
  --hm-primary: #ff7a36;
  --hm-on-primary: #242b32;
  --hm-purple-soft: #eee7fd;
  --hm-purple-text: #644399;
  --hm-mint-soft: #def5e9;
  --hm-mint-text: #19634e;
  --hm-sky-soft: #e2eefb;
  --hm-sky-text: #285d93;
  --hm-amber-soft: #fff0cf;
  --hm-amber-text: #835609;
  --hm-red-soft: #fde2df;
  --hm-red-text: #9a3731;
  --hm-focus: #644399;

  /* Added by the 2026-09-27 handoff (Telegram 5515): the second surface,
   * the sidebar's own text, the orange used as ink, the room rack's column
   * marks and bar fills, and the shadows. Every text pair checked >= 4.5:1. */
  --hm-surface-2: #faf8f4;
  --hm-sidebar-text: #e6eeee;
  --hm-sidebar-muted: #a3b3b8;
  --hm-sidebar-active: rgba(255, 255, 255, 0.11);
  --hm-primary-hover: #ff8c50;
  --hm-orange-ink: #b0461a;
  --hm-today: #fff0e6;
  --hm-weekend: #f9f7f2;
  --hm-bar-mint: #a6e3c6;
  --hm-bar-amber: #f6d88f;
  --hm-bar-sky: #aecff0;
  --hm-bar-purple: #ccb8f2;
  --hm-bar-ink: #1d252b;
  --hm-shadow: 0 1px 2px rgba(36, 43, 50, 0.05), 0 10px 30px rgba(36, 43, 50, 0.06);
  --hm-shadow-pop: 0 24px 60px rgba(36, 43, 50, 0.18);
  --hm-shadow-side: -18px 0 50px rgba(20, 26, 32, 0.14);
  --hm-shadow-primary: 0 6px 18px rgba(255, 122, 54, 0.28);
  --hm-scrim: rgba(20, 26, 32, 0.32);

  /* The names style.css already used, now pointing at the tokens. */
  --bg: var(--hm-background);
  --panel: var(--hm-surface);
  --surface: var(--hm-surface);
  --text: var(--hm-text);
  --muted: var(--hm-text-muted);
  --line: var(--hm-border-subtle);
  /* Orange as ink (links, selected tabs, borders), not as a button fill:
   * the fill is --primary, with dark text on it. */
  --accent: var(--hm-orange-ink);
  --soft: #fff0e4;

  --control: var(--hm-border-control);
  --primary: var(--hm-primary);
  --primary-hover: var(--hm-primary-hover);
  --on-primary: var(--hm-on-primary);
  --focus: var(--hm-focus);

  --sidebar-bg: var(--hm-sidebar);
  --sidebar-text: var(--hm-sidebar-text);
  --sidebar-muted: var(--hm-sidebar-muted);
  --sidebar-hover: #35434b;
  --sidebar-line: #3b4850;

  /* Quiet surfaces: table heads, group rows, weekends, the rate type row. */
  --surface-2: var(--hm-surface-2);
  --surface-3: #eeece6;
  --surface-weekend: var(--hm-weekend);
  --surface-warm: #f7f1e8;
  /* The orange tint of a hovered and a chosen cell or row. */
  --tint: #fff4ea;
  --tint-strong: #ffe3cf;

  --mint-soft: var(--hm-mint-soft);
  --mint-text: var(--hm-mint-text);
  --mint-solid: #2f8a6c;
  --amber-soft: var(--hm-amber-soft);
  --amber-text: var(--hm-amber-text);
  --amber-solid: #b07a14;
  --sky-soft: var(--hm-sky-soft);
  --sky-text: var(--hm-sky-text);
  --sky-solid: #3a78b8;
  --red-soft: var(--hm-red-soft);
  --red-text: var(--hm-red-text);
  --red-solid: #b3261e;
  --on-red-solid: #ffffff;
  --purple-solid: #6d4fc2;
  --on-purple-solid: #ffffff;
  --purple-soft: var(--hm-purple-soft);
  --purple-text: var(--hm-purple-text);
  --purple-line: #d9ccf6;
  --neutral-soft: #eceae4;
  --neutral-text: #4f5962;
  --neutral-solid: #6b7680;

  --hatch: rgba(154, 55, 49, 0.35);
  --hatch-soft: rgba(154, 55, 49, 0.18);
  --hover-overlay: rgba(0, 0, 0, 0.06);
  --shadow-soft: #2734420a;
  --shadow-strong: #20283335;
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --hm-background: #101923;
    --hm-surface: #1a2634;
    --hm-text: #f0f3f8;
    --hm-text-muted: #9cabbc;
    --hm-border-subtle: #304050;
    --hm-border-control: #72889d;
    /* A little deeper than the first package, so the sidebar stands apart
     * from the #101923 workspace (2026-09-27 handoff). */
    --hm-sidebar: #0b121a;
    --hm-primary: #ff8b48;
    --hm-on-primary: #242b32;
    --hm-purple-soft: #393452;
    --hm-purple-text: #d1b7ff;
    --hm-mint-soft: #173f3e;
    --hm-mint-text: #87e6c8;
    --hm-sky-soft: #203c59;
    --hm-sky-text: #99ceff;
    --hm-amber-soft: #473722;
    --hm-amber-text: #ffcf7c;
    --hm-red-soft: #4b2a35;
    --hm-red-text: #ffacb3;
    --hm-focus: #d1b7ff;

    --hm-surface-2: #15202d;
    --hm-sidebar-text: #e6edf5;
    --hm-sidebar-muted: #8fa0b3;
    --hm-sidebar-active: rgba(255, 139, 72, 0.14);
    --hm-primary-hover: #ff9d63;
    --hm-orange-ink: #ffa46e;
    --hm-today: rgba(255, 139, 72, 0.11);
    --hm-weekend: #152030;
    --hm-bar-mint: #1e5a4f;
    --hm-bar-amber: #6b5226;
    --hm-bar-sky: #28507c;
    --hm-bar-purple: #4f4580;
    --hm-bar-ink: #f3f6fa;
    --hm-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.3);
    --hm-shadow-pop: 0 30px 80px rgba(0, 0, 0, 0.55);
    --hm-shadow-side: -18px 0 50px rgba(0, 0, 0, 0.45);
    --hm-shadow-primary: 0 6px 18px rgba(255, 139, 72, 0.22);
    --hm-scrim: rgba(4, 8, 14, 0.55);

    --accent: var(--hm-orange-ink);
    --soft: #33291f;
    --primary-hover: var(--hm-primary-hover);

    --sidebar-text: var(--hm-sidebar-text);
    --sidebar-muted: var(--hm-sidebar-muted);
    --sidebar-hover: #1f2b39;
    --sidebar-line: #26323f;

    --surface-2: var(--hm-surface-2);
    --surface-3: #243446;
    --surface-weekend: var(--hm-weekend);
    --surface-warm: #262d36;
    --tint: #2b2822;
    --tint-strong: #4a3424;

    --mint-solid: #4cc59f;
    --amber-solid: #e0a84a;
    --sky-solid: #5aa9f0;
    --red-solid: #ff7b86;
    --on-red-solid: #2a0d10;
    --purple-solid: #a88bf0;
    --on-purple-solid: #1c1033;
    --purple-line: #4d4670;
    --neutral-soft: #263444;
    --neutral-text: #b8c5d3;
    --neutral-solid: #7f92a6;

    --hatch: rgba(255, 172, 179, 0.35);
    --hatch-soft: rgba(255, 172, 179, 0.2);
    --hover-overlay: rgba(255, 255, 255, 0.08);
    --shadow-soft: #00000033;
    --shadow-strong: #00000099;
  }
}

/* A calm change of colour, not a moving page; none at all for someone who
 * asked their system for less motion. */
@media (prefers-reduced-motion: no-preference) {
  :root.theme-switching,
  :root.theme-switching * {
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }
}