/* Shared tokens for the site, the dashboard and the auth pages.
   Primitives are the only hex. Semantic names point at them.
   Light is the default. [data-theme="light"] and [data-theme="dark"] replace it.
   When data-theme is absent, the dark media query repeats the dark set, so the site, the
   dashboard and the auth pages follow the OS until a stored choice sets data-theme.
   --faint and --control are the WCAG AA values (SHL-162): faint text is at least 4.5:1
   on every background it sits on, and the control edge is at least 3:1 on card, ground and raised. */

:root {
  /* Grey ramp, named by hex. Not a uniform scale: each step is a color the screens already use. */
  --g-ffffff: #ffffff;
  --g-fbfbfb: #fbfbfb;
  --g-f7f7f7: #f7f7f7;
  --g-f2f2f2: #f2f2f2;
  --g-efefef: #efefef;
  --g-eeeeee: #eeeeee;
  --g-ececec: #ececec;
  --g-e8e8e8: #e8e8e8;
  --g-e6e6e6: #e6e6e6;
  --g-e4e4e4: #e4e4e4;
  --g-e2e2e2: #e2e2e2;
  --g-d4d4d4: #d4d4d4;
  --g-c8c8c8: #c8c8c8;
  --g-a6a6a6: #a6a6a6;
  --g-a3a3a3: #a3a3a3;
  --g-9a9ca1: #9a9ca1;
  --g-8a8a8a: #8a8a8a;
  --g-6b6b6b: #6b6b6b;
  --g-5e6065: #5e6065;
  --g-5c5c5c: #5c5c5c;
  --g-575757: #575757;
  --g-3f3f3f: #3f3f3f;
  --g-333333: #333333;
  --g-313131: #313131;
  --g-2a2a2a: #2a2a2a;
  --g-242424: #242424;
  --g-232323: #232323;
  --g-222222: #222222;
  --g-1c1c1c: #1c1c1c;
  --g-1a1a1a: #1a1a1a;
  --g-141414: #141414;
  --g-101010: #101010;
  --g-0e0e0e: #0e0e0e;
  --g-0a0a0a: #0a0a0a;
  --g-000000: #000000;

  /* Mint and red. Fragments' pill pairs live on the same two hues. */
  --m-14915a: #14915a;
  --m-a1ffcb: #a1ffcb;
  --m-d5f5e4: #d5f5e4;
  --m-0b6b40: #0b6b40;
  --m-18342b: #18342b;
  --r-c0263f: #c0263f;
  --r-ff8a98: #ff8a98;
  --r-ff9fab: #ff9fab;
  --r-a11d33: #a11d33;
  --r-fbe0e4: #fbe0e4;
  --r-3d1f26: #3d1f26;

  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Site steps, DESIGN.md Type. */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.05rem + 0.9vw, 2rem);
  --step-head: clamp(2.25rem, 1.2rem + 3vw, 3.75rem);
  --step-display: clamp(6rem, 11vw, 10rem);

  /* Dashboard steps: 12px, 13px, 22px. */
  --step-app-small: 0.75rem;
  --step-app-body: 0.8125rem;
  --step-app-title: 1.375rem;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius: 0;

  --focus-width: 2px;
  --focus-offset: 2px;
  /* Tracks --focus-color, including a surface that sets the color again. */
  --focus: var(--focus-color);

  /* theme:light */
  color-scheme: light dark;
  --ground: var(--g-fbfbfb);
  --card: var(--g-ffffff);
  --raised: var(--g-efefef);
  --border: var(--g-d4d4d4);
  --rule: var(--g-e4e4e4);
  --control: var(--g-8a8a8a);
  --ink: var(--g-1a1a1a);
  --muted: var(--g-575757);
  --faint: var(--g-5e6065);
  --accent: var(--r-c0263f);
  --accent-wash: var(--r-fbe0e4);
  --mint: var(--m-14915a);
  --on-ink: var(--g-ffffff);
  --on-mint: var(--g-ffffff);
  --strong: var(--g-000000);
  --focus-color: var(--m-14915a);
}

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

/* theme:dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--g-101010);
  --card: var(--g-0a0a0a);
  --raised: var(--g-1c1c1c);
  --border: var(--g-2a2a2a);
  --rule: var(--g-222222);
  --control: var(--g-6b6b6b);
  --ink: var(--g-f2f2f2);
  --muted: var(--g-a6a6a6);
  --faint: var(--g-9a9ca1);
  --accent: var(--r-ff8a98);
  --accent-wash: var(--r-3d1f26);
  --mint: var(--m-a1ffcb);
  --on-ink: var(--g-101010);
  --on-mint: var(--g-141414);
  --strong: var(--g-ffffff);
  --focus-color: var(--m-a1ffcb);
}

@media (prefers-color-scheme: dark) {
  /* theme:os-dark */
  :root:not([data-theme]) {
    color-scheme: dark;
    --ground: var(--g-101010);
    --card: var(--g-0a0a0a);
    --raised: var(--g-1c1c1c);
    --border: var(--g-2a2a2a);
    --rule: var(--g-222222);
    --control: var(--g-6b6b6b);
    --ink: var(--g-f2f2f2);
    --muted: var(--g-a6a6a6);
    --faint: var(--g-9a9ca1);
    --accent: var(--r-ff8a98);
    --accent-wash: var(--r-3d1f26);
    --mint: var(--m-a1ffcb);
    --on-ink: var(--g-101010);
    --on-mint: var(--g-141414);
    --strong: var(--g-ffffff);
    --focus-color: var(--m-a1ffcb);
  }
}