/* Janua's shared visual layer, direction B "the laws" (janua issue 26, docs/UI-RESEARCH.md § 5).
   Copied byte for byte into each app with fonts/ and marks.svg; design/README.md has the rules.

   A page sets its app on <html data-app="hebb|grimm|verner|zipf|ebbinghaus">; the hub sets none.
   It follows the OS theme, and <html data-theme="dark|light"> overrides it where an app has a
   toggle. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Ground and ink. Pure white and pure black, not cream and not a tinted near-black. */
  --j-bg: #ffffff;
  --j-ink: #000000;
  --j-muted: #3d3d3d;
  --j-rule: #000000;
  --j-hair: #d6d6d6;
  --j-danger: #b3261e;
  /* Each app's law is drawn in its own ink. */
  --j-hebb: #2b3fd6;
  --j-grimm: #8e1f2f;
  --j-verner: #00727a;
  --j-zipf: #c2410c;
  --j-ebbinghaus: #1e7a3e;
  --j-app: var(--j-ink);
  --j-on-app: #ffffff;

  --j-font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One scale (ratio 1.25 from 17px); body never below 16px. */
  --j-t-small: 15px;
  --j-t-body: 17px;
  --j-t-lead: 19px;
  --j-t-h3: 21px;
  --j-t-h2: 26px;
  --j-t-h1: 34px;
  --j-t-display: 48px;
  /* Spacing on a 4px step. */
  --j-s1: 4px; --j-s2: 8px; --j-s3: 12px; --j-s4: 16px; --j-s5: 20px; --j-s6: 24px; --j-s8: 32px;
  --j-target: 44px;
  --j-radius: 4px;
  --j-rule-w: 2px;
  --j-measure: 66ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --j-bg: #16181c; --j-ink: #f2f2f2; --j-muted: #b8b8b8; --j-rule: #f2f2f2; --j-hair: #3a3d42;
    --j-danger: #ff8a80;
    --j-hebb: #8c9bff; --j-grimm: #f08a9a; --j-verner: #4fc6cf; --j-zipf: #ff8f5a; --j-ebbinghaus: #5ccb83;
    --j-on-app: #16181c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --j-bg: #16181c; --j-ink: #f2f2f2; --j-muted: #b8b8b8; --j-rule: #f2f2f2; --j-hair: #3a3d42;
  --j-danger: #ff8a80;
  --j-hebb: #8c9bff; --j-grimm: #f08a9a; --j-verner: #4fc6cf; --j-zipf: #ff8f5a; --j-ebbinghaus: #5ccb83;
  --j-on-app: #16181c;
  color-scheme: dark;
}
:root[data-app="hebb"] { --j-app: var(--j-hebb); }
:root[data-app="grimm"] { --j-app: var(--j-grimm); }
:root[data-app="verner"] { --j-app: var(--j-verner); }
:root[data-app="zipf"] { --j-app: var(--j-zipf); }
:root[data-app="ebbinghaus"] { --j-app: var(--j-ebbinghaus); }

/* Opt-in base: a page that adds class="j" to <body> gets the ground, the type and the focus ring. */
body.j {
  margin: 0;
  background: var(--j-bg);
  color: var(--j-ink);
  font: 400 var(--j-t-body)/1.5 var(--j-font);
  -webkit-text-size-adjust: 100%;
}
.j :focus-visible { outline: 3px solid var(--j-app); outline-offset: 2px; }
.j a { color: inherit; }

/* Buttons: a plain outlined one and the one primary action, filled with the app's ink. */
.j-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--j-s2);
  min-height: var(--j-target); padding: 0 var(--j-s4);
  font: inherit; font-weight: 700; font-size: var(--j-t-body); line-height: 1.1;
  color: var(--j-ink); background: transparent; border: var(--j-rule-w) solid var(--j-ink);
  border-radius: var(--j-radius); cursor: pointer; text-decoration: none;
}
.j-btn-primary { background: var(--j-app); border-color: var(--j-app); color: var(--j-on-app); }
.j-btn-danger { color: var(--j-danger); border-color: var(--j-danger); }
.j-btn:disabled { opacity: .45; cursor: not-allowed; }

/* A law's mark: <svg class="j-mark"><use href="marks.svg#ebbinghaus"/></svg>, coloured by --j-app
   or by data-law on the element itself. */
.j-mark { width: 72px; height: 44px; flex: none; color: var(--j-app); }
.j-mark[data-law="hebb"] { color: var(--j-hebb); }
.j-mark[data-law="grimm"] { color: var(--j-grimm); }
.j-mark[data-law="verner"] { color: var(--j-verner); }
.j-mark[data-law="zipf"] { color: var(--j-zipf); }
.j-mark[data-law="ebbinghaus"] { color: var(--j-ebbinghaus); }

@media (prefers-reduced-motion: reduce) {
  .j *, .j *::before, .j *::after { transition: none !important; animation: none !important; }
}