/* Skins (skins.js): Ocean and Navigator, a fourth axis beside the
   scheme, accent and density app.css already reads from <html>. Loaded
   right after app.css so these rules win ties with its token blocks; the
   [data-skin][data-scheme] pairs also outrank the dark accent combos.

   Ocean redefines the palette tokens, light and dark, and keeps its own
   accent only while the accent is Default. Navigator paints the real sky
   on a fixed canvas behind the page (skins.js sets --sky-zenith,
   --sky-horizon and --sky-l from the sun), so the body is transparent and
   the surfaces are translucent versions of the dark palette; with daylight
   on and the sun up, skins.js flips data-scheme to light and the light
   set below takes over. Text keeps AA contrast on every surface. */

/* ---------- Ocean ---------- */
:root[data-skin="ocean"] {
  --bg: #E4F1F4;
  --surface: #F7FBFC;
  --surface-2: #D9EAEF;
  --text-3: #5B6A70;
  --line: #C9DDE3;
  --hover: #D3E6EC;
  --unread-row: #FFFFFF;
  --read-row: #EAF4F7;
  --shadow: 0 1px 3px rgba(4, 20, 32, .14), 0 4px 12px rgba(4, 20, 32, .10);
}
:root[data-skin="ocean"][data-accent="default"] {
  --accent: #0E6E8C;
  --accent-text: #FFFFFF;
  --accent-ink: #0B5F7A;
  --selected: #BFE1EA;
  --compose: #BFE1EA;
}
:root[data-skin="ocean"][data-scheme="dark"] {
  --bg: #041420;
  --surface: #082233;
  --surface-2: #0C2D42;
  --text: #E3EEF3;
  --text-2: #BFD3DC;
  --text-3: #8AA6B4;
  --line: #123A4F;
  --hover: #0F3449;
  --unread-row: #082233;
  --read-row: #06192A;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .4);
}
:root[data-skin="ocean"][data-scheme="dark"][data-accent="default"] {
  --accent: #3FB6D1;
  --accent-text: #04131F;
  --accent-ink: #7BD3E6;
  --selected: #124A62;
  --compose: #124A62;
}
/* A faint sea-glass glow at the foot of the page, like the sign-in page. */
:root[data-skin="ocean"] body {
  background: radial-gradient(1000px 460px at 50% 115%, color-mix(in srgb, var(--seaglass) 30%, transparent), transparent 62%), var(--bg);
}

/* ---------- Navigator ---------- */
:root[data-skin="navigator"] {
  background-color: var(--sky-zenith, #0A1A27);
  transition: background-color 2s;
  --bg: transparent;
  --surface: rgba(15, 35, 51, .74);
  --surface-2: rgba(20, 44, 63, .80);
  --line: rgba(60, 96, 122, .55);
  --hover: rgba(24, 52, 74, .80);
  --selected: rgba(30, 74, 94, .85);
  --unread-row: rgba(15, 35, 51, .78);
  --read-row: rgba(12, 30, 44, .60);
  --compose: rgba(30, 74, 94, .90);
  --sky-panel: rgba(13, 30, 44, .96);   /* bars that must hide what scrolls under them */
}
:root[data-skin="navigator"][data-scheme="light"] {
  --surface: rgba(255, 255, 255, .84);
  --surface-2: rgba(238, 243, 246, .86);
  --text-3: #566368;
  --line: rgba(160, 180, 195, .55);
  --hover: rgba(233, 238, 242, .88);
  --selected: rgba(212, 234, 240, .92);
  --unread-row: rgba(255, 255, 255, .86);
  --read-row: rgba(242, 246, 250, .66);
  --compose: rgba(205, 231, 238, .92);
  --sky-panel: rgba(246, 248, 252, .96);
}
:root[data-skin="navigator"] body { background: transparent; }

.sky-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Text that sits on the sky itself, outside the main card, gets a veil
   of the surface colour and a touch of blur where it is cheap. */
:root[data-skin="navigator"] .topbar,
:root[data-skin="navigator"] .sidebar,
:root[data-skin="navigator"] .rail {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
:root[data-skin="navigator"] .popover,
:root[data-skin="navigator"] .dialog,
:root[data-skin="navigator"] .compose-win,
:root[data-skin="navigator"] .tasks-panel,
:root[data-skin="navigator"] .reminder-toast {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* The two places app.css paints var(--bg), which is now transparent. */
:root[data-skin="navigator"] .gen-save { background: var(--sky-panel); }
@media (max-width: 860px) {
  :root[data-skin="navigator"] .sidebar { background: var(--sky-panel); }
}

/* The print page is paper in every skin (print.css); the body rules above
   would outrank it, so say it again here, and hide the sky. */
:root[data-skin="ocean"] body:has(.print-page),
:root[data-skin="navigator"] body:has(.print-page) { background: #fff; }
:root[data-skin="navigator"]:has(.print-page) { background-color: #fff; }
body:has(.print-page) .sky-canvas { display: none; }