/* MedTel design tokens, shared by every signed-in patient page (the dashboard and the sleep page): the glossy healthcare palette, the
   page background and the spacing scale. Change a value here and both pages follow. ":not(#x)" raises specificity so the palette
   wins over the older dark-mode token blocks (the skin is light on purpose: a calm clinical look). */

/* Spacing: one 4 px grid. Use these, not loose pixel values. */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  --r-control: 12px;            /* buttons, inputs, pills */
  --r-card: 20px;               /* cards and tiles */
  --page-pad-x: var(--sp-6);    /* sides of the page on desktop */
  --page-gap: var(--sp-5);      /* between the blocks of a page */
  --tile-pad: 20px;             /* inside a reading tile (a 4 px step between --sp-4 and --sp-5) */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
}
@media (max-width: 959px) { :root { --page-pad-x: var(--sp-4); --page-gap: var(--sp-4); } }

/* Palette and page background */
:root:not(#x),:root[data-theme="light"]:not(#x),:root[data-theme="dark"]:not(#x){
  color-scheme:light;
  --mist:#E6F0F3; --paper:rgba(255,255,255,.68); --paper-2:rgba(255,255,255,.56); --pine:#12313A;
  --bg:#E6F0F3; --surface:rgba(255,255,255,.68); --surface-2:rgba(255,255,255,.56); --ink:#12313A;
  --peacock:#1D6E86; --accent:#1D6E86; --accent-ink:#FFFFFF; --accent-soft:rgba(42,140,166,.13); --accent-strong:#185B70;
  --line:rgba(35,95,115,.16); --line-soft:rgba(35,95,115,.10);
  --ink-2:#3C5963; --ink-3:#526972;
  --good:#267253; --good-soft:rgba(44,133,97,.12); --watch:#8A5F10; --watch-soft:rgba(176,122,30,.14); --urgent:#B33D34; --urgent-soft:rgba(185,63,54,.11);
  --grid:rgba(35,95,115,.09); --axis:rgba(35,95,115,.30); --baseline:#6A838D;
  --band:rgba(42,140,166,.07); --band-edge:rgba(42,140,166,.30);
  --nav-bg:rgba(255,255,255,.55); --nav-text:#3C5963;
  --voice-surface:linear-gradient(145deg,rgba(238,244,252,.92) 0%,rgba(226,242,243,.82) 70%,rgba(236,247,244,.85) 100%);
  --shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 0 rgba(35,95,115,.05) inset,0 14px 34px -20px rgba(25,80,100,.38);
}
html{background:#E6F0F3}
body{
  background:
    radial-gradient(900px 560px at 6% -8%, rgba(110,200,220,.34), transparent 62%),
    radial-gradient(800px 560px at 102% 8%, rgba(150,190,235,.26), transparent 62%),
    linear-gradient(165deg,#F4F9FA 0%,#E4EFF2 52%,#DAE9EE 100%) !important;
  background-attachment:fixed !important;
}