/**
 * Kyvvu theme tokens, expressed as Bulma 1.x variables.
 *
 * Loaded LAST on all five entry points, after Bulma and after our own sheets.
 *
 * Light and dark are Bulma's own schemes (#475). js/theme.js resolves
 * light|dark|auto and writes the answer to <html data-theme>; Bulma 1.x keys
 * its dark scheme on that same attribute, and its [data-theme=light] block
 * follows its prefers-color-scheme block, so an explicit "light" wins on a dark
 * OS. Nothing here is scheme-specific.
 *
 * Every --color-* / --sidebar-* name below is an ALIAS of a --bulma-* variable,
 * so there is exactly one palette and it switches with Bulma. Our own
 * components (.content-box, the sidebar, the timeline) read these names and
 * follow along. Do not give one of them a literal colour: it would be right in
 * one scheme only, and a dark block to fix it is what this file used to be.
 *
 * The only literals are the brand orange and what derives from it. Shadows are
 * black at low alpha, which reads on both schemes.
 */
:root {
  /* Brand. Setting Bulma's primary hue makes .is-primary (buttons, tags,
   * outlined variants, focus rings) the brand orange with Bulma's own text
   * contrast, instead of hand-painting each component. */
  --bulma-primary-h: 28deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 37.5%;
  --color-primary:       #FF7700;

  /* Solid fills dark enough for WHITE text (#475 follow-up). At Bulma's own
   * lightness these fills are bright, so Bulma inverts to near-black text,
   * and white on them is only 2.1-2.8:1. Each lightness below is the highest
   * that keeps white text at 4.5:1; --*-invert-l: 100% asks for white. The
   * brand accent (--color-primary) stays #FF7700; only fills darken. Warning
   * keeps Bulma's yellow with dark text. */
  --bulma-primary-invert-l: 100%;
  --bulma-danger-l:         46.5%;
  --bulma-danger-invert-l:  100%;
  --bulma-success-l:        34%;
  --bulma-success-invert-l: 100%;
  --color-primary-tint:  var(--bulma-primary-soft);

  /* Status. */
  --color-danger:   var(--bulma-danger);
  --color-success:  var(--bulma-success);
  --color-warning:  var(--bulma-warning);
  --color-info:     var(--bulma-info);
  --color-link:     var(--bulma-link-text);

  /* Text. */
  --color-text:         var(--bulma-text);
  --color-text-strong:  var(--bulma-text-strong);
  --color-text-light:   var(--bulma-text-weak);
  --color-text-muted:   var(--bulma-text-weak);

  /* Surfaces. */
  --color-background:      var(--bulma-scheme-main-bis);
  --color-surface:         var(--bulma-scheme-main);
  --color-surface-raised:  var(--bulma-background);
  --color-surface-alt:     var(--bulma-background);
  --color-surface-sunken:  var(--bulma-scheme-main-bis);
  --color-surface-inset:   var(--bulma-scheme-main-bis);
  --color-surface-hover:   var(--bulma-background);

  /* Borders. */
  --color-border:         var(--bulma-border-weak);
  --color-border-subtle:  var(--bulma-border-weak);
  --color-border-mid:     var(--bulma-border-weak);
  --color-border-strong:  var(--bulma-border);

  /* Elevation. */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-login: 0 2px 10px rgba(0, 0, 0, 0.08);

  /* Sidebar. */
  --sidebar-bg:           var(--color-surface);
  --sidebar-border:       var(--color-border);
  --sidebar-text:         var(--bulma-text-weak);
  --sidebar-text-strong:  var(--bulma-text-strong);
  --sidebar-text-sub:     var(--bulma-text-weak);
  --sidebar-hover-bg:     var(--bulma-background);
  --sidebar-hover-text:   var(--bulma-text-strong);
  --sidebar-active-bg:    var(--bulma-background);
  --sidebar-accent:       var(--color-primary);
  --sidebar-overlay:      rgba(0, 0, 0, 0.4);
  --app-bg:               var(--color-background);

  /* Timeline. */
  --color-timeline-spine: var(--bulma-border-weak);
  --color-timeline-dot:   var(--bulma-border);
  --color-timeline-halo:  var(--color-surface);

  /* Loading screen. */
  --color-loading-bg:    var(--color-surface);
  --color-spinner-track: var(--bulma-border-weak);
  --color-spinner-head:  var(--color-primary);
}

/* Bulma 1.0.4 gaps, in Bulma's own variables.
 *
 * `is-light` means a LIGHT colour in both schemes: its background reads
 * --bulma-light-l and its text --bulma-<colour>-light-invert-l, none of which
 * the dark scheme redefines. So every is-light tag, notification and button
 * stays near-white on a dark page, and a bare `tag is-light` (white text on
 * white) disappears. Pointing them at the scheme-aware soft/bold lightness
 * makes is-light mean "soft" in dark, for all 104 call sites at once. */
:root[data-theme="dark"] {
  --bulma-light-l:                 var(--bulma-soft-l);
  --bulma-light-invert-l:          var(--bulma-bold-l);
  --bulma-primary-light-invert-l:  var(--bulma-bold-l);
  --bulma-link-light-invert-l:     var(--bulma-bold-l);
  --bulma-info-light-invert-l:     var(--bulma-bold-l);
  --bulma-success-light-invert-l:  var(--bulma-bold-l);
  --bulma-warning-light-invert-l:  var(--bulma-bold-l);
  --bulma-danger-light-invert-l:   var(--bulma-bold-l);
}

/* Coloured is-light notifications hard-code a 90% background, so no variable
 * reaches them; this is the one selector the remap above needs. */
:root[data-theme="dark"] .notification.is-light {
  --bulma-notification-background-l: var(--bulma-soft-l);
}

/* Solid buttons carry white text on fills tuned to 4.5:1 (see :root). Bulma's
 * dark scheme LIGHTENS fills on hover, which drops white text to 3.6:1; darken
 * them instead, as light mode does. */
:root[data-theme="dark"] .button:is(.is-primary, .is-success, .is-danger, .is-link):not(.is-soft):not(.is-light) {
  --bulma-button-hover-background-l-delta: -5%;
  --bulma-button-active-background-l-delta: -10%;
}

/* is-ghost hovers to the raw link colour, 3.5:1 on dark; keep link-text. */
.button.is-ghost { --bulma-button-ghost-hover-color: var(--bulma-link-text); }

/* .has-text-grey is a literal (#69748c) in both schemes: 3.7:1 on dark. */
.has-text-grey { color: var(--bulma-text-weak) !important; }

/* ========================================================================== *
 * Loading screen
 *
 * Moved out of index.html's inline <style> so it is tokenised. This is the
 * worst FOUC in the app: a full-viewport opaque overlay held for the whole of
 * includes.js's multi-pass partial fetch. js/theme.js sets data-theme before
 * this file is even parsed, so it opens in the right scheme.
 * ========================================================================== */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-loading-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#loading-screen.loaded {
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}
#loading-logo {
  width: 120px;
  height: 120px;
  margin-bottom: 2rem;
}
#loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-spinner-track);
  border-top: 4px solid var(--color-spinner-head);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#loading-text {
  margin-top: 1.5rem;
  color: var(--color-text);
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
  #loading-spinner       { animation: none; }
  #loading-screen.loaded { transition: none; }
}