:root {
  /*
    Color psychology map:
    - Red: buying energy, offer focus, primary action
    - Teal: trust, support, product assurance
    - Amber: premium highlight, cart accent, attention without alarm
    - Dark navy: stability, electronics-store confidence
    Change brand colors here first; the UI reads from these tokens.
  */
  --color-ink: #101828;
  --color-muted: #667085;
  --color-line: #e4e7ec;
  --color-paper: #ffffff;
  --color-soft: #f8fafc;
  --color-soft-2: #eef6f5;
  --color-page: #edf2f7;
  --color-dark: #0b111c;
  --color-red: #d7193f;
  --color-red-dark: #a70f2e;
  --color-teal: #0f766e;
  --color-amber: #f5b338;

  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --paper: var(--color-paper);
  --soft: var(--color-soft);
  --soft-2: var(--color-soft-2);
  --dark: var(--color-dark);
  --red: var(--color-red);
  --red-dark: var(--color-red-dark);
  --teal: var(--color-teal);
  --amber: var(--color-amber);

  --shadow: 0 20px 60px rgba(16, 24, 40, 0.16);
  --radius: 8px;
  --header-height: 66px;
}