/*
 * Design tokens.
 *
 * Light is the base; dark is applied both by explicit choice
 * (data-theme="dark") and by OS preference when no choice has been made.
 * Every colour used anywhere in the app comes from here, so retheming for the
 * wall display is a token change, not a hunt through four stylesheets.
 */

:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Surfaces */
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eceff5;
  --border: #d9dee8;
  --border-strong: #c2cad8;

  /* Text */
  --text: #131a27;
  --text-dim: #5a6679;
  --text-faint: #8b95a6;
  --text-invert: #ffffff;

  /* Accents */
  --accent: #2563eb;
  --accent-soft: #dbe6ff;
  --danger: #d92d20;
  --danger-soft: #fde4e2;
  --warn: #b54708;
  --warn-soft: #fdeed3;
  --ok: #067647;
  --ok-soft: #d7f5e4;
  --muted: #64748b;

  /* Geometry */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 24px 48px rgba(16, 24, 40, 0.18);

  /* Type scale. The wall preset scales these up in one place. */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --cell-min-height: 6.5rem;

  /*
   * Minimum width of a summary stat column. It has to scale with the type
   * scale: at wall size "$1,861.94" is ~190px wide, and an 8.5rem track let it
   * run straight into the next stat.
   */
  --stat-min: 8.5rem;
}

/* Dark by OS preference, unless the user explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1017;
    --surface: #141b25;
    --surface-2: #1b2430;
    --surface-3: #232e3c;
    --border: #2a3546;
    --border-strong: #3b4859;

    --text: #e8edf5;
    --text-dim: #9aa8bd;
    --text-faint: #6c7b91;

    --accent: #6ea0ff;
    --accent-soft: #1b2b48;
    --danger: #ff8078;
    --danger-soft: #3a1c1c;
    --warn: #f0b357;
    --warn-soft: #3a2b16;
    --ok: #57d196;
    --ok-soft: #123326;
    --muted: #8194ad;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.6);
  }
}

/* Explicit dark choice. */
:root[data-theme="dark"] {
  --bg: #0b1017;
  --surface: #141b25;
  --surface-2: #1b2430;
  --surface-3: #232e3c;
  --border: #2a3546;
  --border-strong: #3b4859;

  --text: #e8edf5;
  --text-dim: #9aa8bd;
  --text-faint: #6c7b91;

  --accent: #6ea0ff;
  --accent-soft: #1b2b48;
  --danger: #ff8078;
  --danger-soft: #3a1c1c;
  --warn: #f0b357;
  --warn-soft: #3a2b16;
  --ok: #57d196;
  --ok-soft: #123326;
  --muted: #8194ad;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.6);
}

/*
 * Layout profile variables.
 *
 * These are set from JS out of the server-side layout profile (see layout.js),
 * which is why there are no per-view type overrides here any more: one scale
 * factor, applied once, that the user can change from the settings dialog.
 */
:root {
  --grid-cols: 12;
  --row-unit: 5.5rem;
  --font-scale: 1;
  --gap: var(--space-4);
  --pad: var(--space-4);
}

html {
  /* Percent, not rem: a rem here would resolve against this very declaration. */
  font-size: calc(100% * var(--font-scale));
}

:root[data-density="compact"] {
  --gap: var(--space-2);
  --pad: var(--space-3);
}

:root[data-density="cozy"] {
  --gap: var(--space-3);
  --pad: var(--space-4);
}

:root[data-density="comfortable"] {
  --gap: var(--space-4);
  --pad: var(--space-5);
}