/*
 * The site's chrome tokens: the small palette the index page and every app's
 * nav and footer are drawn with.
 *
 * Deliberately plain CSS custom properties rather than Radix Themes variables.
 * The index page is static HTML with no Radix on it, and these have to mean the
 * same thing in both places. Each app keeps its own richer theming for
 * everything between the nav and the footer; see
 * demos/heat-stress/src/styles/tokens.css.
 *
 * Light and dark. `data-theme` on <html> is the visitor's explicit choice and
 * wins; with no choice made, the system setting decides. The dark values appear
 * twice because those are two different selectors and CSS has no way to share
 * one block between them.
 */
:root {
  color-scheme: light dark;

  --sk-bg: #fcfcfd;
  --sk-surface: #ffffff;
  --sk-text: #15181e;
  --sk-muted: #59606e;
  --sk-border: #e1e4ea;
  --sk-accent: #3448c5;

  /* The one colour in the site mark. Model Home's violet, so the two marks
     read as relatives rather than strangers. */
  --sk-mark: #7a5af8;
  /* Model Home's own orange, taken from its navbar logo. */
  --sk-house: #d9822b;

  --sk-radius: 12px;
  --sk-radius-sm: 8px;
  /* Tight, because focus rings hug small inline links as often as cards. */
  --sk-radius-focus: 4px;
  --sk-gap: 16px;

  /* The one width and gutter the nav bar is laid out on, so the mark sits in
     exactly the same place on every page of the site. */
  --sk-page-max: 1240px;
  --sk-page-pad: 24px;

  --sk-font:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (max-width: 640px) {
  :root {
    --sk-page-pad: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sk-bg: #0f1116;
    --sk-surface: #171a21;
    --sk-text: #eceef3;
    --sk-muted: #a2a9b8;
    --sk-border: #282d37;
    --sk-accent: #9fadff;
    --sk-mark: #9b83ff;
  }
}

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

  --sk-bg: #0f1116;
  --sk-surface: #171a21;
  --sk-text: #eceef3;
  --sk-muted: #a2a9b8;
  --sk-border: #282d37;
  --sk-accent: #9fadff;
  --sk-mark: #9b83ff;
}

:root[data-theme='light'] {
  color-scheme: light;
}