/*
 * Senior Cottages styling contract
 *
 * Future maintainers and agents should:
 * - Reuse the shared custom properties below before adding new values.
 * - Keep spacing and sizing on the 3px scale. Promote repeated values to
 *   descriptive custom properties instead of scattering one-off literals.
 * - Prefer flexbox, flex-wrap, and intrinsic sizing so content flows naturally.
 *   Use Grid only when aligned two-dimensional data materially benefits from it.
 * - Avoid rigid component tracks, fixed layout heights, display: contents, and
 *   breakpoint patches that compensate for an inflexible base layout.
 * - Keep public information and survey pages mobile-first and accessible.
 * - Treat the staff workspace as compact and desktop-first while preserving a
 *   readable, overflow-free narrow layout for casual review.
 * - Extend existing surface and component patterns before inventing new ones,
 *   and keep selectors reusable rather than route-specific.
 */

:root {
  color-scheme: light;
  --font-body: 'Avenir Next', 'Segoe UI', sans-serif;
  --font-display: 'Iowan Old Style', 'Palatino Linotype', serif;
  --weight-medium: 500;
  --weight-bold: 700;

  --space-1: 3px;
  --space-2: 6px;
  --space-3: 9px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 18px;
  --space-8: 24px;
  --space-10: 30px;
  --space-12: 36px;
  --space-16: 48px;
  --space-20: 60px;
  --space-24: 72px;

  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;

  --gray-50: #f7f3f0;
  --gray-100: #ece6e1;
  --gray-200: #ddd6d1;
  --gray-300: #cfc7c1;
  --gray-400: #c0b7b1;
  --gray-500: #9d938a;
  --gray-600: #7a7265;
  --gray-700: #655d59;
  --gray-800: #514b4c;
  --gray-900: #433e3f;

  --brown-100: #f1e2d2;
  --brown-200: #e4cbb0;
  --brown-300: #d6b08d;
  --brown-400: #c69c72;
  --brown-500: #a88363;
  --brown-600: #8e6e53;
  --brown-700: #735744;

  --color-page: var(--gray-100);
  --color-surface: rgba(247, 243, 240, 0.88);
  --color-surface-strong: var(--gray-50);
  --color-text: var(--gray-900);
  --color-muted: var(--gray-700);
  --color-border: rgba(67, 62, 63, 0.16);
  --color-card-border: rgba(67, 62, 63, 0.12);
  --color-primary: var(--brown-600);
  --color-primary-strong: var(--brown-700);
  --color-primary-soft: var(--brown-100);
  --color-secondary: var(--gray-600);
  --color-secondary-strong: var(--gray-800);
  --color-secondary-soft: var(--gray-200);
  --color-success: #768060;
  --color-success-strong: #5c644c;
  --color-success-soft: #e2e6d9;
  --color-warning: var(--brown-400);
  --color-warning-strong: var(--brown-600);
  --color-warning-soft: #f2e1cf;
  --color-error: #9d6660;
  --color-error-strong: #7b4f4a;
  --color-error-soft: #edd9d6;
  --color-info: #8b8178;
  --color-info-strong: var(--gray-700);
  --color-info-soft: #e9e2dc;
  --color-focus: #b18963;
  --shadow-card: 0 18px 60px rgba(67, 62, 63, 0.14);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-page: #211e1f;
  --color-surface: rgba(67, 62, 63, 0.9);
  --color-surface-strong: #3b3536;
  --color-text: #f5efe9;
  --color-muted: #d5cbc4;
  --color-border: rgba(192, 183, 177, 0.18);
  --color-card-border: rgba(198, 156, 114, 0.18);
  --color-primary: #c69c72;
  --color-primary-strong: #e1bb93;
  --color-primary-soft: rgba(198, 156, 114, 0.18);
  --color-secondary: #c0b7b1;
  --color-secondary-strong: #ece6e1;
  --color-secondary-soft: rgba(192, 183, 177, 0.14);
  --color-success: #97a381;
  --color-success-strong: #bdc6ab;
  --color-success-soft: rgba(151, 163, 129, 0.18);
  --color-warning: #d5ad85;
  --color-warning-strong: #efcfab;
  --color-warning-soft: rgba(213, 173, 133, 0.18);
  --color-error: #bb847e;
  --color-error-strong: #deb1ac;
  --color-error-soft: rgba(187, 132, 126, 0.18);
  --color-info: #b0a59b;
  --color-info-strong: #ddd6d1;
  --color-info-soft: rgba(176, 165, 155, 0.16);
  --color-focus: #d7b18b;
  --shadow-card: 0 18px 60px rgba(67, 62, 63, 0.42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-page: #211e1f;
    --color-surface: rgba(67, 62, 63, 0.9);
    --color-surface-strong: #3b3536;
    --color-text: #f5efe9;
    --color-muted: #d5cbc4;
    --color-border: rgba(192, 183, 177, 0.18);
    --color-card-border: rgba(198, 156, 114, 0.18);
    --color-primary: #c69c72;
    --color-primary-strong: #e1bb93;
    --color-primary-soft: rgba(198, 156, 114, 0.18);
    --color-secondary: #c0b7b1;
    --color-secondary-strong: #ece6e1;
    --color-secondary-soft: rgba(192, 183, 177, 0.14);
    --color-success: #97a381;
    --color-success-strong: #bdc6ab;
    --color-success-soft: rgba(151, 163, 129, 0.18);
    --color-warning: #d5ad85;
    --color-warning-strong: #efcfab;
    --color-warning-soft: rgba(213, 173, 133, 0.18);
    --color-error: #bb847e;
    --color-error-strong: #deb1ac;
    --color-error-soft: rgba(187, 132, 126, 0.18);
    --color-info: #b0a59b;
    --color-info-strong: #ddd6d1;
    --color-info-soft: rgba(176, 165, 155, 0.16);
    --color-focus: #d7b18b;
    --shadow-card: 0 18px 60px rgba(67, 62, 63, 0.42);
  }
}

body {
  margin: 0;
  padding: var(--space-8);
  font-family: var(--font-body);
  background: var(--color-page);
  color: var(--color-text);
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
}