/* Sojourn's own look, and every theme's starting point. Every stylesheet in
   web/src/styles uses these custom properties and nothing else for colour,
   type, space, geometry and motion. A theme overrides them in its own
   tokens.css, which loads after this file. docs/spec/06-theming.md lists
   them; docs/spec/15-attention-and-together.md and 16-trail.md say what
   each colour means.

   The look (16.8): a cool, light ground with white surfaces raised on it;
   blue for the student and what to do next; teal for fellow travellers and
   what they left on the trail; Source Sans 3 (a humanist sans) for
   structure and Source Serif 4 for reading; soft corners and shadows. */
@font-face {
  font-family: "Source Sans 3"; src: url("fonts/SourceSans3.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4"; src: url("fonts/SourceSerif4.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
:root {
  /* Ground and ink. The paper is the page; a surface is raised on it (cards,
     the open step, panels). Every ink here reads at 4.5:1 or more on the
     paper, the surface and the wash. */
  --sj-paper: #f4f6fa;
  --sj-surface: #ffffff;
  --sj-ink: #101828;
  --sj-text: #1d2738;
  --sj-muted: #4a566a;
  --sj-faint: #5a6679;
  --sj-control: #7a8599;    /* the edge of a control with no words in it (a checkmark, a switch): 3:1 */
  --sj-track: #c6cdd9;      /* quiet edges: buttons with words, underlines */
  --sj-rule: #e0e5ee;
  --sj-wash: #ecf0f6;

  /* You: the student's own colour. Where you are, what to do next, primary
     buttons, the student's progress, links on hover, focus. */
  --sj-accent: #1f56d1;
  --sj-accent-deep: #1641a8;
  --sj-accent-ink: #ffffff;
  --sj-accent-wash: rgba(31, 86, 209, .09);

  /* Fellow travellers: what classmates did and left on the trail. Their
     progress, notes, the details they opened, their highlights. */
  --sj-class: #0b7268;
  --sj-class-ink: #ffffff;
  --sj-class-wash: rgba(11, 114, 104, .1);

  /* Course admins' review marks (12.2), apart from both of the above */
  --sj-review: #6b3fa0;

  /* Five colours for avatars and charts, in order */
  --sj-way-1: #1f56d1;      /* blue */
  --sj-way-2: #0b7268;      /* teal */
  --sj-way-3: #6a46c4;      /* violet */
  --sj-way-4: #08779b;      /* lake */
  --sj-way-5: #ac2f75;      /* heather */

  /* Evidence tones, always said in words as well */
  --sj-ok: #17783b;      --sj-ok-wash: rgba(23, 120, 59, .1);
  --sj-warn: #8a5800;    --sj-warn-wash: rgba(170, 120, 10, .12);
  --sj-fail: #b42318;    --sj-fail-wash: rgba(180, 35, 24, .08);

  /* Signals */
  --sj-unclear: #935a00;                     /* "unclear" marks and the unclear heat ramp */
  --sj-question: #1f56d1;
  --sj-hl: rgba(255, 222, 89, .5);           /* the student's own highlight: a highlighter's yellow */
  --sj-hl-class: rgba(11, 114, 104, .14);    /* the class's highlights, at full heat */
  --sj-heat: 11, 114, 104;                   /* r, g, b of the heat ramp: rgba(var(--sj-heat), a) */
  --sj-heat-unclear: 147, 90, 0;

  /* Type */
  --sj-font-ui: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sj-font-reading: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sj-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sj-size: 16.5px;
  --sj-line: 1.55;
  --sj-weight-strong: 600;
  --sj-weight-ui: 600;       /* statements, primary buttons, the current thing */
  --sj-caps-tracking: .04em; /* abbreviations in small capitals (.sj-caps) */
  --sj-h1: 2.3rem;  --sj-h2: 1.6rem;  --sj-h3: 1.22rem;  --sj-small: .9rem;

  /* Space: an 8px lattice, 4px for hairlines */
  --sj-s1: 4px; --sj-s2: 8px; --sj-s3: 12px; --sj-s4: 16px; --sj-s5: 24px;
  --sj-s6: 32px; --sj-s7: 48px; --sj-s8: 64px; --sj-s9: 96px;

  /* Geometry */
  --sj-page: 1280px;
  --sj-measure: 42rem;      /* the reading column */
  --sj-map: 15rem;
  --sj-rail: 20rem;
  --sj-gutter: 2.5rem;
  --sj-radius: 8px;         /* small parts: code, inputs, marks */
  --sj-ui-radius: 12px;     /* buttons and controls */
  --sj-radius-lg: 20px;     /* cards, panels, the open step */
  --sj-pill: 999px;         /* chips, reactions, counts */
  --sj-shadow: 0 1px 2px rgba(16, 32, 72, .06), 0 8px 24px rgba(16, 32, 72, .07);
  --sj-shadow-raised: 0 1px 2px rgba(16, 32, 72, .05), 0 14px 36px -12px rgba(16, 32, 72, .2);
  --sj-shadow-float: 0 2px 6px rgba(16, 32, 72, .08), 0 28px 72px -16px rgba(16, 32, 72, .32);
  --sj-scrim: rgba(16, 24, 40, .48);
  --sj-dark: #141b2a;       /* the zoom view's ground */
  --sj-dark-text: #d3d9e4;

  /* Motion: never on a timer, always steppable, cut with reduced motion */
  --sj-ease: cubic-bezier(.3, .7, .2, 1);
  --sj-dur: .22s;
  --sj-dur-cam: .55s;
}