/* ============================================================================
   Design tokens — single source of truth for the storefront.
   Classic, minimal palette: charcoal, warm grays, one muted accent.
   Every variable name is unchanged; only the values were refined.
   ========================================================================== */
:root {
  /* Brand */
  --primary: #1c1c1c;
  --primary-dark: #000000;
  --primary-soft: #f0f0ed;
  --secondary: #6b6b6b;
  --secondary-dark: #4f4f4f;
  --accent: #7a5c2e;
  --accent-soft: #f6f1e9;

  /* Status */
  --discount: #a8322d;
  --discount-soft: #fbefee;
  --success: #2f6b43;
  --success-soft: #eef5f0;
  --warning: #b7791f;
  --star: #c9962b;

  /* Surfaces & text */
  --ink: #1c1c1c;
  --text-color: #1c1c1c;
  --text-muted: #6b6b6b;
  --text-light: #6b6b6b;
  --bg: #ffffff;
  --bg-color: #ffffff;
  --bg-soft: #f7f7f5;
  --bg-light: #f7f7f5;
  --line: #e4e4e0;
  --border-color: #e4e4e0;

  /* Radii */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --border-radius: 6px;

  /* Elevation — flat by default; only large overlays keep a faint shadow */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-light: none;
  --shadow-medium: none;

  /* Motion */
  --ease: ease;
  --transition: all .15s var(--ease);
  --speed: .15s;

  /* Layout */
  --container: 1200px;
  --header-h: 66px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);

  /* Legacy aliases (used by older rules) */
  --primary-color: var(--primary);
  --primary-hover: var(--primary-dark);
  --secondary-color: var(--secondary);
  --accent-color: var(--accent);
  --discount-color: var(--discount);
  --star-color: var(--star);
  --footer-color: var(--primary);
}