/*
 * Store colours: warm ivory and stone, warm black for text and buttons, and a
 * bronze accent. main.css uses only these variables, so this file is all you
 * need to change to recolour the store. Every text colour here meets WCAG AA
 * contrast on the backgrounds it is used on.
 */

:root {
  color-scheme: light;

  --color-primary: #1d1b18;
  --color-primary-hover: #3b3631;
  --color-on-primary: #faf8f5;
  --color-link: #1d1b18;
  --color-accent: #7f613f;

  --color-text: #1d1b18;
  --color-muted: #6b645c;
  --color-bg: #faf8f5;
  --color-surface: #f3eee7;
  --color-stone: #ebe4da;
  --color-border: #e2dad0;
  --color-inverse-bg: #1d1b18;
  --color-inverse-text: #e9e3da;
  --color-inverse-muted: #a89f94;

  --color-success: #2f6b47;
  --color-success-bg: #e3efe6;
  --color-error: #9f2a1f;
  --color-error-bg: #f7e4e0;
  --color-warning: #8a5a14;
  --color-warning-bg: #f6ecd9;
}

/*
 * Dark palette. The media query decides when it applies:
 *   (prefers-color-scheme: dark)  follows each visitor's device setting
 *   all                           always
 *   not all                       never
 */
@media not all {
  :root {
    color-scheme: dark;

    --color-primary: #e9e3da;
    --color-primary-hover: #ffffff;
    --color-on-primary: #1d1b18;
    --color-link: #e9e3da;
    --color-accent: #c9a97f;

    --color-text: #e9e3da;
    --color-muted: #a89f94;
    --color-bg: #151412;
    --color-surface: #211f1c;
    --color-stone: #2a2724;
    --color-border: #3a3632;
    --color-success: #8fcfa6;
    --color-success-bg: #1d3a28;
    --color-error: #f0a597;
    --color-error-bg: #4a1f19;
    --color-warning: #e7c07a;
    --color-warning-bg: #45320f;
  }
}