/* Design tokens. This file is their home; docs/design.md (Tokens) says how
   they're named and points here. Jost's own @font-face is inline in
   views/layouts/base.njk, because its URL needs asset()'s content hash. */

/* Arial stretched to Jost's width and line box, so the swap doesn't move the
   layout (docs/design.md, Type). Numbers measured from Jost 3.710 against
   Arial's metrics (Liberation Sans) on September 29. */
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 95.69%;
  ascent-override: 111.81%;
  descent-override: 39.19%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* Fills: identical in both modes. */
  --red-fill: #CC231F;
  /* List colors, in LIST_COLORS order; also avatar grounds. */
  --blue-fill: #2881F3;
  --red-violet-fill: #59256A;
  --green-fill: #44B40E;
  --cossack-green-fill: #437742;
  --orange-fill: #EB4400;
  --yellow-fill: #FFDD00;
  --yellow-orange-fill: #F99D1B;
  /* Interface color blocks, not list colors. */
  --dark-blue-fill: #23358C;
  --dark-green-fill: #50730B;
  --gray-fill: #5E6158;
  --pattern-gray: #5E6158;
  --pattern-gray-2: #101410; /* the gray chord's 30: dark gray here, the secondary text's gray in dark mode */

  /* Text on a fill: identical in both modes. */
  --on-fill: #101410;         /* on blue, green, orange, yellow, yellow orange */
  --on-strong-fill: #FFFFFF;  /* on red, red violet, cossack green, dark blue, dark green, gray */

  /* Roles, light mode. */
  --ink: #101410;
  --ink-2: #5E6158;
  --surface: #FFFFFF;
  --surface-2: #F2EEE3;
  --surface-3: #FFFFFF;       /* sheets and menus; set off by --rule in light mode */
  --rule: #101410;            /* hairlines */
  --border: #101410;          /* form controls; 3:1 or better on every surface */
  --red-ink: #CC231F;
  --blue-ink: #23358C;        /* links: dark blue in light mode, lifted blue in dark */
  --green-ink: #50730B;
  --orange-ink: #EB4400;      /* an accent only, never text (Ty, October 6) */

  --tile: 44px;
  --space-3xs: 3px;
  --edge: 4px;
  --space-2xs: 7px;
  --space-xs: 10px;
  --space-s: 17px;
  --space-m: 27px;
  --space-l: 44px;
  --space-xl: 71px;
  --space-2xl: 115px;
  --font: "Jost", "Jost Fallback", sans-serif;
  /* The sizes most of the app is read at (docs/design.md, Type): reading
     text, and labels and other secondary text. In rem, so a browser
     set to larger text is honored: 20 and 18 pixels until someone does. */
  --text-reading: 1.25rem;
  --text-secondary: 1.125rem;
  /* And tertiary text: hints, the lines a field's check says, banners, the
     terms line, the footer and the mail switches' descriptions, at weight
     300 (Ty, October 21, 497 a and 498 a: "this is better. 16px (1rem), 300
     font-weight."). 16 pixels until someone sets larger text. */
  --text-tertiary: 1rem;

  --dur-press: 100ms;
  --dur-move: 250ms;
  --dur-turn: 400ms;
  --stagger: 40ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-turn: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* The band's breath (docs/design.md, Motion; services/band.js writes its
     keyframes from these, and holds how far a tile grows): a tile gathers,
     some deeper, breathes out,
     quickening, and after a beat the next breathes in, slowing as it settles;
     each tile at its own moment within the spread. Then the arrival, the
     first breath, on the page a sign-in opens: the icon's cells a beat
     apart, the name's letters from the fourth beat. */
  --dur-gather: 320ms;
  --dur-gather-deep: 480ms;
  --dur-exhale: 225ms;
  --dur-breath-beat: 75ms;
  --dur-inhale: 600ms;
  --dur-breath-spread: 2.7s;
  --ease-inhale: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-exhale: cubic-bezier(0.55, 0, 1, 0.45);
  --dur-arrival-beat: 80ms;
  --dur-letter: 500ms;
  --dur-letter-beat: 60ms;

  /* Depth (docs/design.md, Sheets): the backdrop behind a sheet or dialog that
     blocks the page, and the one soft shadow everything that floats casts,
     offset away from where it's anchored. Light mode only; dark mode's raised
     surface does that job. */
  --backdrop: color-mix(in srgb, #101410 34%, transparent);
  --shadow-color: color-mix(in srgb, #101410 21%, transparent);
  --shadow-down: 0 7px 27px var(--shadow-color);
  --shadow-up: 0 -7px 27px var(--shadow-color);
  --shadow-left: -7px 0 27px var(--shadow-color);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-turn: 0ms;
    --stagger: 0ms;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2EEE3;
    --ink-2: #ACABA3;
    --surface: #151410;
    --surface-2: #1F1E1A;
    --surface-3: #2B2A25;
    --rule: #41403A;
    --border: #7A7970;
    --red-ink: #FF594C;
    --blue-ink: #3A91FF;
    --green-ink: #44B40E;
    --orange-ink: #FF5A26;
    --pattern-gray-2: #ACABA3; /* calmer than the heading's light gray, so the heading leads (Ty, October 27, 694 a) */
    --shadow-down: none;
    --shadow-up: none;
    --shadow-left: none;
  }
}