/* Radix Colors 3.0.0 — Sand + Gold (sRGB).
   Source: github.com/radix-ui/colors, commit dbdb85470547c7d34b9001f48fddb08ded335979.
   MIT license: /licenses/radix-colors.txt. Usage: ../../../COLOR_PALETTE.md. */
:root {
  --sand-1: #fdfdfc;
  --sand-2: #f9f9f8;
  --sand-3: #f1f0ef;
  --sand-4: #e9e8e6;
  --sand-5: #e2e1de;
  --sand-6: #dad9d6;
  --sand-7: #cfceca;
  --sand-8: #bcbbb5;
  --sand-9: #8d8d86;
  --sand-10: #82827c;
  --sand-11: #63635e;
  --sand-12: #21201c;

  --sand-dark-1: #111110;
  --sand-dark-2: #191918;
  --sand-dark-3: #222221;
  --sand-dark-4: #2a2a28;
  --sand-dark-5: #31312e;
  --sand-dark-6: #3b3a37;
  --sand-dark-7: #494844;
  --sand-dark-8: #62605b;
  --sand-dark-9: #6f6d66;
  --sand-dark-10: #7c7b74;
  --sand-dark-11: #b5b3ad;
  --sand-dark-12: #eeeeec;

  --gold-1: #fdfdfc;
  --gold-2: #faf9f2;
  --gold-3: #f2f0e7;
  --gold-4: #eae6db;
  --gold-5: #e1dccf;
  --gold-6: #d8d0bf;
  --gold-7: #cbc0aa;
  --gold-8: #b9a88d;
  --gold-9: #978365;
  --gold-10: #8c7a5e;
  --gold-11: #71624b;
  --gold-12: #3b352b;

  --gold-dark-1: #121211;
  --gold-dark-2: #1b1a17;
  --gold-dark-3: #24231f;
  --gold-dark-4: #2d2b26;
  --gold-dark-5: #38352e;
  --gold-dark-6: #444039;
  --gold-dark-7: #544f46;
  --gold-dark-8: #696256;
  --gold-dark-9: #978365;
  --gold-dark-10: #a39073;
  --gold-dark-11: #cbb99f;
  --gold-dark-12: #e8e2d9;

  /* Reserved for feedback, never decorative section colors. */
  --error-bg: #feebec; /* Radix Red 3 */
  --error-border: #fdbdbe; /* Red 6 */
  --error-text: #ce2c31; /* Red 11 */
  --error-text-strong: #641723; /* Red 12 */
  --success-bg: #e6f6eb; /* Green 3 */
  --success-border: #adddc0; /* Green 6 */
  --success-text: #193b2d; /* Green 12 */
  --white: #fff; /* QR quiet zone and neutral utility */

  /* Shared roles. Light surfaces remain light even inside a dark section. */
  --bg-light: var(--sand-1);
  --bg-light-2: var(--sand-2);
  --bg-configurator: var(--sand-3);
  --bg-dark: var(--sand-dark-1);
  --bg-dark-2: var(--sand-dark-2);
  --surface-light: var(--sand-1);
  --surface-light-strong: var(--sand-2);
  --surface-light-hover: var(--sand-3);
  --surface-dark: var(--sand-dark-3);
  --surface-dark-strong: var(--sand-dark-4);
  --text-dark: var(--sand-12);
  --text-dark-soft: var(--sand-11);
  --text-light: var(--sand-dark-12);
  --text-light-soft: var(--sand-dark-11);
  --line-light: var(--sand-6);
  --line-dark: var(--sand-dark-6);
  --border-control: var(--sand-7);
  --border-control-hover: var(--sand-8);
  --border-control-dark: var(--sand-dark-7);
  --border-control-dark-hover: var(--sand-dark-8);

  --accent: var(--gold-9);
  --accent-soft: var(--gold-dark-11);
  --accent-text: var(--gold-11);
  --accent-text-strong: var(--gold-12);
  --accent-surface: var(--gold-3);
  --accent-surface-hover: var(--gold-4);
  --accent-selected: var(--gold-5);
  --accent-selected-dark: var(--gold-dark-5);
  --accent-border: var(--gold-7);
  --focus-ring: var(--gold-9);
  --focus-halo: var(--gold-6);
  --button-bg: var(--sand-12);
  --button-hover: var(--sand-dark-6);

  --overlay: rgb(17 17 16 / 80%);
  --image-label-bg: rgb(17 17 16 / 85%);
  --shadow-light: 0 6px 20px rgb(17 17 16 / 4%);
  --shadow-dark: 0 18px 42px rgb(17 17 16 / 18%);
  --shadow-floating: 0 4px 16px rgb(17 17 16 / 16%);
  --shadow-dialog: 0 24px 72px rgb(17 17 16 / 28%);
}