/* Cloudmorrow design tokens.

   Everything the website, the store and the learning portal paint with.
   The neutrals are the app's own (CATHODE, from palette.py and base.css),
   so the site and the app are one product. The two colours come from the
   logo: the blue of the cloud the hedgehog sits on, and the amber of the
   hedgehog. Blue is the platform: links, navigation, the current thing.
   Amber is the person: the one action you take on a screen.

   Dark is the default, as it is in the app. The rules that go with these
   values are in brand/index.html.

   Fonts (Google Fonts):
   https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;600&display=swap */

:root {
  /* -- palette: fixed values, never themed ------------------------------ */
  --cm-night: #0b0d12;     /* behind the logo; hero bands */
  --cm-ink: #14171f;       /* the app's page */
  --cm-surface: #1f242e;   /* the app's panels */
  --cm-panel: #272d39;
  --cm-line: #333a48;
  --cm-line-bright: #4a5364;
  --cm-text: #dfe5f0;
  --cm-muted: #99a1b3;

  --cm-deep: #0a3f75;      /* cloud, in shadow */
  --cm-cloud: #1c70b1;     /* cloud: the brand blue */
  --cm-puff: #3685bd;      /* cloud, lit */
  --cm-sky: #5aa6e0;       /* blue as text or a line on dark */
  --cm-sky-ink: #1a5e9c;   /* blue as text on light */

  --cm-bark: #35291e;      /* hedgehog outline */
  --cm-spine: #845b28;     /* hedgehog, in shadow */
  --cm-fur: #c18635;       /* the hedgehog */
  --cm-lens: #e0a84c;      /* the glasses catching light: the action fill */
  --cm-fur-ink: #8a5a14;   /* amber as text on light */

  /* -- roles: dark (default) -------------------------------------------- */
  --bg: var(--cm-ink);
  --surface: var(--cm-surface);
  --surface-2: var(--cm-panel);
  --line: var(--cm-line);
  --line-strong: var(--cm-line-bright);
  --text: var(--cm-text);
  --text-muted: var(--cm-muted);
  --link: var(--cm-sky);            /* links, the current tab, focus */
  --brand: var(--cm-cloud);         /* blue fills with white text */
  --brand-ink: #ffffff;
  --action: var(--cm-lens);         /* the one primary action per view */
  --action-ink: var(--cm-ink);
  --warm-text: var(--cm-lens);      /* amber as text: names, highlights */
  --good: #5ce89b;
  --warn: #ff9f5a;
  --bad: #ff6b81;
  color-scheme: dark;

  /* -- type -------------------------------------------------------------- */
  --font-display: "Barlow Semi Condensed", "Barlow", "DIN Alternate", "Bahnschrift", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A 1.25 scale from 17px body. */
  --step--1: 0.8125rem;  /* 13  labels, captions */
  --step-0: 1.0625rem;   /* 17  body */
  --step-1: 1.3125rem;   /* 21  lead */
  --step-2: 1.625rem;    /* 26  h3 */
  --step-3: 2.0625rem;   /* 33  h2 */
  --step-4: 2.5625rem;   /* 41  h1 */
  --step-5: 3.5rem;      /* 56  display */

  /* -- space: a 4px grid ------------------------------------------------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* -- shape: the app's -------------------------------------------------- */
  --radius: 14px;          /* cards and groups, as in base.css */
  --radius-control: 10px;  /* buttons, inputs */
  --dot-gap: 0.08;         /* a pixel dot fills 84% of its cell ... */
  --dot-round: 0.14;       /* ... with corners this round, as core.js draws them */
  --measure: 66ch;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #e9edf3;
    --line: #d5dbe5;
    --line-strong: #b6bfcd;
    --text: var(--cm-ink);
    --text-muted: #5a6275;
    --link: var(--cm-sky-ink);
    --warm-text: var(--cm-fur-ink);
    --good: #1d7a45;
    --warn: #a3480f;
    --bad: #b3261e;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #e9edf3;
  --line: #d5dbe5;
  --line-strong: #b6bfcd;
  --text: var(--cm-ink);
  --text-muted: #5a6275;
  --link: var(--cm-sky-ink);
  --warm-text: var(--cm-fur-ink);
  --good: #1d7a45;
  --warn: #a3480f;
  --bad: #b3261e;
  color-scheme: light;
}