/* Light theme (default). Every colour in the app comes from these variables;
   a new theme only needs to redefine them under its own [data-theme] selector. */
:root,
[data-theme='light'] {
  color-scheme: light;

  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #fafbfa;
  --surface-3: #f1f4f2;
  --hover: #f5f7f5;

  --border: #e5eae7;
  --border-strong: #dfe6e1;
  --border-hover: #aebfb3;

  --text: #192923;
  --text-2: #4b5d50;
  --text-3: #6b7a71;
  --text-4: #9aa69f;

  --brand: #087957;
  --brand-hover: #076449;
  --brand-soft: #e8f5ee;
  --brand-softer: #f3faf6;
  --brand-border: #cfe7da;
  --on-brand: #ffffff;
  --focus: #65b79d;

  --success: #13855f;
  --success-soft: #eaf7ee;
  --warning: #9c711d;
  --warning-soft: #fbf5e6;
  --warning-border: #f0e6c7;
  --danger: #bc4545;
  --danger-soft: #fceeee;
  --danger-border: #ecd1d1;
  --info: #5c7dba;
  --info-soft: #eef3fc;

  --overlay: rgba(18, 37, 31, 0.36);
  --toast-bg: #183b2a;
  --toast-text: #ffffff;
  --shadow-sm: 0 2px 4px rgba(20, 41, 29, 0.03);
  --shadow-md: 0 1px 3px rgba(15, 36, 29, 0.12);
  --shadow-lg: 0 24px 80px rgba(15, 36, 29, 0.2);

  /* Emails are designed on white; previews stay white in every theme. */
  --preview-bg: #ffffff;
}