/* ------------------------------------------------------------------
   closet · design tokens
   One source of truth for the canvas (/) and the console (/admin).
   ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* ink — the room the closet lives in */
  --ink-900: #060608;
  --ink-800: #0a0a0d;
  --ink-700: #0e0e12;
  --ink-600: #141419;
  --ink-500: #1b1b21;

  /* surfaces — glass laid over ink */
  --surface:     rgba(255, 255, 255, 0.040);
  --surface-hi:  rgba(255, 255, 255, 0.072);
  --surface-lo:  rgba(255, 255, 255, 0.022);
  --surface-inv: #f2f1ee;

  /* hairlines — the whole system is drawn in 1px */
  --line:    rgba(255, 255, 255, 0.085);
  --line-hi: rgba(255, 255, 255, 0.190);
  --line-lo: rgba(255, 255, 255, 0.045);

  /* text — a warm greyscale, never pure white */
  --fg:   #edecea;
  --fg-2: #9d9da5;
  --fg-3: #6b6b74;
  --fg-4: #45454d;

  /* accents — lifted from the favicon's gradient */
  --acid:      #b9ff66;
  --acid-soft: rgba(185, 255, 102, 0.14);
  --acid-line: rgba(185, 255, 102, 0.42);
  --ice:       #9cd6ff;
  --ice-soft:  rgba(156, 214, 255, 0.12);
  --warn:      #ffb26b;
  --bad:       #ff7a6b;

  /* type */
  --font-sans:    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* micro-label: the recurring mono caps used for every section heading */
  --label-size: 10px;
  --label-track: 0.16em;

  /* motion */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   120ms;
  --t-med:    240ms;
  --t-slow:   480ms;

  /* elevation */
  --lift-1: 0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 10px -4px rgba(0,0,0,0.7);
  --lift-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 44px -20px rgba(0,0,0,0.9);
  --lift-3: 0 1px 0 rgba(255,255,255,0.08) inset, 0 34px 80px -26px rgba(0,0,0,0.95);

  /* radii — tight; this is a catalogue, not a widget */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
}

/* ---------- primitives shared by both apps ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* A `display` declaration outranks the UA's [hidden] rule, so anything
   we lay out with flex/grid would stay visible when hidden. */
[hidden] { display: none !important; }

.u-label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--fg-3);
}

.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* dot leaders — the catalogue-drawer motif, used in indexes and lists */
.u-leader {
  flex: 1 1 auto;
  min-width: 8px;
  align-self: center;
  border-bottom: 1px dotted var(--line-hi);
  opacity: 0.55;
}

:focus-visible {
  outline: 1px solid var(--acid);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--acid); color: var(--ink-900); }

/* scrollbars, quietly */
* { scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}