/* HUD overrides for the embedded calendar demo at /calendar/ */

:root {
  color-scheme: dark;
  --bg-main: transparent;
  --bg-surface: transparent;
  --bg-surface-subtle: rgba(109, 255, 154, 0.03);
  --bg-surface-elevated: rgba(109, 255, 154, 0.06);
  --bg-surface-hover: rgba(109, 255, 154, 0.12);
  --border-subtle: rgba(109, 255, 154, 0.2);
  --border-strong: rgba(109, 255, 154, 0.45);
  --text-primary: var(--hud);
  --text-secondary: var(--hud-body);
  --text-muted: var(--hud-dim);
  --text-faint: rgba(109, 255, 154, 0.4);
  --accent-primary: var(--hud);
  --accent-inverse: #050705;
  --font-sans: "Departure Mono", ui-monospace, Menlo, monospace;
  --font-mono: "Departure Mono", ui-monospace, Menlo, monospace;
  --grid-line: rgba(109, 255, 154, 0.14);
  --grid-line-quarter: rgba(109, 255, 154, 0.05);

  /* Events share the green fill; the left stripe keeps each color label distinct */
  --event-bg-default: rgba(109, 255, 154, 0.1);
  --event-bg-ocean: rgba(109, 255, 154, 0.1);
  --event-bg-violet: rgba(109, 255, 154, 0.1);
  --event-bg-amber: rgba(109, 255, 154, 0.1);
  --event-bg-rose: rgba(109, 255, 154, 0.1);
  --event-bg-sage: rgba(109, 255, 154, 0.1);
  --event-border-default: rgba(109, 255, 154, 0.35);
  --event-border-ocean: rgba(109, 255, 154, 0.35);
  --event-border-violet: rgba(109, 255, 154, 0.35);
  --event-border-amber: rgba(109, 255, 154, 0.35);
  --event-border-rose: rgba(109, 255, 154, 0.35);
  --event-border-sage: rgba(109, 255, 154, 0.35);
  --event-ink-default: var(--hud);
  --event-ink-ocean: var(--hud);
  --event-ink-violet: var(--hud);
  --event-ink-amber: var(--hud);
  --event-ink-rose: var(--hud);
  --event-ink-sage: var(--hud);
  --event-accent-default: var(--hud);
  --event-accent-ocean: #6dc8ff;
  --event-accent-violet: #b49bff;
  --event-accent-amber: #ffd36d;
  --event-accent-rose: #ff8fa3;
  --event-accent-sage: #c6f08a;
}

body {
  background: transparent;
}

/* Sticky headers stay readable while the grid scrolls under them */
.calendar-corner,
.day-header {
  background: rgba(5, 7, 5, 0.6);
}

.brand h1,
.login-brand-title {
  font-weight: 400;
  text-transform: uppercase;
  text-shadow: var(--glow);
}

.day-header--today .day-header__number,
.login-submit-btn {
  text-shadow: none;
}

.event-cycle-bar,
.event-editor {
  background: rgba(5, 7, 5, 0.92);
}

.hud-bg::after {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(4, 7, 4, 0.5) 0%, rgba(4, 7, 4, 0.78) 100%),
    rgba(4, 7, 4, 0.35);
}

/* Room for the injected site nav above the app */
:root {
  --demo-nav-inset: 0.75rem;
}

#root {
  height: calc(100svh - var(--demo-nav-height));
}

.login-root {
  min-height: calc(100svh - var(--demo-nav-height));
}