/* ============================================================
   Open House Protocol — design tokens

   The shell is a deep slate rail against a cool off-white
   operations canvas. All color is OKLCH. No pure black, no pure
   white.

   There is no colour accent. Primary action is carried by weight
   and by graphite fill, not by hue, so the only saturated things
   on any screen are the four statuses: confirmed, waiting,
   problem, informational. That is the whole point of the choice.
   A green button next to a green "Confirmed" chip taught the eye
   nothing; now green means exactly one thing.

   Sizes are Catalyst's shape shifted up one notch, because this
   is read on a phone in daylight by people who are not looking
   for it. Control heights obey this product's 48/44 floors, not
   a desk tool's density.
   ============================================================ */

:root {
  /* ---- Dark shell — deep slate (sidebar, top bar, phone tab bar) ---- */
  --shell:           oklch(18% 0.014 262);
  --shell-raised:    oklch(23.5% 0.016 262);
  --shell-hover:     oklch(28.5% 0.016 262);
  --shell-sunken:    oklch(14% 0.012 262);
  --shell-line:      oklch(29% 0.015 262);
  --shell-line-soft: oklch(25% 0.013 262);
  --shell-glow:      oklch(26% 0.016 262);  /* sign-in field lift */
  /* `<meta name="theme-color">` still has patchy OKLCH support, so the browser
     chrome needs a hex. It lives here, next to the colour it mirrors, and
     `applyTenant()` reads it from the token rather than carrying its own copy.
     Keep it in step with --shell. */
  --shell-hex:       #1c1f28;
  --shell-ink:       oklch(95% 0.005 250);
  --shell-ink-soft:  oklch(75% 0.014 255);
  /* Sits above 4.5:1 on the raised slate as well as the flat
     slate, because a nav item's second line is read on both. */
  --shell-ink-faint: oklch(62% 0.014 255);

  /* ---- Light operations canvas ---- */
  --canvas:         oklch(97.4% 0.004 255);
  --surface:        oklch(96% 0.005 255);    /* tinted inset panel */
  --surface-raised: oklch(99.4% 0.0015 255); /* near-white panel   */
  --surface-sunken: oklch(96.8% 0.005 255);  /* table head, insets */
  --surface-hover:  oklch(97.2% 0.005 255);
  --line:           oklch(90.5% 0.006 255);
  --line-soft:      oklch(93.2% 0.005 255);
  --line-strong:    oklch(85% 0.008 255);

  /* ---- Ink ---- */
  --ink:       oklch(23% 0.014 262);
  --ink-soft:  oklch(40% 0.013 260);
  --ink-muted: oklch(50% 0.012 258);  /* the floor for meaningful text */
  --ink-faint: oklch(58% 0.012 257);  /* decorative glyphs only */

  /* ---- Action: graphite, not a hue ----
     Primary is a filled slate. Selection and focus are the same
     family. Nothing here competes with a status colour. */
  --accent:        oklch(38% 0.014 262);
  --accent-strong: oklch(26% 0.015 262);
  --accent-soft:   oklch(92% 0.006 262);
  --accent-tint:   oklch(96.2% 0.005 262);
  --accent-line:   oklch(83% 0.008 262);
  --accent-ink:    oklch(98.6% 0.002 262);
  --focus:         oklch(45% 0.02 262);
  --focus-ondark:  oklch(82% 0.012 255);

  /* ---- Status. Fixed hues. These never move, for any brokerage. ----
     Text tones are pulled darker than a desk product would need
     because the audit measures real pixels at 4.5:1 and this is
     read outdoors. */
  --positive:        oklch(58% 0.14 158);
  --positive-strong: oklch(41% 0.115 158);
  --positive-soft:   oklch(94% 0.045 158);
  --positive-line:   oklch(85% 0.075 158);
  --positive-ink:    oklch(39% 0.11 158);

  --attention:        oklch(80% 0.15 85);
  --attention-strong: oklch(46% 0.10 66);
  --attention-soft:   oklch(95% 0.045 90);
  --attention-line:   oklch(87% 0.075 85);
  --attention-ink:    oklch(42% 0.09 66);

  --danger:        oklch(56% 0.18 25);
  --danger-strong: oklch(46% 0.17 25);
  --danger-soft:   oklch(95% 0.032 25);
  --danger-line:   oklch(87% 0.07 25);
  --danger-ink:    oklch(44% 0.16 25);

  --info:       oklch(60% 0.11 236);
  --info-soft:  oklch(95% 0.028 236);
  --info-line:  oklch(87% 0.045 236);
  --info-ink:   oklch(43% 0.095 236);

  --neutral-soft: oklch(95.5% 0.005 255);
  --neutral-line: oklch(89.5% 0.006 255);
  --neutral-ink:  oklch(45% 0.012 260);

  /* ---- Elevation. Shadows carry the canvas hue; neutral black
     on a cool surface reads as dirt. ---- */
  --shadow-xs:   0 1px 1px oklch(24% 0.02 262 / 0.05);
  --shadow-sm:   0 1px 2px oklch(24% 0.02 262 / 0.05), 0 1px 3px oklch(24% 0.02 262 / 0.05);
  --shadow-md:   0 2px 6px oklch(24% 0.02 262 / 0.06), 0 6px 16px oklch(24% 0.02 262 / 0.07);
  --shadow-lg:   0 4px 10px oklch(24% 0.02 262 / 0.07), 0 16px 40px oklch(24% 0.03 262 / 0.13);
  --shadow-rail: 0 8px 28px oklch(24% 0.03 262 / 0.16), 0 30px 70px oklch(20% 0.03 262 / 0.22);
  --shadow-shell: inset -1px 0 0 oklch(12% 0.01 262 / 0.5);

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---- Typography ----
     One family. Buttons, data, statuses, times and instructions
     never use a display face; the condensed brand face is
     identity and appears only in the wordmark. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --t-micro: 0.6875rem; /* 11px — overline only */
  --t-xs:    0.75rem;   /* 12px */
  --t-sm:    0.8125rem; /* 13px */
  --t-base:  0.9375rem; /* 15px — default UI body */
  --t-md:    1rem;      /* 16px — agent-facing rows */
  --t-lg:    1.125rem;  /* 18px */
  --t-xl:    1.375rem;  /* 22px */
  --t-2xl:   1.625rem;  /* 26px */
  --t-3xl:   2rem;      /* 32px — page title */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.5;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     680;

  --track-tight: -0.012em;
  --track-title: -0.022em;
  --track-label: 0.04em;
  --track-over:  0.12em;

  /* ---- Spacing (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;

  /* ---- Control heights. This product's floors, not a desk
     tool's density: 48px for a primary action, 44px for anything
     else that matters, 64px for the phone tab bar. ---- */
  --ctl-lg: 48px;
  --ctl-md: 44px;
  --ctl-sm: 44px;
  --tabbar-h: 64px;

  /* ---- Motion ---- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 130ms;
  --t-mid:  190ms;
  --t-slow: 260ms;

  /* ---- Z-index ---- */
  --z-rail: 5;
  --z-sticky: 20;
  --z-dropdown: 30;
  --z-drawer: 40;
  --z-overlay: 45;
  --z-toast: 60;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --topbar-h: 60px;
  --content-max: 1320px;
}