/* The house brand: what a page wears when no organisation owns it. The
 * personal app at the root, the public pages of a personal account, and
 * a link to something that was never created or whose organisation has
 * gone.
 *
 * Built around the logo rather than beside it. The surfaces are the
 * mark's own cream (``#fff8e9``) opened up into a page: warm, not the
 * cool grey a default palette gives you, so the red square in the
 * corner reads as part of the page instead of pasted onto it. Text is a
 * warm near-black for the same reason.
 *
 * The accent is petrol, a near-complement of the logo's red. It has to
 * be a different colour from the mark, because it is on every button
 * and link and a page of red buttons under a red logo is a page with no
 * hierarchy left. Complementary rather than merely different, so the
 * two read as chosen together. It is also nothing like the red an
 * organisation in ``brands/`` uses, and nothing like the blue most
 * display advertising uses, which matters on the only pages that carry
 * any.
 *
 * Contrast, all above the AAA threshold for body text:
 *
 *   white on accent   9.5:1
 *   accent on bg      8.8:1
 *   text on bg       15.1:1
 *   muted on bg       5.5:1
 *   the logo's red on bg 5.2:1
 *
 * Same token set as any tenant, so nothing in the app has to know it is
 * a fallback, and the folder carries its own logo, icons and strapline
 * like any other brand. What it must never carry is an organisation's
 * mark, which is a different thing from carrying none. */

:root {
  --brand-red: #0f4c5c;
  --brand-red-hover: #0d4351;
  --brand-bg: #faf6ec;
  --brand-surface: #fffdf7;
  --brand-text: #241f1c;
  --brand-text-muted: #6b6259;
  --brand-border: #e8dfd0;

  --brand-green: #1f6b43;
  --brand-amber: #8a6915;
  --brand-neutral: #dcd8cf;
  --brand-blue: #2a6f97;

  --brand-red-soft: #e2eaeb;
  --brand-red-soft-border: #c5d4d8;
  --brand-red-soft-hover: #c5d4d8;
  --brand-red-soft-active: #95b0b7;
  --brand-red-strong: #092c35;

  --brand-notice-bg: #f5f1e4;
  --brand-notice-border: #e4dcc8;

  --brand-green-soft: #e7f1ea;
  --brand-green-soft-border: #cfe2d6;
  --brand-red-wash: #eef3f3;
  --brand-amber-soft: #f7f2e6;
  --brand-amber-soft-border: #e6dcc4;
  --brand-amber-strong: #6b5310;
  --brand-amber-wash: #f5f0e3;
  --brand-amber-text: #6b5310;
  --brand-recovered-bg: #f5f1e4;
  --brand-recovered-border: #ded7c4;
  --brand-recovered-text: #4a463c;
  --brand-rank-silver: #8a8f98;
  --brand-rank-bronze: #b8763a;
  --brand-chat-bubble: #e2eaeb;
  --brand-chat-text: #241f1c;

  --brand-primary-50: #f1f4f5;
  --brand-primary-100: #e2eaeb;
  --brand-primary-200: #c5d4d8;
  --brand-primary-300: #95b0b7;
  --brand-primary-400: #57828d;
  --brand-primary-500: #0f4c5c;
  --brand-primary-600: #0d4351;
  --brand-primary-700: #0b3844;
  --brand-primary-800: #092c35;
  --brand-primary-900: #062027;
  --brand-primary-950: #041418;

  --brand-surface-0: #fffdf7;
  --brand-surface-50: #faf6ec;
  --brand-surface-100: #ebe7dd;
  --brand-surface-200: #dcd8cf;
  --brand-surface-300: #c2beb6;
  --brand-surface-400: #a09c95;
  --brand-surface-500: #7e7973;
  --brand-surface-600: #605b56;
  --brand-surface-700: #48443f;
  --brand-surface-800: #332e2b;
  --brand-surface-900: #241f1c;
  --brand-surface-950: #14110f;
}