/* ===========================================================================
   Shared across the public pages: the light theme, and the two controls that
   switch it.

   The pages are dark-first - that is the brand, and every page defines the
   same token names in its own <style> block. This file only redefines those
   tokens for the light theme, so a page picks up light mode by linking this
   file and nothing else.
   =========================================================================== */

:root[data-theme='light'] {
  color-scheme: light;

  --ink: #f4f6f9;      /* page ground */
  --ink-2: #ffffff;    /* raised tiles */
  --ink-3: #e9edf3;
  --line: rgba(10, 15, 22, 0.12);
  --line-2: rgba(10, 15, 22, 0.2);
  --fg: #101821;
  --fg-dim: #5a6675;

  /* The brand yellow has to darken to stay readable as text on a light ground
     - #fee900 on white is about 1.1:1 - but the buttons keep the brand tone,
     since they carry dark ink either way. These two clear AA as text: 5.1:1
     and 7.0:1 on white. */
  --accent: #7a6f00;
  --accent-2: #635a00;
  --alarm: #c8353a;
  --ok: #1f8a35;
}

/* The tiles carry a hand-mixed gradient and a near-black drop shadow, both
   tuned for a dark ground. On light they need the opposite: a gentle lift off
   white rather than a hole punched into black. */
:root[data-theme='light'] .stat { background: var(--ink-2); }
:root[data-theme='light'] .svc {
  background-image:
    radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
      rgba(122, 111, 0, calc(var(--glow, 0) * 0.1)), transparent 72%),
    linear-gradient(180deg, var(--ink-2), var(--ink-3));
}
:root[data-theme='light'] .svc,
:root[data-theme='light'] .pillar,
:root[data-theme='light'] .ctl,
:root[data-theme='light'] .card,
:root[data-theme='light'] .loc,
:root[data-theme='light'] .role,
:root[data-theme='light'] .section {
  box-shadow: 0 1px 2px rgba(10, 15, 22, 0.05);
}
:root[data-theme='light'] .svc:hover,
:root[data-theme='light'] .pillar:hover,
:root[data-theme='light'] .ctl:hover,
:root[data-theme='light'] .card:hover {
  border-color: rgba(122, 111, 0, 0.45);
  box-shadow: 0 18px 34px -22px rgba(10, 15, 22, 0.35);
}
:root[data-theme='light'] .loc:hover,
:root[data-theme='light'] .role:hover {
  border-color: rgba(122, 111, 0, 0.45);
  box-shadow: 0 12px 24px -18px rgba(10, 15, 22, 0.3);
}
:root[data-theme='light'] .stat:hover { background: var(--ink-3); }

/* The sticky header is a translucent pane over whatever scrolls beneath it,
   so its tint has to match the ground rather than always being near-black. */
:root[data-theme='light'] header.site { background: rgba(244, 246, 249, 0.85); }

/* The hero's wash and grid were drawn for a dark canvas. */
:root[data-theme='light'] .hero::before {
  background:
    radial-gradient(900px 460px at 78% -8%, rgba(254, 233, 0, 0.2), transparent 62%),
    radial-gradient(700px 420px at 8% 12%, rgba(56, 120, 220, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--ink) 100%);
}

/* Form fields sit on the page ground in dark mode; on light they need to be
   the lighter surface, or they disappear into it. */
:root[data-theme='light'] .field input,
:root[data-theme='light'] .field select,
:root[data-theme='light'] .field textarea,
:root[data-theme='light'] input,
:root[data-theme='light'] select,
:root[data-theme='light'] textarea {
  background: var(--ink-2);
}

/* Alarm callouts read as a warning tint, not as a dark panel. */
:root[data-theme='light'] .card.alarm {
  background: linear-gradient(180deg, rgba(200, 53, 58, 0.08), var(--ink-2));
}
:root[data-theme='light'] .alarm-num { color: #a82a2f; }
:root[data-theme='light'] .alarm-num:hover { color: #7d1f23; }
:root[data-theme='light'] .nav-alarm { color: #a82a2f; }
:root[data-theme='light'] .status.error,
:root[data-theme='light'] .form-status[data-error] { color: #a82a2f; }

/* ---------------------------------------------------------------------------
   The controls themselves. Identical on every page, so they live here rather
   than in three <style> blocks.
   --------------------------------------------------------------------------- */
.site-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
}

.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lang-switch button + button { border-left: 1px solid var(--line-2); }
.lang-switch button:hover { color: var(--fg); }

.lang-switch button[aria-pressed='true'] {
  background: var(--accent);
  color: #17120a;
}

:root[data-theme='light'] .lang-switch button[aria-pressed='true'] {
  background: var(--accent);
  color: #ffffff;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* On a narrow screen the nav collapses behind the menu button; the controls
   stay out, because a language toggle nobody can find is not a toggle. */
@media (max-width: 900px) {
  .site-controls { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch button,
  .theme-toggle { transition: none; }
}