/* Selamberr Pro — shared design refinement layer (DESIGN.md §21)
   Loaded LAST in <head> (after each page's own <style>), so it refines — never replaces —
   the per-page tokens and components. Everything here is var-driven and light-mode safe. */

:root {
  /* Elevation scale */
  --elev-1: 0 2px 8px rgba(0,0,0,.25);
  --elev-2: 0 8px 32px rgba(0,0,0,.4);
  --elev-3: 0 32px 80px rgba(0,0,0,.6);
  /* Radius scale */
  --r-sm: 10px; --r-md: 12px; --r-lg: 20px; --r-xl: 24px; --r-pill: 99px;
  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: .15s; --dur: .2s;
  /* Focus ring */
  --ring: rgba(69,181,170,.65);
  /* Table row tint */
  --row-hover: rgba(69,181,170,.07);
  --row-zebra: rgba(255,255,255,.02);
}
html.light {
  --elev-1: 0 2px 8px rgba(10,30,45,.08);
  --elev-2: 0 8px 28px rgba(10,30,45,.10);
  --elev-3: 0 32px 80px rgba(10,30,45,.22);
  --ring: rgba(46,156,145,.7);
  --row-hover: rgba(46,156,145,.08);
  --row-zebra: rgba(10,30,45,.025);
}

/* ── Base typography ───────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, .font-heading { text-wrap: balance; letter-spacing: -.01em; }
p { text-wrap: pretty; }
::selection { background: rgba(69,181,170,.35); color: var(--text); }

/* Money, counts and dates must align in columns */
table, .tabular, .stat-value, .kpi, [data-num] { font-variant-numeric: tabular-nums; }

/* ── Focus: one ring everywhere, keyboard-only ────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
:where(input, select, textarea):focus-visible { outline-offset: 0; }

/* ── Interaction polish ───────────────────────────────────────── */
:where(button, a, .card, .nav-link, .tab-btn, tbody tr) {
  transition-timing-function: var(--ease);
}
button:disabled, .btn-primary:disabled, .btn-secondary:disabled,
[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}
.input:disabled, select.input:disabled, textarea.input:disabled { opacity: .55; cursor: not-allowed; }
textarea.input { min-height: 96px; line-height: 1.5; }

/* ── Tables: calmer zebra, brand-tinted hover, blurred sticky head ── */
thead th { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--row-zebra); }
tbody tr:hover { background: var(--row-hover); }
tbody td { vertical-align: middle; }

/* ── Light mode: status colours that actually clear 4.5:1 ─────── */
html.light .badge-success { color: #15803D; background: rgba(34,197,94,.14);  border-color: rgba(21,128,61,.28); }
html.light .badge-warning { color: #B45309; background: rgba(245,158,11,.16); border-color: rgba(180,83,9,.30); }
html.light .badge-danger  { color: #B91C1C; background: rgba(239,68,68,.12);  border-color: rgba(185,28,28,.28); }
html.light .badge-accent  { color: #1D6FD1; background: rgba(59,167,255,.14); border-color: rgba(29,111,209,.28); }
html.light .badge-purple  { color: #6D28D9; background: rgba(139,92,246,.12); border-color: rgba(109,40,217,.28); }
html.light .btn-danger    { color: #B91C1C; }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(10,30,45,.25); }

/* ── Mobile: honour safe areas, keep tap targets ≥ 44px ───────── */
@media (max-width: 767px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .btn-primary, .btn-secondary, .btn-danger, .tab-btn { min-height: 44px; }
}

/* ── Accessibility: respect reduced motion ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}