/* RecordEcho: the one look, shared by the marketing page and the app.

   The marketing page links this file. The app imports it (src/main.tsx).
   Change a colour, a typeface or a button here and both change together.

   The palette comes from the desk the product lives on: a scanner bed,
   paper, rubber-stamp ink and a highlighter. Each colour has one job:

     ink     something you can act on, what was stamped or signed, and
             (in the app) RecordEcho itself at work
     marker  "this is the same place", on the scan and in the text
     flag    a person has to look at this
     ok      a person has looked at this

   Two typefaces, and a rule for which goes where: Archivo is the
   interface, Literata is the record. */

@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("./fonts/literata.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("./fonts/literata-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --desk: #f3f5f5; /* the page */
  --bed: #d5dbdd; /* the scanner bed the sheets lie on */
  --paper: #fdfdfb; /* a sheet, a form, a panel */
  --carbon: #16181d; /* text */
  --graphite: #4a525c; /* quieter text */
  --rule: #c3cbce;
  --field: #8a949b; /* the edge of something to type in */
  --ink: #2e379a; /* stamp-pad indigo */
  --ink-strong: #232b7c;
  --on-ink: #ffffff;
  --marker: #ffe45c; /* highlighter */
  --wash: #fff6c4; /* highlighter, thinned: a note beside the text */
  --flag: #b3261e;
  --ok: #1b6b3a;
  --bar: #16181d; /* the strip that names a sheet */
  --on-bar: #e9edee;
  --bar-flag: #ffb4ab;

  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Literata", Georgia, "Times New Roman", serif;

  --gutter: clamp(20px, 4vw, 48px);
  --measure: 62ch;
  color-scheme: light;
}

/* Dark: the same desk with the lamp off. Only the app offers it (a page sets
   data-theme on <html>); the scan itself stays paper-white in any light.
   The values appear twice because plain CSS cannot share a block between a
   selector and a media query. Change both together. */
:root[data-theme="dark"] {
  --desk: #111317;
  --bed: #08090b;
  --paper: #1c1f25;
  --carbon: #eceff1;
  --graphite: #a4adb6;
  --rule: #353c45;
  --field: #5d6772;
  --ink: #aab2ff;
  --ink-strong: #c6cbff;
  --on-ink: #10133a;
  --marker: #6b5a00;
  --wash: #37300f;
  --flag: #ff9d94;
  --ok: #84d6a4;
  --bar: #2a2f38;
  --on-bar: #e9edee;
  --bar-flag: #ffb4ab;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --desk: #111317;
    --bed: #08090b;
    --paper: #1c1f25;
    --carbon: #eceff1;
    --graphite: #a4adb6;
    --rule: #353c45;
    --field: #5d6772;
    --ink: #aab2ff;
    --ink-strong: #c6cbff;
    --on-ink: #10133a;
    --marker: #6b5a00;
    --wash: #37300f;
    --flag: #ff9d94;
    --ok: #84d6a4;
    --bar: #2a2f38;
    --on-bar: #e9edee;
    --bar-flag: #ffb4ab;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* The name, with the two sheets beside it. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--carbon);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark svg {
  color: var(--ink);
  flex: none;
}

/* The one thing on a screen that is most worth pressing. */
.button {
  display: inline-block;
  padding: 0.78em 1.35em;
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  border-radius: 3px;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 650;
  font-stretch: 92%;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--ink-strong);
}

.button.small {
  padding: 0.6em 1em;
  font-size: 0.98rem;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The strip along the top of a sheet that says what the sheet is. */
.bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 7px 12px;
  background: var(--bar);
  color: var(--on-bar);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 550;
  font-stretch: 92%;
  line-height: 1.3;
}

.bar .flagged {
  color: var(--bar-flag);
}

/* A small label on something in the text. Red: a person has to look at it. */
.flag {
  display: inline-block;
  padding: 0 0.5em;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--flag);
  font-family: var(--display);
  font-size: 0.82em;
  font-style: normal;
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1.45;
  white-space: nowrap;
}