/**
 * Personal Monitoring — tokens this app alone defines.
 *
 * The palette moved to /shared/css/tokens.css, with the names used here mapped
 * onto it in /shared/css/compat/monitoring.css. Both are linked before this
 * file in index.html. What remains is the scale work no other app has: the 8px
 * spacing rhythm, the type scale, z-index layers and the chart geometry.
 *
 * The shadow block below re-points names the compat layer already aliased. That
 * is deliberate: this file wins by load order, so the softer elevation is
 * Personal Monitoring's alone and assistent and Library keep the shared values
 * until someone decides all three should move together.
 */

:root {
  /* ── Type scale ──
   * Body sits at 15px, not 14px. The design language calls for an airy,
   * editorial feel and 14px reads as a dense admin panel — the one thing it
   * says this is not. The dense surfaces are unaffected: the calendar grid and
   * its chips size themselves in hardcoded rem, deliberately outside this
   * scale, so opening the body text up does not push the schedule around. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  /* Inter is drawn a touch wide for display sizes; headings settle with a
   * slight negative track. Body text keeps the default — tightening running
   * text costs legibility rather than buying polish. */
  --tracking-tight: -0.011em;

  /* ── Spacing (8px grid, airy) ── */
  --space-0: 0;
  --space-1: 8px;
  --space-2: 20px;
  --space-3: 28px;
  --space-4: 36px;
  --space-5: 44px;
  --space-6: 56px;

  /* ── Elevation ──
   * Layered and low-contrast: a wide, very faint ambient shadow plus a tight
   * contact shadow, instead of one mid-grey blur. On a cream background a
   * single 8%-black drop reads as grey haze around the card; splitting it lets
   * a surface look lifted without visibly tinting the paper it sits on.
   * Tinted with the ink hue rather than black for the same reason. */
  --shadow-xs:
    0 1px 2px rgba(33, 29, 24, 0.04),
    0 0 1px rgba(33, 29, 24, 0.06);
  --shadow-sm:
    0 1px 2px rgba(33, 29, 24, 0.04),
    0 2px 6px -1px rgba(33, 29, 24, 0.06);
  --shadow-md:
    0 2px 4px -1px rgba(33, 29, 24, 0.04),
    0 8px 20px -4px rgba(33, 29, 24, 0.08);
  --shadow-lg:
    0 4px 8px -2px rgba(33, 29, 24, 0.05),
    0 20px 40px -8px rgba(33, 29, 24, 0.12);
  --shadow: var(--shadow-sm);

  /* ── Chart ── */
  --chart-height: 280px;
  --chart-height-wide: 280px;

  /* ── Layout ── */
  --topbar-height: 64px;
  --content-max-width: 1440px;
  --grid-columns: 12;
  --grid-gap: var(--space-3);
  --panel-pad-x: var(--space-4);
  --panel-pad-y: var(--space-3);
  --panel-gap: var(--space-2);
  --filter-gap: var(--space-2);
  --label-control-gap: 6px;

  /* ── Z-index ── */
  --z-sidebar: 200;
  --z-topbar: 100;
  --z-overlay: 150;
  --z-modal: 300;

  /* ── Select chevron (native appearance override on Windows) ── */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2379705E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A99A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* Required, not optional: the light shadows above are literal values, so they
   * no longer follow --sc-shadow-* when the shared dark theme re-points it.
   * Without this block dark mode would render pale shadows on near-black.
   * Dark surfaces need more opacity and less spread — light does not bounce
   * back off them, so a wide faint blur simply disappears. */
  --shadow-xs:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 0 1px rgba(0, 0, 0, 0.34);
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 2px 6px -1px rgba(0, 0, 0, 0.36);
  --shadow-md:
    0 2px 4px -1px rgba(0, 0, 0, 0.32),
    0 8px 20px -4px rgba(0, 0, 0, 0.42);
  --shadow-lg:
    0 4px 8px -2px rgba(0, 0, 0, 0.36),
    0 20px 40px -8px rgba(0, 0, 0, 0.52);
}