/* ─────────────────────────────────────────────────────────
   Autzu Admin — design tokens
   Aligned with the Autzu Fleet design system so Admin + Fleet
   read as one product family.

   Source of truth for shared brand tokens lives in the Fleet
   project (assets/autzu-tokens.css). This file mirrors those
   values and additionally exposes the legacy admin variable
   names (--bg-app, --bg-surface, --accent, --text, etc.) so
   existing screen-*.jsx files keep working unchanged.
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Map "Inter Display" alias to Inter Tight (matches Fleet) */
@font-face {
  font-family: 'Inter Display';
  src: local('Inter Tight');
  font-weight: 100 900;
  font-style: normal;
}

:root {
  /* ───── Brand tokens (mirror of Fleet) ───── */
  --ink:       #0B1220;
  --ink-2:     #1B2230;
  --ink-3:     #2A3140;

  --fg-1:      #0B1220;
  --fg-2:      #2A3140;
  --fg-3:      #5A6473;
  --fg-4:      #8A93A1;

  --bg:        #FFFFFF;
  --bg-2:      #F6F6F4;
  --bg-3:      #EFEFEB;

  --hair:      #E8E8E4;
  --hair-2:    #D9D9D3;

  --ok:        #1F7A4D;
  --warn:      #B4863A;
  --err:       #B2402F;
  --info:      #2A3F8F;

  /* ───── Type ───── */
  --font-serif: 'Inter Display', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: var(--font-serif);
  --sans:  var(--font-sans);
  --mono:  var(--font-mono);

  --track-tight:   -0.035em;
  --track-h2:      -0.03em;
  --track-h3:      -0.02em;
  --track-normal:  -0.005em;
  --track-eyebrow:  0.16em;

  --lh-tight: 1.05;
  --lh-snug:  1.3;
  --lh-body:  1.5;

  /* ───── Density / radii / spacing ───── */
  --row-h: 48px;
  --row-pad-y: 12px;
  --row-pad-x: 16px;
  --gap-tight: 6px;
  --gap: 12px;
  --gap-loose: 20px;
  --gap-section: 32px;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ───── Motion ───── */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 180ms;
  --dur:      240ms;
  --dur-slow: 500ms;

  /* ───── Shadows (subtle, warm) ───── */
  --shadow-sm: 0 1px 2px rgba(11,18,32,0.04);
  --shadow:    0 4px 24px -8px rgba(11,18,32,0.08), 0 1px 2px rgba(11,18,32,0.04);
  --shadow-lg: 0 24px 64px -24px rgba(11,18,32,0.18), 0 2px 8px rgba(11,18,32,0.04);

  /* ───── Legacy admin aliases (re-mapped to brand tokens) ───── */
  --bg-app:        var(--bg-2);
  --bg-surface:    var(--bg);
  --bg-elevated:   var(--bg);
  --bg-sunk:       var(--bg-3);
  --bg-rail:       var(--bg);
  --bg-rail-active:var(--bg-2);
  --bg-row-hover:  var(--bg-2);
  --bg-row-selected: rgba(42, 63, 143, 0.06);

  --border:        var(--hair);
  --border-strong: var(--hair-2);
  --divider:       var(--hair);

  --text:         var(--fg-2);
  --text-strong:  var(--ink);
  --text-muted:   var(--fg-3);
  --text-subtle:  var(--fg-4);
  --text-on-rail: var(--fg-2);
  --text-on-accent: #ffffff;

  /* "Accent" in admin maps to brand ink so primary buttons / focus
     pick up the dark-navy treatment Fleet uses. */
  --accent:        var(--ink);
  --accent-strong: #000000;
  --accent-soft:   var(--bg-3);
  --accent-fg:     #ffffff;

  /* Semantic aliases */
  --success:        var(--ok);
  --success-soft:   rgba(31, 122, 77, 0.10);
  --success-strong: var(--ok);
  --warning:        var(--warn);
  --warning-soft:   rgba(180, 134, 58, 0.12);
  --danger:         var(--err);
  --danger-soft:    rgba(178, 64, 47, 0.10);
  --info-soft:      rgba(42, 63, 143, 0.10);
  --violet:         #6B4FB8;
  --violet-soft:    rgba(107, 79, 184, 0.12);
}

[data-theme="dark"] {
  /* Fleet's ops-floor dark mode */
  --bg:        #0B1220;
  --bg-2:      #0F1626;
  --bg-3:      #161E30;
  --hair:      rgba(255,255,255,0.08);
  --hair-2:    rgba(255,255,255,0.16);

  --fg-1:      #F2F4F8;
  --fg-2:      #DCE0E8;
  --fg-3:      #94A0B5;
  --fg-4:      #6B7689;

  --ink:       #F2F4F8;
  --ink-2:     #DCE0E8;
  --ink-3:     #B0BACC;

  /* legacy aliases recompute via var() so most pick up automatically;
     a few need explicit overrides for sensible dark look */
  --bg-row-selected: rgba(94, 145, 255, 0.14);
  --accent:        #F2F4F8;   /* invert: light "ink" on dark */
  --accent-strong: #ffffff;
  --accent-fg:     #0B1220;
  --accent-soft:   rgba(255,255,255,0.10);

  --success-soft:  rgba(31, 122, 77, 0.18);
  --warning-soft:  rgba(180, 134, 58, 0.20);
  --danger-soft:   rgba(178, 64, 47, 0.20);
  --info-soft:     rgba(120, 150, 255, 0.18);

  --shadow-sm: 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow:    0 8px 24px -12px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 64px -24px rgba(0,0,0,0.7);
}

[data-density="compact"] {
  --row-h: 40px;
  --row-pad-y: 8px;
  --row-pad-x: 12px;
  --gap: 8px;
  --gap-loose: 14px;
  --gap-section: 22px;
}

/* base */
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -0.005em;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-radius: 4px;
}
[data-theme="dark"] :focus-visible { outline-color: #fff; }

::selection { background: var(--ink); color: #fff; }
[data-theme="dark"] ::selection { background: #F2F4F8; color: #0B1220; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 999px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }

/* utility */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.tnum { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); letter-spacing: -0.02em; }
.muted { color: var(--fg-3); }
.subtle { color: var(--fg-4); }
.strong { color: var(--ink); font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.sr-only { position: absolute; left: -9999px; }

/* eyebrow / caption helpers */
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  font-weight: 500;
}

/* tiny components */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--bg-2); border: 1px solid var(--hair);
  border-radius: 4px; font-size: 10.5px; color: var(--fg-4);
  font-family: var(--mono);
}

.divider { height: 1px; background: var(--hair); }
.vdivider { width: 1px; align-self: stretch; background: var(--hair); }

/* skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-3) 0%, var(--hair) 50%, var(--bg-3) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 4px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes autzuPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }