/* Tmel theme "classic" (ENV TMEL_THEME=classic, the default).
   The look of web 1.0: a dark canvas, full surfaces, 1px lines, no glass.
   Tokens come from web 3.0. The fonts are not bundled yet; the names fall
   back to system fonts and nothing is loaded from the web. */

:root[data-theme="classic"] {
  color-scheme: dark;

  --tmel-canvas: #100904;
  --tmel-card: #140c06;
  --tmel-button: #2c1c10;
  --tmel-text: #ffedd7;
  --tmel-gold: #c89526;
  --tmel-gold-light: #f9e7a6;
  --tmel-heading: #dc5000;
  --tmel-muted: #8a7a67;
  --tmel-line: #40372e;
  --tmel-positive: #7fae6d;
  --tmel-nav-bg: #100904;
  --tmel-sidebar-bg: #140c06;

  --font-family: "Inter", -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-heading: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;

  /* Named values that upstream mixes with alpha (oklch of the canvas and the text) */
  --lch-white: 14.75% 0.018 63.8;
  --lch-black: 95.47% 0.035 72.9;

  --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-gold-light);
  --color-border: var(--tmel-line);
  --color-border-dark: var(--tmel-line);
  --color-border-darker: var(--tmel-muted);
  --color-selected: var(--tmel-button);
  --color-selected-dark: var(--tmel-line);
  --color-alert: var(--tmel-heading);
  --color-positive: var(--tmel-positive);
}

:root[data-theme="classic"] :is(h1, h2) {
  font-family: var(--font-family-heading);
}

:root[data-theme="classic"] h1 {
  color: var(--tmel-heading);
}

/* Full surfaces with 1px lines instead of shadows */
:root[data-theme="classic"] #nav:has(*) {
  background-color: var(--tmel-nav-bg);
  border-block-end: 1px solid var(--tmel-line);
}

:root[data-theme="classic"] body.sidebar #sidebar {
  background-color: var(--tmel-sidebar-bg);
  border-inline-start: 1px solid var(--tmel-line);
}

:root[data-theme="classic"] #sidebar :is(.sidebar__tools, .directs) {
  background-color: var(--tmel-sidebar-bg);
}

:root[data-theme="classic"] .panel {
  background-color: var(--tmel-card);
  border: 1px solid var(--tmel-line);
  box-shadow: none;
}

:root[data-theme="classic"] .shadow {
  border: 1px solid var(--tmel-line);
  box-shadow: none;
}

:root[data-theme="classic"] .btn:not(.btn--reversed, .btn--negative, :has(input:checked)) {
  --btn-background: var(--tmel-button);
  --btn-border-color: var(--tmel-line);
}

:root[data-theme="classic"] .btn--reversed {
  --btn-background: var(--tmel-gold);
  --btn-color: var(--tmel-canvas);
}

:root[data-theme="classic"] .lightbox {
  background-color: oklch(var(--lch-white) / 0.9);
}

/* Classic is always dark. Upstream flips its black icons only when the system is
   dark, so on a light system they are flipped here. */
@media (prefers-color-scheme: light) {
  :root[data-theme="classic"] .colorize--black {
    filter: invert(100%);
  }

  :root[data-theme="classic"] .colorize--white {
    filter: invert(0%);
  }

  :root[data-theme="classic"] .btn img:not([class]) {
    filter: invert(100%);
  }

  :root[data-theme="classic"] :is(.btn--reversed, .btn--negative) img:not(.avatar) {
    filter: invert(0%);
  }

  :root[data-theme="classic"] .btn:has(input:checked) img {
    filter: invert(0%);
  }
}