/**
 * One palette, for every page Acta serves.
 *
 * The app, the admin console and the sign-in pages each carried their own
 * colours, so signing in looked like a different product from the one you
 * then landed in - a blue-violet accent against the app's pink, and a
 * different grey for every surface. Nobody chose that; it is what happens
 * when a page is written on its own.
 *
 * The names under "aliases" exist because the auth pages were written against
 * them. Keeping them as aliases means those pages did not have to be rewritten
 * rule by rule to join the system - and a new page should use the canonical
 * names above.
 */
/**
 * The two faces the sign-in pages are set in.
 *
 * SELF-HOSTED, because the CSP says `font-src 'self'` and `style-src 'self'`.
 * A <link> to fonts.googleapis.com is blocked outright, and loosening the
 * policy so a marketing typeface can load is the wrong trade on the one page
 * that handles a credential. Both are variable fonts, one file each, ~25KB.
 */
@font-face {
  font-family: "Sora";
  src: url("/fonts/sora-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f3f3f7;
  --surface: #fff;
  --surface-2: #eaeaf1;
  --surface-3: #e1e1eb;
  --text: #17161f;
  --text-2: #413f4e;
  --muted: #6e6b7e;

  /**
   * How much of the viewport the on-screen keyboard is covering, in px.
   *
   * Not a colour, and it lives here anyway: a page that defines its own tokens
   * is how `--rule-2` and `--signal-line` were once referenced and never
   * declared, which drops the declaration silently and makes a border
   * disappear. One place, checked by a test, no exceptions for the ones that
   * feel different.
   *
   * Written by trackKeyboard() in app.js, because only JS can measure it -
   * visualViewport shrinks when the keyboard opens and the layout viewport
   * does not. Zero everywhere that API is missing, which is the same set of
   * browsers that do not need it.
   */
  --kb: 0px;

  /**
   * The height of the phone's tab bar.
   *
   * A token because three separate rules have to agree about it: the list pads
   * its bottom by this much, a panel stops this far short of the bottom, and
   * the bar itself is this tall. They were a hand-copied 58px in one place and
   * nothing in the others, which is how the mentions panel ended up covering
   * the bar that opens and closes it.
   */
  --tabbar: 58px;
  --rule: #dcdbe6;
  /**
   * Graphite: an accent that recedes.
   *
   * The pink carried every meaning at once - identity, selection, unread, send
   * and, until this morning, links. This palette does the opposite: the accent
   * is a cool grey that marks WHERE YOU ARE, and colour is spent only where it
   * means something - blue for a link, green for done, red for danger. The
   * brand's own colour still exists; it lives in the mark, which is the one
   * place it is not competing with content.
   */
  --signal: #3c4663;
  /**
   * A link is blue, and the brand is not.
   *
   * --signal is the pink: the send button, the selected channel, a mention, an
   * unread count. Links were drawn with it too, which overloads the one colour
   * that is supposed to mean "this is Acta, and this is where to look". Blue
   * for a link is about as settled as a convention gets, and it also means a
   * link no longer competes with every other pink thing on the screen.
   */
  --link: #1557c0;

  /**
   * EIGHT TINTS, for the things there is no semantic colour for.
   *
   * A person is not a status. There is no "correct" colour for Priya, so the
   * app drew every avatar in the same grey and every topic chip in the same
   * outline, and a channel of forty messages was a column of identical
   * squares. Colour assigned from a hash of the id does a real job: you find
   * your own messages, and the three people in a thread, before reading a
   * single name.
   *
   * Pastels with dark ink, in BOTH themes, which is why there is no dark
   * override below. A tint is not a surface - it never has body text on it,
   * only two initials or one word - so it can be as saturated as it likes as
   * long as the ink on it clears AA. The worst of the eight is violet at
   * 8.26:1, and each one clears 8.8:1 against the dark conversation behind
   * it, so the shape reads as well as the label does.
   *
   * Stable, not random: the same person is the same colour on every machine
   * and after every reload, because the hash is of the id and nothing else.
   */
  --tint-ink: #1c1a24;
  --tint-0: #f6a6b2;
  --tint-1: #f2c572;
  --tint-2: #8ed8de;
  --tint-3: #c0a8f0;
  --tint-4: #9bc2f5;
  --tint-5: #9bd9a6;
  --tint-6: #f7b08a;
  --tint-7: #eda7d8;

  /**
   * The marketing identity, used on the sign-in pages only.
   *
   * The app is graphite on purpose - the accent means "where you are" and
   * colour is spent on meaning. The marketing site is louder, and these pages
   * sit between the two: its layout and type, the app's chrome, and one
   * gradient kept for the single button that commits something.
   *
   * ORANGE TO VIOLET, NOT CRIMSON. The mark has carried orange, magenta, teal
   * and violet since the first draft, and the crimson was a fifth colour that
   * appeared nowhere in it - which is why the button never looked like it
   * belonged to the logo above it. These two stops are the mark's own warm and
   * cool ends.
   *
   * Both stops are chosen so WHITE SURVIVES THE WHOLE RAMP, not just the two
   * ends. Orange is the dangerous half: #ea580c, the obvious bright orange,
   * is 3.56:1 with white and fails AA on the one button people sign in with.
   * #c2410c is 5.18:1, and contrast rises monotonically from there to the
   * violet end, so that worst point is the whole gradient's floor.
   */
  --brand-from: #c2410c;
  --brand-to: #7c3aed;
  --brand-grad: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  /*
   * The flat value: focus rings, borders, soft tints, and what a gradient
   * falls back to. The violet end, because at 2px wide the cool half is the
   * one that reads as an identity rather than as a warning.
   */
  --brand: #7c3aed;
  --on-brand: #ffffff;
  /* The brand used as TEXT rather than as a button, which needs a different
     value on a dark page - see the dark block. */
  --brand-text: #6d28d9;
  --font-display: "Sora", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  /*
   * Paper, the third colour. The auth pages only - the app's own light
   * surfaces stay cool, because changing those restyles everything.
   *
   * It was a warm cream (#fbf9f5) chosen to sit under crimson. Under violet
   * that cream reads as a stain, so the paper carries the faintest violet
   * instead and the card stays pure white: white is what the gradient is
   * drawn ON, and it is why two loud colours can be this loud.
   */
  --auth-paper: #f9f7fc;
  --auth-card: #ffffff;
  --auth-ink: #1d1e2b;
  --auth-dim: #606272;
  --auth-line: #e7e3f0;
  --signal-soft: #e7e9f1;
  /**
   * What goes ON TOP of the accent, which was `#fff` written out in five rules.
   *
   * That held only because the pink was mid-tone in both themes. Graphite is
   * dark in light mode and LIGHT in dark mode, so white on it would be white
   * on #a8b0cc - about 1.9:1, which is unreadable. The accent and the thing
   * written on it have to be declared as a pair.
   */
  --on-signal: #ffffff;
  --ok: #26713a;
  /**
   * The background behind a green "this already happened" marker.
   *
   * Chosen against the surface it sits on, not against white. The first pick
   * was 0.0031 of relative luminance from the pill it lives in, which means a
   * green background nobody could see - the marker would have been carried
   * entirely by the icon's colour, which is the thing it was added to reinforce.
   */
  --ok-soft: #c6e9d1;
  --warn: #9a5b00;
  /**
   * A real red, and not the brand colour.
   *
   * This was #b32455 - byte-identical to --signal - so Delete and Sign out
   * looked exactly like Send. Worse, nothing referenced --danger at all: the
   * two rules that mean danger said var(--signal), and that was invisible only
   * because the two resolved to the same thing. Graphite would have turned
   * every destructive action grey.
   */
  --danger: #b0241c;
  /*
   * Two names the app already referenced and nobody had ever defined, so
   * `border-left: 3px solid var(--rule-2)` resolved to nothing and the border
   * silently disappeared. Found by listing every var() against the tokens.
   */
  --rule-2: #c9c7d6;
  --signal-line: #b6bccf;
  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- aliases, for pages written before the system existed ---- */
  --bg: var(--paper);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --line: var(--rule);
  --ink: var(--text);
  --dim: var(--muted);
  --accent: var(--signal);
}

@media (prefers-color-scheme: dark) {
  :root {
    /**
     * Deeper, and the purple taken out of it.
     *
     * These were #1a1922 / #24222e / #2e2c3b: a stack lifted to match Slack's
     * sidebar brightness, with a violet cast left in it from the pink era.
     * Against the design mockup two things were wrong. The whole stack sat
     * about twice as bright as intended, so a dark theme read as grey rather
     * than as dark; and the hue was aubergine, which is Slack's brand colour
     * sitting in a surface slot. Ours lives in the mark.
     *
     * The ORDER is unchanged and is the part that matters: --paper (the
     * far-left rail, and the page) sits behind --surface (the conversation),
     * which sits behind --surface-2 (the channel panel and every raised
     * control). That stacking is what gives each panel an edge without a
     * border being drawn, and it is what the surfaces test asserts.
     *
     * Separations are measured, not eyeballed. At this brightness the eye
     * reads differences in relative luminance, not in hex: --surface-2 is
     * 0.0066 above --surface, which is the gap that makes the sidebar a panel
     * rather than a shade. The first attempt was 0.0041 and vanished.
     */
    --paper: #110f15;
    --surface: #15131a;
    --surface-2: #1f1d27;
    --surface-3: #2a2733;
    --text: #ececf1;
    --text-2: #c2c0cb;
    --muted: #918f9e;
    --rule: #272430;
    --signal: #a8b0cc;
    /* Lifted for the dark surface - #1557c0 on #191823 is unreadable. */
    --link: #7cb0ff;
    /*
     * THE SAME GRADIENT IN BOTH THEMES, with white on it.
     *
     * --brand, --brand-from and --brand-to are deliberately absent here: the
     * button is a BACKGROUND, so what has to stay readable is the white on
     * it, and that does not change with the page behind it. Lifting the
     * gradient for the dark theme would only make the white on it worse - the
     * mistake this file made once already, when the dark brand was a lifted
     * pink that passed every check and looked like candy.
     *
     * --brand-text is the lifted one, for the places the brand really is
     * text. #6d28d9 on a dark page is 2.4:1 and unreadable.
     */
    --brand-text: #c3a6ff;
    --auth-paper: #15131a;
    --auth-card: #1f1d27;
    --auth-ink: #ececf1;
    --auth-dim: #918f9e;
    --auth-line: #2f2c3a;
    --signal-soft: #2b2f42;
    /* Dark ink, because the accent is the light one in this theme. */
    --on-signal: #15131a;
    --ok: #5fcb7f;
    --ok-soft: #1c4529;
    --warn: #e0a340;
    --danger: #f1867c;
    --rule-2: #2f2c3a;
    --signal-line: #434a66;
  }
}

/**
 * The `hidden` attribute has to win.
 *
 * It works through the browser's own `[hidden] { display: none }`, which any
 * class selector outranks - `.names { display: flex }` did exactly that, so
 * fields the markup called hidden stayed on screen. It looked like a caching
 * problem for most of an afternoon and was not one.
 */
[hidden] { display: none !important; }