:root {
  --bg: #f7f9fc;
  --bg-soft: #fbfcfe;
  --bg-deep: #162033;

  --panel: #ffffff;
  --panel-soft: #e8f1fa;
  --panel-accent: #dbe8f6;

  --text: #162033;
  --muted: #5f6a84;

  --brand: #4572a7;
  --brand-deep: #2d4f79;
  --brand-accent: #af026c;

  --line: rgba(22, 32, 51, 0.1);
  --line-strong: rgba(255, 255, 255, 0.15);

  --shadow-soft: 0 12px 30px rgba(22, 32, 51, 0.08);
  --shadow-medium: 0 22px 60px rgba(22, 32, 51, 0.12);
  --shadow-strong: 0 18px 40px rgba(22, 32, 51, 0.18);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
}

/* Suggested usage

Primary CTA:
  background: var(--bg-deep);
  color: #fff;

Secondary CTA / Product accent:
  background: var(--brand);
  color: #fff;

AI or brand highlight:
  color: var(--brand-accent);

Cards:
  background: var(--panel);
  border: 1px solid var(--line);

Soft panels:
  background: var(--panel-soft);

Page background:
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
*/