/* Markly design tokens. One source for every screen of the application and for the marking workspace when it is shown
   on the public website, so nothing is styled twice. Everything hangs off the .mkly class (on <html> in the application,
   on the demo's container on the website), which keeps these names from leaking into a page that embeds the workspace.

   DM Sans (SIL Open Font License 1.1, see fonts/DMSans-LICENCE.txt) is served from this application: no page loads
   anything from a third party. Paths are relative to this file so the folder can be copied as it is. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("fonts/DMSans-latin.woff2") format("woff2");
  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: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("fonts/DMSans-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; font-display: swap; src: url("fonts/DMSans-italic-latin.woff2") format("woff2");
  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; }

.mkly {
  /* type: 14 px for working text and controls, 12 to 13 for compact labels, 10 to 11 only for sparing metadata */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;
  --lh-tight: 1.25; --lh: 1.5; --lh-read: 1.7;

  /* surfaces: a warm off-white page, white cards and documents, one quieter surface for wells and hovers */
  --bg: hsl(60 10% 96%); --surface: #fff; --surface-2: hsl(60 6% 93%); --surface-3: hsl(60 6% 89%);
  /* text and borders */
  --ink: hsl(0 0% 5%); --ink-2: hsl(60 2% 24%); --muted: hsl(60 2% 41%); --faint: hsl(60 2% 45%);      /* faint is still 4.6 to 1 on white: it is used for text */
  --line: hsl(60 6% 88%); --line-2: hsl(60 5% 80%);
  /* selection and primary actions: green selects, dark buttons act */
  --green: #1a8a4a; --green-strong: #157a40; --green-ink: #12673a; --green-fill: hsl(146 45% 93%); --green-line: hsl(146 38% 76%);
  --primary: hsl(0 0% 9%); --primary-hover: hsl(0 0% 20%); --on-primary: #fff;
  --link: var(--green-ink);
  /* states. Kept for what they say: done, take care, wrong, for your information */
  --ok: #157a40; --ok-bg: hsl(146 45% 94%); --ok-line: hsl(146 38% 80%);
  --warn: hsl(32 88% 28%); --warn-bg: hsl(43 92% 93%); --warn-line: hsl(41 78% 76%);
  --bad: hsl(4 68% 41%); --bad-bg: hsl(6 82% 96%); --bad-line: hsl(6 66% 86%);
  --info: hsl(215 58% 40%); --info-bg: hsl(215 82% 96%); --info-line: hsl(215 60% 85%);
  /* annotation categories. Hue names the kind of point only: it never says reviewed or not, good or bad */
  --cat-content: hsl(215 62% 46%); --cat-content-fill: hsl(215 85% 95%);
  --cat-language: hsl(272 42% 50%); --cat-language-fill: hsl(272 65% 96%);
  --cat-strength: hsl(186 70% 28%); --cat-strength-fill: hsl(186 50% 93%);
  /* figures in charts: one quiet colour, so green keeps its meaning */
  --data: hsl(60 3% 27%); --data-soft: hsl(60 4% 76%); --data-track: hsl(60 6% 91%);

  /* spacing on a 4 px scale, shape, shadow */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px;
  --shadow-1: 0 1px 2px hsl(60 10% 10% / 0.06);
  --shadow-2: 0 4px 12px hsl(60 10% 10% / 0.08), 0 1px 2px hsl(60 10% 10% / 0.05);
  --shadow-3: 0 12px 32px hsl(60 10% 10% / 0.16), 0 2px 6px hsl(60 10% 10% / 0.06);
  --ctl: 32px; --ctl-sm: 26px; --ctl-touch: 44px;

  /* motion: one short entrance, quick emphasis, a slightly longer pane change */
  --t-fast: 150ms; --t-enter: 180ms; --t-select: 200ms; --t-pane: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* layout */
  --nav-rail: 64px; --nav-wide: 224px; --ws-gutter: 240px; --ws-chat: 320px; --page-max: 1320px;

  /* the names the first stylesheets used, kept so feature stylesheets keep working while they move to the tokens above */
  --card: var(--surface); --brand: var(--green); --brand-2: var(--primary); --tint: var(--green-fill);
}
@media (pointer: coarse) {
  .mkly { --ctl: 40px; --ctl-sm: 36px; }      /* fingers need more than a mouse does */
}
@media (max-width: 760px) {
  /* a phone: 16 px reading text, and every size above it moves up with it */
  .mkly { --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 17px; --fs-xl: 19px; --fs-2xl: 22px; --ctl: 44px; --ctl-sm: 38px; }
}