/* Atrium — ambient meeting-room displays.
   Design direction: "Ambient Glanceable" — soft tinted washes that blend into
   the wall, rounded, agenda-forward, Lato. Chosen in design session 2026-06-09. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ink */
  --ink:    #111827;
  --ink-2:  #6B7280;
  --ink-3:  #6A7180; /* annotation gray — keep ≥4.5:1 on every wash */
  --paper:  #FFFDFC;

  /* neutral chrome */
  --hairline:     #E8E7E2;
  --hairline-2:   #EDECE7;
  --wash-neutral: linear-gradient(170deg, #F7F7F4 0%, #FFFEFD 60%);

  /* state hues (from the chosen palette) */
  --free-dot:    #34C28A;
  --free-word:   #17A06E;
  --free-label:  #116A4B;
  --busy-dot:    #E25555;
  --busy-word:   #E25555;
  --busy-label:  #9B1C1C;
  --amber-dot:   #E0A92E;
  --amber-word:  #BD840F;
  --amber-label: #8A5E06;
  --indigo-dot:  #6366F1;
  --indigo-word: #4F46E5;
  --indigo-label:#3730A3;

  /* washes — gentle gradients, easy on always-on panels */
  --wash-free:   linear-gradient(160deg, #EBFAF2 0%, #FDFFFE 70%);
  --wash-busy:   linear-gradient(160deg, #FEF2F2 0%, #FFFDFC 70%);
  --wash-amber:  linear-gradient(160deg, #FDF5E4 0%, #FFFEFB 70%);
  --wash-indigo: linear-gradient(165deg, #EEEFFC 0%, #FEFEFF 70%);

  font-family: Lato, "Segoe UI", system-ui, sans-serif;
}

html, body { height: 100%; }

body.display {
  height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  user-select: none;
  -webkit-user-select: none;
}

/* stacked wash layers so state changes crossfade (gradients can't transition) */
.washes { position: fixed; inset: 0; z-index: -1; }
.washes i { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.washes .w-free   { background: var(--wash-free); }
.washes .w-busy   { background: var(--wash-busy); }
.washes .w-amber  { background: var(--wash-amber); }
.washes .w-indigo { background: var(--wash-indigo); }

[data-state="free"] .washes .w-free,
[data-state="busy"] .washes .w-busy,
[data-state="soon"] .washes .w-amber { opacity: 1; }

/* top bar — room identity + live clock */
.top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: clamp(18px, 3.4vmin, 34px) clamp(24px, 4.5vmin, 48px) 0;
  font-size: clamp(14px, 2.2vmin, 22px);
  font-weight: 700; letter-spacing: .07em;
  transition: color .7s ease;
}
.top .clock {
  font-weight: 400; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

[data-state="free"] .top .where { color: var(--free-label); }
[data-state="busy"] .top .where { color: var(--busy-label); }
[data-state="soon"] .top .where { color: var(--amber-label); }

/* status dot that breathes */
.dot {
  display: inline-block; width: .55em; height: .55em; border-radius: 50%;
  background: currentColor;
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.25); opacity: .55; }
}

.badge {
  position: fixed; right: clamp(14px, 2.4vmin, 24px); bottom: clamp(10px, 1.8vmin, 18px);
  font-size: clamp(10px, 1.4vmin, 13px); font-weight: 700;
  color: var(--ink-3); letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

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