:root {
  /* ====== Brand Colors ====== */
  --color-primary:       #0f766e;
  --color-primary-dark:  #0b5f5a;
  --color-primary-light: #e0f2f1;
  --color-primary-muted: #2f7f73;

  /* ====== Accent (survey) ====== */
  --color-accent:       #f5a623;
  --color-accent-light: #fff7ed;

  /* ====== Surfaces ====== */
  --color-bg:           #e5e5e5;
  --color-surface:      #ffffff;
  --color-surface-muted: #fafafa;
  --color-surface-hover: #f3fbfb;
  --color-tile-fallback: #1f2937;

  /* ====== Borders ====== */
  --color-border:        #e5e5e5;
  --color-border-mid:    #d4d4d4;
  --color-border-strong: #b0b0b0;
  --color-border-subtle: #f0f0f0;

  /* ====== Text ====== */
  --color-text:           #222222;
  --color-text-label:     #333333;
  --color-text-onboard:   #444444;
  --color-text-secondary: #555555;
  --color-text-sub:       #666666;
  --color-text-muted:     #777777;

  /* ====== Shadows ====== */
  --shadow-card:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.18);

  /* ====== Border Radius ====== */
  --radius-sm:   0.7rem;
  --radius-md:   0.85rem;
  --radius-lg:   0.9rem;
  --radius-pill: 999px;
}