/**
 * Shop color scheme – edit here to change colours across the site.
 * text, background, primary, secondary, accent
 */
:root {
  /* Main palette */
  --color-text: #ffffff;
  --color-background: #191013;
  --color-primary: #e01710;
  --color-secondary: #fef1ae;
  --color-accent: #fedd58;
  --color-green: #3bff6c;

  /* Derived – borders (brighter, purple tint) */
  --color-border: rgba(180, 140, 220, 0.5);
  --color-border-solid: #5c0c24;
  --color-text-muted: rgba(255, 255, 255, 0.65);

  /* For rgba() in box-shadow (primary) */
  --color-primary-rgb: 224, 23, 16;
  --color-accent-rgb: 254, 221, 88;
  --color-green-rgb: 10, 221, 8;

  /* Card/container borders – change these two to update all cards/panels at once */
  --card-border-width: 2px;
  --card-border-radius: 2px;

  /* 3D button borders (accent buttons) */
  --color-accent-light: #fff4a8;
  --color-accent-dark: #b8960b;

  /**
   * Design baseline (stakeholder mockup vs your monitor):
   * If the layout only matched approval at ~75% browser zoom, set this to 0.75 so 100% zoom
   * matches that density. Raise toward 1 if text and controls feel too small.
   * Only affects lengths in rem/em (not raw px in stylesheets).
   */
  --design-baseline-rem: 0.75;
}

html {
  font-size: calc(100% * var(--design-baseline-rem));
}

.text-muted {
  color: var(--color-text-muted);
}