/* The Lab's palette, transcribed from the app's `src/styles/classes.ts` and the
   Tailwind neutral/blue scale its components use, so the Lab and the phone read
   as one product. The Tailwind name is spelled out wherever the value is not
   obvious.

   It is a file rather than a block inside `index.html` because three pages need
   it now: the Lab itself, the login and the administration page. One of them
   holding the original and the others copying it is how a product ends up with
   two blues. */
:root {
    color-scheme: dark;
    --bg: #171717; /* neutral-900 - app root */
    --surface: #0a0a0a; /* neutral-950 - header, working surfaces */
    --card: #171717; /* neutral-900 - cards, segmented controls */
    --line: #262626; /* neutral-800 - every border */
    --line-soft: #404040; /* neutral-700 - raised borders, slider track */
    --ink: #ffffff;
    --ink-2: #d4d4d4; /* neutral-300 */
    --dim: #a3a3a3; /* neutral-400 */
    --dim-2: #737373; /* neutral-500 */
    --accent: #2563eb; /* blue-600 - active segment, primary action */
    --accent-line: #3b82f6; /* blue-500 */
    --accent-text: #60a5fa; /* blue-400 */
    --amber: #f59e0b; /* amber-500 - flat-light advisory */
    --danger: #ef4444; /* red-500 - mask sensitivity, heatmap toggle */
    --next-step: #fafafa; /* neutral-50 - the frame round the next step, apart from every blue */
}