/* Abmanix design tokens (same values as the Gym app's globals.css), following the visitor's light/dark setting. */
:root {
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 20px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --dur-micro: 130ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --brand-yellow-500: #f5b400;
  --brand-yellow-600: #d99a00;
  --brand-blue-600: #1450e0;
  --brand-blue-700: #0e3cb8;

  --color-bg: #ffffff;
  --color-bg-subtle: #f5f7fb;
  --color-bg-elevated: #ffffff;
  --color-text: #10131a;
  --color-text-muted: #5b6373;
  --color-border: #e4e7ee;
  --color-primary: var(--brand-blue-600);
  --color-primary-hover: var(--brand-blue-700);
  --color-danger: #d6304a;
  --color-success: #17a05d;
  --color-warning: var(--brand-yellow-600);
  --color-success-text: color-mix(in srgb, var(--color-success) 60%, var(--color-text));
  --color-warning-text: color-mix(in srgb, var(--color-warning) 55%, var(--color-text));
  --color-danger-text: color-mix(in srgb, var(--color-danger) 75%, var(--color-text));
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b0d12;
    --color-bg-subtle: #12151c;
    --color-bg-elevated: #171b24;
    --color-text: #f2f4f8;
    --color-text-muted: #9aa2b1;
    --color-border: #262b36;
    --color-primary: #5b8cff;
    --color-primary-hover: #7aa2ff;
    --color-danger: #f0546b;
    --color-success: #2fbf78;
    --color-warning: var(--brand-yellow-500);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); }

.powered-by { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.powered-by a { color: inherit; text-decoration: none; font-weight: 600; }
.powered-by a:hover { text-decoration: underline; }

/* Room status board (hotel-only preview): a small grid of rooms in the dark tile. */
.rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rooms span {
  display: grid; gap: 2px; padding: 10px 8px; border-radius: var(--radius-md); font-size: 12px;
  background: #1a1f2a; color: #a3abba; border: 1px solid #262b36;
}
.rooms span b { color: #f2f4f8; font-size: 14px; }
.rooms span[data-s="occ"] { border-color: color-mix(in srgb, #1450e0 60%, #262b36); }
.rooms span[data-s="dirty"] { border-color: color-mix(in srgb, #e0435c 60%, #262b36); }
.rooms span[data-s="clean"] { border-color: color-mix(in srgb, #17a05d 60%, #262b36); }
.rooms span[data-s="ooo"] { opacity: 0.55; }
.roomKey { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #a3abba; margin-top: 12px; }
.roomKey i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }