/* Theme authors override these properties after the default styles. */
:root {
  --bg: #f8f7f2;
  --fg: #222222;
  --accent: #2f7f5f;
  --card: #ffffff;
  --danger: #a12020;
  --danger-bg: #f8e7e7;
  --muted: #6d6d6d;
  --notice-bg: #e8f5ee;
  --notice-fg: #1f6b4e;
  --sf-font-family: "Avenir Next", "Segoe UI", sans-serif;
  --sf-page-background: linear-gradient(180deg, #f8f7f2 0%, #f0eee6 100%);
  --sf-content-width: 960px;
  --sf-content-gutter: 92vw;
  --sf-content-padding: 1.2rem;
  --sf-space: 1rem;
  --sf-radius-card: 10px;
  --sf-radius-control: 8px;
  --sf-control-border: #cccccc;
  --sf-shadow-card: 0 8px 16px rgba(0, 0, 0, 0.07);
  --sf-shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.05);
  --sf-card-image-height: 180px;
  --sf-price-compact: 1rem;
  --sf-price-normal: 1.2rem;
  --sf-price-large: 1.3rem;
  --sf-price-detail: 2rem;
  --sf-cms-surface: #f9f9f9;
  --sf-logo-background: linear-gradient(135deg, #2f7f5f 0%, #1f5a3f 100%);
}

html[data-site-theme="dark"] {
  --bg: #121714;
  --fg: #e6eee9;
  --accent: #70c99c;
  --card: #1c2420;
  --danger: #ff9b9b;
  --danger-bg: #3b2020;
  --muted: #a9b5ae;
  --notice-bg: #173328;
  --notice-fg: #9ee2bd;
  --sf-page-background: linear-gradient(180deg, #121714 0%, #0d120f 100%);
}