/* ============================================================
   ABIS Design System — Tokens
   Spacing (6px base), radii, shadows, motion, z-index, scrollbars.
   Canonical per theme.ts.
   ============================================================ */

:root {
  /* ---------- Spacing scale (6px base · theme.spacing(n) = n*6) ---------- */
  --sp-base: 6px;
  --sp-xs: 6px;
  --sp-sm: 12px;
  --sp-md: 22px;
  --sp-lg: 48px;
  --sp-xl: 64px;

  /* Theme.spacing(n) lookups — use only these multiples */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 24px;
  --sp-5: 30px;
  --sp-6: 36px;
  --sp-8: 48px;
  --sp-10: 60px;
  --sp-12: 72px;

  /* ---------- Radii ---------- */
  --r-0: 0;            /* drawer (flush edges) */
  --r-button: 4px;     /* buttons, chips, tooltips */
  --r-chip: 4px;
  --r-input: 8px;      /* cards, paper, textfield */
  --r-card: 8px;
  --r-global: 12px;    /* default + dialogs */
  --r-dialog: 12px;

  /* ---------- Shadows (mode-aware via .dark) ---------- */
  --sh-card:        0 2px 4px rgba(0,0,0,0.10);
  --sh-button-hover:0 2px 4px rgba(0,0,0,0.20);
  --sh-neon-sm:     0 0 8px  var(--neon-primary);
  --sh-neon-md:     0 0 12px var(--neon-primary);

  /* ---------- Motion ---------- */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-sharp:  cubic-bezier(0.4, 0, 0.6, 1);

  --dur-shortest: 150ms;
  --dur-short:    250ms;
  --dur-standard: 300ms;
  --dur-complex:  375ms;
  --dur-default:  200ms;

  --tx-default: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --tx-press: transform 80ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-index layers ---------- */
  --z-appBar:   1100;
  --z-drawer:   1200;
  --z-modal:    1300;
  --z-snackbar: 1400;
  --z-tooltip:  1500;
}

/* Dark mode bumps to a white-tinted card shadow + neon-aware glow */
.dark, [data-theme="dark"] {
  --sh-card:        0 2px 4px rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.4);
  --sh-button-hover:0 3px 8px rgba(0,0,0,0.40);
  --sh-neon-sm:     0 0 8px  var(--neon-primary);
  --sh-neon-md:     0 0 12px var(--neon-primary);
}

/* ============================================================
   Scrollbar treatments — three variants (signature element)
   ============================================================ */

/* default — everywhere */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-orange) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--c-orange-light);
  border-radius: 999px;
}
.dark *::-webkit-scrollbar-thumb {
  background: rgba(255,170,45,0.30);
}
.dark *::-webkit-scrollbar-thumb:hover {
  background: rgba(255,170,45,0.55);
  box-shadow: 0 0 8px var(--neon-dark-primary);
}

/* .custom-scroll — long content panels */
.custom-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--c-green);
  border-radius: 999px;
}
.dark .custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(144,221,60,0.40);
}
.dark .custom-scroll::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 10px var(--neon-dark-secondary);
}

/* .neon-scroll — hero / feature surfaces */
.neon-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.neon-scroll::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255,170,45,0.05), rgba(144,221,60,0.05));
}
.neon-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-orange) 0%, var(--c-green) 100%);
  border-radius: 999px;
  box-shadow: 0 0 8px var(--neon-primary), 0 0 12px var(--neon-secondary);
}
.neon-scroll::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 12px var(--neon-primary), 0 0 18px var(--neon-secondary);
}