/* Tmel theme "apple" (ENV TMEL_THEME=apple).
   Light and dark mode follow the system, elements are rounded, and glass
   (backdrop-filter) sits ONLY on the header (#nav) and the side panel
   (#sidebar). Messages, forms and dialogs stay without glass.
   Glass rules are flat (no nesting) and start with
   :root[data-theme="apple"] #nav or :root[data-theme="apple"] #sidebar;
   test/integration/tmel_theme_test.rb checks that. */

:root[data-theme="apple"] {
  --tmel-light-canvas: #fbfbfd;
  --tmel-light-card: #f5f5f7;
  --tmel-light-text: #1d1d1f;
  --tmel-light-muted: #6e6e73;
  --tmel-light-line: #d2d2d7;
  --tmel-light-link: #0066cc;
  --tmel-light-nav-bg: #fbfbfdcc;
  --tmel-light-sidebar-bg: #f5f5f7cc;

  --tmel-dark-canvas: #000000;
  --tmel-dark-card: #1c1c1e;
  --tmel-dark-text: #f5f5f7;
  --tmel-dark-muted: #98989d;
  --tmel-dark-line: #38383a;
  --tmel-dark-link: #2997ff;
  --tmel-dark-nav-bg: #1c1c1ecc;
  --tmel-dark-sidebar-bg: #1c1c1ecc;

  --tmel-canvas: var(--tmel-light-canvas);
  --tmel-card: var(--tmel-light-card);
  --tmel-text: var(--tmel-light-text);
  --tmel-muted: var(--tmel-light-muted);
  --tmel-line: var(--tmel-light-line);
  --tmel-link: var(--tmel-light-link);
  --tmel-nav-bg: var(--tmel-light-nav-bg);
  --tmel-sidebar-bg: var(--tmel-light-sidebar-bg);
  --tmel-radius: 1.25em;
  --tmel-glass: saturate(180%) blur(20px);

  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --color-bg: var(--tmel-canvas);
  --color-message-bg: var(--tmel-card);
  --color-text: var(--tmel-text);
  --color-text-reversed: var(--tmel-canvas);
  --color-link: var(--tmel-link);
  --color-border: var(--tmel-line);
  --color-border-dark: var(--tmel-line);
  --color-border-darker: var(--tmel-muted);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="apple"] {
    --tmel-canvas: var(--tmel-dark-canvas);
    --tmel-card: var(--tmel-dark-card);
    --tmel-text: var(--tmel-dark-text);
    --tmel-muted: var(--tmel-dark-muted);
    --tmel-line: var(--tmel-dark-line);
    --tmel-link: var(--tmel-dark-link);
    --tmel-nav-bg: var(--tmel-dark-nav-bg);
    --tmel-sidebar-bg: var(--tmel-dark-sidebar-bg);
  }
}

/* Rounded elements, no glass */
:root[data-theme="apple"] .panel {
  border-radius: var(--tmel-radius);
}

:root[data-theme="apple"] .shadow {
  border-radius: var(--tmel-radius);
}

:root[data-theme="apple"] .input {
  --input-border-radius: 0.75em;
}

/* Glass: the header */
:root[data-theme="apple"] #nav:has(*) {
  -webkit-backdrop-filter: var(--tmel-glass);
  backdrop-filter: var(--tmel-glass);
  background-color: var(--tmel-nav-bg);
  border-block-end: 1px solid var(--tmel-line);
}

/* Glass: the side panel and its sticky parts */
:root[data-theme="apple"] #sidebar {
  -webkit-backdrop-filter: var(--tmel-glass);
  backdrop-filter: var(--tmel-glass);
  background-color: var(--tmel-sidebar-bg);
}

:root[data-theme="apple"] #sidebar .sidebar__tools,
:root[data-theme="apple"] #sidebar .directs {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: transparent;
}