/* ============================================================
   LedgerBoss — design tokens + named transitions
   Formalizes §3 + §4 of the design handoff. Drop into public/.
   --accent remains the ONLY per-tenant brand hook (set at
   runtime by hostname). Everything else is shared.
   Comps reference: "LedgerBoss Screens.dc.html"
   ============================================================ */

:root {
  /* --- brand hook (runtime, per tenant) ------------------- */
  --accent: #6ee7b7;                /* set by TENANT_BRANDS   */
  /* Accent values used in the comps:
     Lucky Ledgers    light #3e6b4e · dark #6ee7b7
     Ballard Computer light #3a5f8c · dark #93c5fd
     Rule: pastel handoff accents are DARK-mode accents; light
     mode uses the deep brand tone. */

  /* --- motion --------------------------------------------- */
  --dur-instant: 80ms;              /* checkbox, toggle       */
  --dur-fast:    140ms;             /* hover, focus, press    */
  --dur-base:    220ms;             /* row/panel enter, tabs  */
  --dur-slow:    320ms;             /* screen switch, drawer  */
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);   /* most UI     */
  --ease-in:     cubic-bezier(0.3, 0, 1, 1);   /* leaving     */
  --ease-spring: cubic-bezier(0.2, 0, 0, 1.2); /* confirm only*/

  /* --- radius ---------------------------------------------- */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 99px;

  /* --- spacing (8px rhythm) -------------------------------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* --- type ------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'EB Garamond', Georgia, serif;        /* titles, wordmark, stat figures */
  --font-money: 'IBM Plex Mono', ui-monospace, monospace; /* amounts, dates, tokens */
  --text-min: 13px;                 /* readability floor — nothing smaller */

  /* --- light surfaces (default) ---------------------------- */
  --bg: #f8f6f0;        --panel: #fffefb;      --sidebar: #f1eee3;
  --border: #e8e3d5;    --border-strong: #ddd7c6;
  --ink: #20281f;       --ink-2: #444b3f;      --ink-3: #6e6957;   /* 4.5:1 floor */
  --ok-bg: #e9f0e6;     --ok: #2f5c40;         /* approved / done  */
  --warn-bg: #f8efdc;   --warn: #7a5a1e;       /* needs_review     */
  --dup-bg: #ece7f4;    --dup: #5d4f8e;        /* duplicate_of     */
  --err-bg: #f8e7e3;    --err: #8c4136;        /* error / refused  */
  --row-flag-warn: #fdf7ea;  --row-flag-dup: #f4f1f8;  /* row tints */
}

[data-theme="dark"] {
  --bg: #151a13;        --panel: #1c2219;      --sidebar: #11150e;
  --border: #2b3326;    --border-strong: #3a4433;
  --ink: #e9ede2;       --ink-2: #becbb0;      --ink-3: #9aa58c;
  --ok-bg: #223528;     --ok: #8fe0b8;
  --warn-bg: #3a2f1a;   --warn: #e8c37a;
  --dup-bg: #2e2a3d;    --dup: #b7a9e0;
  --err-bg: #3a221e;    --err: #e09a8c;
  --row-flag-warn: #2a2517;  --row-flag-dup: #262238;
}

/* ============================================================
   Named transitions (per motion spec) — one-shot semantics.
   The comps loop these for demo visibility; production fires
   them once, on the event.
   ============================================================ */

/* Hover / focus / press — background, border, color, shadow only.
   NEVER animate layout. */
.t-interactive {
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* Row highlight — needs_review / duplicate first appearance:
   fade in, pulse ≤2 cycles, then static. */
@keyframes row-pulse-warn { 0%,100% { background-color: var(--row-flag-warn) }
                            50%     { background-color: color-mix(in oklab, var(--row-flag-warn), var(--warn) 18%) } }
.t-row-flag { animation: row-pulse-warn var(--dur-base) var(--ease-out) 2; }

/* Approve confirm — badge scale 0.9 → 1. No confetti. */
@keyframes badge-pop { from { transform: scale(.9) } 60% { transform: scale(1.06) } to { transform: scale(1) } }
.t-approve { animation: badge-pop var(--dur-fast) var(--ease-spring) both; }

/* Panel / commentary enter */
@keyframes panel-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.t-panel-enter { animation: panel-in var(--dur-base) var(--ease-out) both; }

/* Screen switch — cross-fade only, content shift ≤ 8px, no slides */
.t-screen-enter { animation: panel-in var(--dur-slow) var(--ease-out) both; }

/* Toast — in @ base, out @ fast/ease-in, auto-dismiss 4s (JS) */
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px) } }
.t-toast-in  { animation: toast-in  var(--dur-base) var(--ease-out) both; }
.t-toast-out { animation: toast-out var(--dur-fast) var(--ease-in)  both; }

/* Balance meter — bars animate width @ base; green tick on balance */
.t-meter-bar { transition: transform var(--dur-base) var(--ease-out); transform-origin: left; }
.t-meter-balanced { animation: badge-pop var(--dur-fast) var(--ease-spring) 1; }

/* Spinners / in-flight dots */
@keyframes spin { to { transform: rotate(360deg) } }
.t-spin { animation: spin .9s linear infinite; }
@keyframes dot-blink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.t-live-dot { animation: dot-blink 1.2s ease-in-out infinite; }

/* --- accessibility: required ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}