/* Design tokens and page chrome shared by the login page and control panel. */

:root {
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ink: #0f2a3d;
  --muted: #5b7185;
  --faint: #8aa0b2;
  --ground: #eef7fd;
  --ground-2: #dff0fb;
  --surface: #ffffff;
  --surface-2: #f5fafe;
  --border: #d5e6f3;
  --border-strong: #b5d3ea;

  --accent: #0ea5e9;
  --accent-strong: #0284c7;
  --accent-soft: #e0f2fe;
  --accent-ink: #075985;

  --steel-1: #f4f6f8;
  --steel-2: #c7ced6;
  --steel-3: #8793a0;
  --glass: #1e3a5f;

  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --ok-ink: #14532d;
  --err: #dc2626;
  --err-soft: #fee2e2;
  --err-ink: #7f1d1d;

  --cloth-white: #f8fafc;
  --cloth-red: #ef4444;
  --cloth-blue: #3b82f6;

  --shadow: 0 1px 2px rgb(15 42 61 / 0.05), 0 12px 32px -12px rgb(14 116 170 / 0.22);
  --shadow-lg: 0 1px 2px rgb(15 42 61 / 0.05), 0 24px 48px -20px rgb(14 116 170 / 0.35);
  --radius: 1.25rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6f1f8;
    --muted: #9bb2c4;
    --faint: #6b8397;
    --ground: #0a1824;
    --ground-2: #0e2233;
    --surface: #11263a;
    --surface-2: #0d2031;
    --border: #1e3a52;
    --border-strong: #2c5070;

    --accent: #38bdf8;
    --accent-strong: #0ea5e9;
    --accent-soft: #0c3450;
    --accent-ink: #bae6fd;

    --steel-1: #cfd6dd;
    --steel-2: #8e99a5;
    --steel-3: #5c6773;
    --glass: #0b1d30;

    --ok: #4ade80;
    --ok-soft: #0f2e1f;
    --ok-ink: #bbf7d0;
    --err: #f87171;
    --err-soft: #3a1418;
    --err-ink: #fecaca;

    --cloth-white: #e2e8f0;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.3), 0 24px 48px -20px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--ground); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Floating bubbles in the background. */
.bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bubbles span {
  position: absolute;
  bottom: -6rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: radial-gradient(circle at 32% 30%, rgb(255 255 255 / 0.7), transparent 45%),
    color-mix(in srgb, var(--accent) 6%, transparent);
  animation: rise linear infinite;
}
.bubbles span:nth-child(1) { left: 6%;  width: 3rem;   height: 3rem;   animation-duration: 22s; }
.bubbles span:nth-child(2) { left: 18%; width: 1.4rem; height: 1.4rem; animation-duration: 16s; animation-delay: -6s; }
.bubbles span:nth-child(3) { left: 42%; width: 2.2rem; height: 2.2rem; animation-duration: 26s; animation-delay: -12s; }
.bubbles span:nth-child(4) { left: 67%; width: 1rem;   height: 1rem;   animation-duration: 14s; animation-delay: -3s; }
.bubbles span:nth-child(5) { left: 82%; width: 3.6rem; height: 3.6rem; animation-duration: 30s; animation-delay: -18s; }
.bubbles span:nth-child(6) { left: 93%; width: 1.6rem; height: 1.6rem; animation-duration: 19s; animation-delay: -9s; }

@keyframes rise {
  from { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(1.5rem, -55vh); }
  to { transform: translate(-1rem, -115vh); opacity: 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }

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