/* Design tokens, global element styles and the page frame. Always loaded first. */
:root {
  /* Colours */
  --color-bg: #FAFAF7;
  --color-surface: #FFFFFF;
  --color-text: #1F2523;
  --color-muted: #5C6663;
  --color-border: #E4DFD3;
  --color-sand: #F1EDE4;
  --color-dashed: #C9C2AE;
  --color-teal: #0E7C7B;
  --color-teal-dark: #0A4C4B;
  --color-teal-line: #145F5D;
  --color-teal-tint: #E4F2F1;
  --color-teal-faint: #E9F5F3;
  --color-teal-pale: #CFE7E4;
  --color-teal-soft: #B9CFCE;
  --color-teal-muted: #6FA6A4;
  --color-coral: #FF6B4A;
  --color-coral-dark: #E5522F;
  --color-coral-tint: #FFE9E2;
  --color-green: #3FA66C;
  --color-green-dark: #256B45;
  --color-green-tint: #E1F3E8;
  --color-danger: #D9534F;
  --color-danger-border: #F3D2CF;
  --color-pending: #B15A00;
  --color-pending-tint: #FDEEE0;
  --color-white-14: rgba(255, 255, 255, 0.14);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-overlay: rgba(10, 76, 75, 0.75);

  /* Photo placeholders (used while a room has no real images) */
  --color-photo-1: #0E7C7B;
  --color-photo-2: #0A4C4B;
  --color-photo-3: #5C8C7B;
  --color-photo-4: #7C9E8E;

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Manrope', sans-serif;

  /* Layout */
  --page-max-width: 1440px;
  --gutter: 64px;
  --gutter-admin: 48px;

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-search: 0 20px 40px rgba(10, 76, 75, 0.25);
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  text-decoration: none;
}

/* Author display rules (flex, grid...) must not defeat the hidden attribute */
[hidden] {
  display: none !important;
}

/* Page frame: the design is a 1440px artboard */
.page {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

/* Inline SVG icons (see js/icons.js) */
.icon {
  flex-shrink: 0;
}

.icon--teal { color: var(--color-teal); }
.icon--muted { color: var(--color-muted); }
.icon--white { color: var(--color-surface); }
.icon--green { color: var(--color-green); }
.icon--coral { color: var(--color-coral); }

/* Loading / error messages rendered by JavaScript */
.state-message {
  font-size: 14px;
  color: var(--color-muted);
}

.state-message--error {
  color: var(--color-danger);
}