@layer theme {
  [data-theme="light"] {
    --color-scheme: light;
  }
  [data-theme="dark"] {
    --color-scheme: dark;
  }

  :where(html) {
    color-scheme: var(--color-scheme, light dark);

    /* PRIMARY COLOR - Warm, welcoming community feel */
    --palette-hue: var(--oklch-teal);
    --palette-hue-rotate-by: 5;
    --palette-chroma: 0.85;

    /* Primary */
    --primary: var(--color-8);
    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
    --primary-contrast: var(--gray-1);

    /* Text */
    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
    --text-color-2: light-dark(var(--gray-13), var(--gray-4));

    /* Surface */
    --surface-default: light-dark(var(--gray-1), var(--gray-13));
    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));

    /* Borders */
    --border-color: light-dark(var(--gray-4), var(--gray-12));
    --border-radius: var(--size-2);
    --border-width: var(--border-size-2);

    /* Fields & Buttons */
    --field-border-color: var(--border-color);
    --field-border-radius: var(--size-2);
    --field-border-width: var(--border-size-2);
    --button-border-radius: var(--size-2);

    /* Shadows */
    --shadow-color: var(--primary);
    --shadow-strength: 0.2;
  }

  /* Gray palette - auto-generated from palette */
  :where(html) {
    --gray-chroma: 0.01;
    --gray-lightness: 255;
    --gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-lightness));
    --gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-lightness));
    --gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-lightness));
    --gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-lightness));
    --gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-lightness));
    --gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-lightness));
    --gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-lightness));
    --gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-lightness));
    --gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-lightness));
    --gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-lightness));
    --gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-lightness));
    --gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-lightness));
    --gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-lightness));
    --gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-lightness));
    --gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-lightness));
    --gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-lightness));
  }
}

/* Design Style: Community Connection - Professional yet warm interface with subtle teal accents, clean typography, and welcoming depth that encourages neighbor interaction while maintaining privacy and trust */