/* BÜROMAI — shared design tokens + safe global unification (UI-UNIFICATION-FINAL-SWEEP-1)
   One visual family across landing / login / app: deep navy + warm gold + cream cards.
   Loaded by EVERY page after buromai-config.js. Deliberately light-touch:
   - tokens (--bm-*) are the single source of truth for colors/radii/shadows;
   - only element-level, non-destructive global polish (focus ring, selection, scrollbar);
   - .bm-* utility classes for new/refactored surfaces;
   - no forced overrides, no layout changes — legacy inline-styled pages keep working unchanged
     (the only exception: the reduced-motion kill-switch at the bottom). */

:root {
  /* palette — canonical values from the landing/login family */
  --bm-ink: #14233b;
  --bm-navy: #101c30;
  --bm-navy-2: #16273f;
  --bm-steel: #33547f;
  --bm-gold: #c8a24b;
  --bm-gold-deep: #8a6e2e;
  --bm-gold-soft: #f6efdd;
  --bm-cream: #fbfaf6;
  --bm-paper: #f4f1ea;
  --bm-muted: #5a6275;
  --bm-muted-2: #8b93a1;
  --bm-border: #e7e4dd;
  --bm-ok: #2f6b49;
  --bm-risk: #b23a2e;
  /* shape */
  --bm-radius-card: 14px;
  --bm-radius-btn: 9px;
  --bm-radius-chip: 99px;
  --bm-shadow-card: 0 1px 2px rgba(20,30,45,.06), 0 18px 50px -24px rgba(20,35,59,.35);
  /* motion — one ease, three durations + a press tick (MOTION-FOUNDATION-1).
     Transferred from the landing's --ease; product intent is calm/event-driven,
     so these stay short and are always property-scoped (never `transition: all`).
     Every consumer of these tokens is disabled under prefers-reduced-motion below. */
  --bm-ease: cubic-bezier(.22,.61,.36,1);
  --bm-dur-press: 90ms;
  --bm-dur-fast: 120ms;
  --bm-dur: 180ms;
  --bm-dur-slow: 240ms;
}

/* ── safe global polish (element-level only) ─────────────────────────────── */
::selection { background: rgba(200,162,75,.28); color: var(--bm-ink); }
:focus-visible { outline: 2px solid var(--bm-gold); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgba(90,98,117,.45) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(90,98,117,.38); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(90,98,117,.6); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── shared utilities for unified surfaces (opt-in via class) ────────────── */
.bm-card {
  background: var(--bm-cream);
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-card);
  box-shadow: var(--bm-shadow-card);
}
.bm-btn {
  display: inline-block; border-radius: var(--bm-radius-btn); padding: 9px 18px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: background var(--bm-dur-fast) var(--bm-ease),
              border-color var(--bm-dur-fast) var(--bm-ease),
              color var(--bm-dur-fast) var(--bm-ease),
              transform var(--bm-dur-press) var(--bm-ease);
}
.bm-btn:not(:disabled):active { transform: translateY(1px); }
.bm-btn-primary { background: var(--bm-gold); color: var(--bm-navy); }
.bm-btn-primary:hover { background: #d7b25e; }
.bm-btn-navy { background: var(--bm-navy-2); color: #fff; }
.bm-btn-navy:hover { background: var(--bm-steel); }
.bm-btn-ghost { border-color: var(--bm-border); background: #fff; color: var(--bm-ink); }
.bm-btn-danger { border-color: transparent; background: #fff; color: var(--bm-risk); }
.bm-btn:disabled { opacity: .55; cursor: not-allowed; }
.bm-chip {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
}
.bm-chip-ok { background: #e9f0ea; color: var(--bm-ok); }
.bm-chip-warn { background: var(--bm-gold-soft); color: var(--bm-gold-deep); }
.bm-chip-off { background: #f2efe6; color: #8a7a52; }
.bm-chip-risk { background: #f7e9e6; color: var(--bm-risk); }

/* content-enter: one-time, transform+opacity only (no layout properties → no CLS).
   Applied by adding .bm-enter to a freshly-mounted card/row; it self-clears visually. */
@keyframes bm-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bm-enter { animation: bm-enter var(--bm-dur-slow) var(--bm-ease) both; }

/* app surfaces stay calm — any page-level ambient animation must honor this.
   The kill-switch also neutralizes the micro-interaction layer above: transitions
   collapse to ~0 and one-shot enters are dropped, so reduced-motion users get the
   final state instantly with no movement. Focus rings are never animated. */
@media (prefers-reduced-motion: reduce) {
  .bm-animated, .bm-animated::before, .bm-animated::after { animation: none !important; }
  .bm-enter { animation: none !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}