/* ============================================================
   AI Systems Store — Design Tokens & Base
   Light, premium, business-trustworthy. Violet/indigo brand.
   ============================================================ */

:root {
  /* ---- Brand accent (tweakable) ---- */
  --primary-h: 293;
  --primary: oklch(0.55 0.215 var(--primary-h));
  --primary-hover: oklch(0.49 0.22 var(--primary-h));
  --primary-press: oklch(0.44 0.21 var(--primary-h));
  --primary-soft: oklch(0.96 0.028 var(--primary-h));
  --primary-soft-2: oklch(0.93 0.045 var(--primary-h));
  --primary-border: oklch(0.86 0.07 var(--primary-h));
  --on-primary: #ffffff;

  --deep: oklch(0.34 0.10 282);
  --lavender: oklch(0.72 0.11 295);

  /* ---- Neutrals (cool, faint purple tint) ---- */
  --bg: oklch(0.984 0.005 290);
  --surface: #ffffff;
  --surface-2: oklch(0.975 0.006 290);
  --surface-3: oklch(0.962 0.008 290);
  --border: oklch(0.922 0.008 290);
  --border-strong: oklch(0.86 0.012 290);
  --text: oklch(0.255 0.022 286);
  --text-muted: oklch(0.52 0.02 286);
  --text-faint: oklch(0.66 0.016 286);

  /* ---- Status ---- */
  --success: oklch(0.60 0.13 158);
  --success-soft: oklch(0.95 0.04 158);
  --warning: oklch(0.70 0.14 67);
  --warning-soft: oklch(0.96 0.05 75);
  --danger: oklch(0.57 0.20 25);
  --danger-soft: oklch(0.95 0.04 25);
  --info: oklch(0.58 0.13 250);
  --info-soft: oklch(0.95 0.035 250);

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 11px;
  --r-lg: 15px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-pill: 999px;

  /* ---- Shadow / elevation ---- */
  --sh-xs: 0 1px 2px oklch(0.4 0.03 286 / 0.05);
  --sh-sm: 0 1px 2px oklch(0.4 0.03 286 / 0.06), 0 1px 3px oklch(0.4 0.03 286 / 0.07);
  --sh: 0 2px 4px oklch(0.4 0.03 286 / 0.05), 0 4px 12px oklch(0.4 0.03 286 / 0.08);
  --sh-lg: 0 8px 24px oklch(0.4 0.04 286 / 0.10), 0 2px 6px oklch(0.4 0.03 286 / 0.06);
  --sh-xl: 0 20px 48px oklch(0.35 0.05 286 / 0.16), 0 6px 16px oklch(0.4 0.03 286 / 0.08);
  --glow: 0 0 0 1px var(--primary-border), 0 8px 28px oklch(0.55 0.18 var(--primary-h) / 0.22);

  /* ---- Type ---- */
  --font: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- Layout ---- */
  --sidebar-w: 252px;
  --topbar-h: 64px;
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
}
#root { min-height: 100vh; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.018em; color: var(--text); }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--primary-soft-2); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Brand gradient text ---- */
.brand-grad {
  background: linear-gradient(120deg, oklch(0.55 0.23 293), oklch(0.42 0.16 280));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Utility ---- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }

/* ---- Focus ring ---- */
.focusable:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- Skeleton shimmer ---- */
@keyframes shimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
.skel {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 920px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-xs);
}

/* ---- Animations ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.96) translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes barflow { 0% { background-position: 0 0; } 100% { background-position: 32px 0; } }
.anim-fadeup { animation: fadeUp 0.4s cubic-bezier(0.22,1,0.36,1); }
.anim-fadein { animation: fadeIn 0.3s ease both; }
.anim-pop { animation: pop 0.22s cubic-bezier(0.22,1,0.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}