:root {
  /* Pool water */
  --pool-deep: #085F6A;
  --pool-dark: #085F6A;
  --pool: #0B7B8A;
  --pool-mid: #14A8BA;
  --teal-border: #A8DDE4;
  --pool-light: #E0F4F7;

  /* Sunlight */
  --sun-deep: #8A5800;
  --sun: #D4892A;
  --sun-hover: #B8721F;
  --sun-light: #FEF3DA;

  /* White (for text on dark surfaces) */
  --white: #FFFFFF;

  /* Neutrals */
  --stone: #1C3A2A;
  --text: #2A2A22;
  --text-2: #4A4842;
  --text-3: #8A8278;
  --bg: #F5F0E6;
  --surface: #FFFFFF;
  --surface-2: #F0EBE0;
  --border: #DDD8CC;
  --border-2: #C0BAB0;

  /* Semantic */
  --added-bg: #E0F4F7;
  --added-text: #085F6A;
  --urgent-bg: #FDECEA;
  --urgent-text: #9B1C1C;
  --urgent-border: #F5C0C0;
  --priority-bg: #FEF3DA;
  --priority-text: #8A5800;

  /* Phase colors - water depth scale */
  --phase-1: #0B7B8A;
  --phase-2: #92400E;
  --phase-3: #065F46;
  --phase-4: #5521B5;

  /* Layout - Border radius */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Texture */
  --tile-color-light: rgba(160,148,120,.13);
  --tile-color-dark: rgba(255,255,255,.06);
  --tile-size-page: 22px;
  --tile-size-hero: 18px;
}