/*
 * ES design tokens (wave 10). The one source of color, type, spacing, radius, shadow and motion for the admin
 * (www/admin/assets/admin.css) and the "Moderna" forum theme (www/assets/modern/*.css). Guide: docs/design/README.md.
 *
 * Light by default; dark follows prefers-color-scheme. <html data-scheme="light|dark"> pins one (the modern theme's
 * scheme switch); the admin never sets it, so it always follows the OS.
 * The dark values are written twice (OS preference, explicit choice): change both together.
 */

:root {
  /* surfaces */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e3e6eb;
  --border-strong: #cfd4dc;
  /* text */
  --text: #1b1f27;
  --text-2: #4b5363;
  --muted: #646d7e;
  /* brand and links */
  --accent: #b3122e;
  --accent-hover: #951026;
  --accent-soft: #fbe9ec;
  --on-accent: #ffffff;
  --link: #1f5fbf;
  --link-soft: #eaf1fc;
  /* status */
  --ok: #1d7a46;
  --ok-soft: #e4f4ea;
  --warn: #9a5b00;
  --warn-soft: #fdf1dc;
  --danger: #b3122e;
  --danger-soft: #fbe6e9;
  --info: #24589c;
  --info-soft: #e5eefa;
  /* the dark chrome: admin sidebar, forum header */
  --chrome-bg: #14171d;
  --chrome-text: #aeb5c2;
  --chrome-strong: #ffffff;
  --chrome-hover: rgba(255, 255, 255, .06);
  --chrome-active: rgba(255, 255, 255, .1);
  --chrome-line: rgba(255, 255, 255, .08);
  /* forum content */
  --unread: #1f5fbf;
  --code-bg: #f3f4f7;
  --quote-bg: #f8f9fb;
  --quote-line: #cfd4dc;
  --mark: #fff3c4;
  /* depth */
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px -2px rgba(16, 24, 40, .07);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .12), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --shadow-lg: 0 20px 50px -12px rgba(16, 24, 40, .35);
  --backdrop: rgba(10, 12, 16, .55);
  /* shape */
  --radius-xs: 6px;    /* inline bits: code, segment inside a segmented control, tag */
  --radius-sm: 10px;   /* controls: inputs, buttons, menus items, alerts */
  --radius: 14px;      /* cards, boxes, tables */
  --radius-lg: 18px;   /* dialogs, hero blocks */
  --radius-pill: 999px; /* pills, chips, small buttons, badges, pager */
  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-post: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --lh: 1.5;
  --lh-tight: 1.25;
  --lh-post: 1.65;
  /* space: a 4px scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  /* motion */
  --dur-fast: .15s;
  --dur: .2s;
  --ease: cubic-bezier(.2, .7, .3, 1);
  /* layout */
  --control-h: 36px;
  --control-h-sm: 30px;
  --header-h: 56px;
  --page-w: 1240px;
  --read-w: 72ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #1c2029;
    --border: #262b36;
    --border-strong: #353b48;
    --text: #e6e9ef;
    --text-2: #b9c0cc;
    --muted: #8a93a3;
    --accent: #ef4b67;
    --accent-hover: #ff6680;
    --accent-soft: #3a1720;
    --on-accent: #14171d;
    --link: #79a8ff;
    --link-soft: #18253c;
    --ok: #4cc283;
    --ok-soft: #13301f;
    --warn: #f0b04a;
    --warn-soft: #362812;
    --danger: #ff6b81;
    --danger-soft: #3b1820;
    --info: #7fb0ff;
    --info-soft: #172741;
    --chrome-bg: #0b0d10;
    --chrome-text: #8f98a8;
    --unread: #79a8ff;
    --code-bg: #12151b;
    --quote-bg: #1c2029;
    --quote-line: #3b4250;
    --mark: #4a3d10;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .6);
    --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

:root[data-scheme="dark"] {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1c2029;
  --border: #262b36;
  --border-strong: #353b48;
  --text: #e6e9ef;
  --text-2: #b9c0cc;
  --muted: #8a93a3;
  --accent: #ef4b67;
  --accent-hover: #ff6680;
  --accent-soft: #3a1720;
  --on-accent: #14171d;
  --link: #79a8ff;
  --link-soft: #18253c;
  --ok: #4cc283;
  --ok-soft: #13301f;
  --warn: #f0b04a;
  --warn-soft: #362812;
  --danger: #ff6b81;
  --danger-soft: #3b1820;
  --info: #7fb0ff;
  --info-soft: #172741;
  --chrome-bg: #0b0d10;
  --chrome-text: #8f98a8;
  --unread: #79a8ff;
  --code-bg: #12151b;
  --quote-bg: #1c2029;
  --quote-line: #3b4250;
  --mark: #4a3d10;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}