/**
 * LAYER 0 — the brand. The only file this product edits.
 *
 * LOTUSION.COM. Teal is read off the mark; #cecece is the second house colour
 * and anchors the neutral ramp at step 300. Amber is the third — the one warm
 * value in the system, so it can only ever mean "this is the thing to look at".
 *
 * Ramps are generated in OKLCH at a fixed hue so the steps are perceptually
 * even. The four values below the ramps are searched against the WORSE of the
 * two backgrounds in their theme; rounding them onto a ramp step is how the
 * contrast requirement gets quietly lost.
 *
 *     python3 tools/gen-brand.py > design/brand.css
 *     node tools/contrast.mjs --prefix lx design/brand.css design/tokens.css
 */
:root {
  /* Brand — teal. 700 is the mark. */
  --lx-brand-50: #dcffff;
  --lx-brand-100: #bef7fc;
  --lx-brand-200: #9ce4eb;
  --lx-brand-300: #81c9cf;
  --lx-brand-400: #62a9af;
  --lx-brand-500: #398187;
  --lx-brand-600: #216c72;
  --lx-brand-700: #00595f;
  --lx-brand-800: #00484e;
  --lx-brand-900: #003539;
  --lx-brand-950: #001c1e;

  /* Accent — amber. One use per screen. */
  --lx-accent-50: #ffedcf;
  --lx-accent-100: #ffddac;
  --lx-accent-200: #ffc789;
  --lx-accent-300: #eaae71;
  --lx-accent-400: #d1975a;
  --lx-accent-500: #ba8144;
  --lx-accent-600: #9d6627;
  --lx-accent-700: #8b5510;
  --lx-accent-800: #744000;
  --lx-accent-900: #573000;

  /* Neutral — tinted with the brand hue, never pure grey. 300 is #cecece. */
  --lx-neutral-0: #ffffff;
  --lx-neutral-50: #f5f9fa;
  --lx-neutral-100: #ecf1f1;
  --lx-neutral-200: #dadfdf;
  --lx-neutral-300: #cecece;
  --lx-neutral-400: #a4a9a9;
  --lx-neutral-500: #868a8a;
  --lx-neutral-600: #6b6f70;
  --lx-neutral-700: #525656;
  --lx-neutral-800: #3b3f3f;
  --lx-neutral-900: #282c2c;
  --lx-neutral-925: #1d2020;
  --lx-neutral-950: #141717;

  /* Four values that are not ramp steps. */
  --lx-faint-light: #6f7374; /* 4.52 min across bg and surface */
  --lx-faint-dark: #8e9393; /*  4.54 min */
  --lx-boundary-light: #8d9192; /* 3.00 min */
  --lx-boundary-dark: #717575; /*  3.03 min */

  /* Status — never the brand ramps. A teal "success" beside teal chrome is
     unreadable, and a money message must not be ambiguous. */
  --lx-green-100: #dcf3e8;
  --lx-green-300: #6fd0ac;
  --lx-green-600: #0d7a5f;
  --lx-amber-100: #fdf0d5;
  --lx-amber-300: #f0c25a;
  --lx-amber-600: #8a5a00;
  --lx-red-100: #fde8e8;
  --lx-red-300: #f08a8f;
  --lx-red-600: #b4232a;

  /* Veil and shade. Dark mode uses black; there is nothing below it. */
  --lx-veil-light: #ffffff;
  --lx-veil-dark: #1d2020;
  --lx-shade-light: #001c1e;
  --lx-shade-dark: #000000;

  /* Flat equivalents of the translucent values, for browsers without
     color-mix(). tokens.css declares each glass and shadow twice; this is the
     half the old browser keeps. */
  --lx-veil-a60: #ffffff99;
  --lx-veil-a72: #ffffffb8;
  --lx-veil-a86: #ffffffdb;
  --lx-shade-a6: #001c1e0f;
  --lx-shade-a8: #001c1e14;
  --lx-shade-a10: #001c1e1a;
  --lx-shade-a12: #001c1e1f;
  --lx-shade-a16: #001c1e29;
  --lx-brand-700-a30: #00595f4c;
}