/* ============================================================
   ClipZyn — design tokens
   Black is the stage. Sky blue is what's alive. White is what's done.
   ============================================================ */

:root {
  /* --- the only three colors --- */
  --bg:        #0B0D10;   /* near-black cove */
  --ink:       #F6F8FB;   /* soft white text + surfaces */
  --accent:    #4FB8FF;   /* sky-blue: active / live / focus */

  /* honest amber, used ONLY for error + partial states */
  --amber:     #E8A24A;
  --amber-14:  rgba(232,162,74,0.14);
  --amber-40:  rgba(232,162,74,0.40);
  --amber-60:  rgba(232,162,74,0.60);

  /* promoted orphans (were hardcoded literals bypassing the token system) */
  --ground:    #06080A;   /* the deepest ground, below --bg */
  --danger:    #FF6B6B;   /* error red */

  /* --- ink at opacities (surfaces, hairlines, dim text) --- */
  --ink-02:    rgba(246,248,251,0.02);
  --ink-04:    rgba(246,248,251,0.04);
  --ink-06:    rgba(246,248,251,0.06);
  --ink-08:    rgba(246,248,251,0.08);
  --ink-12:    rgba(246,248,251,0.12);
  --ink-16:    rgba(246,248,251,0.16);
  --ink-24:    rgba(246,248,251,0.24);
  --ink-38:    rgba(246,248,251,0.38);
  --ink-55:    rgba(246,248,251,0.55);
  --ink-72:    rgba(246,248,251,0.72);
  --ink-88:    rgba(246,248,251,0.88);

  /* --- accent at opacities (glow) --- */
  --acc-08:    rgba(79,184,255,0.08);
  --acc-14:    rgba(79,184,255,0.14);
  --acc-22:    rgba(79,184,255,0.22);
  --acc-40:    rgba(79,184,255,0.40);
  --acc-60:    rgba(79,184,255,0.60);

  /* --- type --- */
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* --- motion: slow, weighted, never bounces --- */
  --t-fast:   320ms;
  --t-base:   560ms;
  --t-slow:   860ms;
  --t-cove:  1200ms;
  /* a long, decelerating curve with zero overshoot */
  --ease:        cubic-bezier(0.16, 1, 0.30, 1);
  --ease-inout:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);

  /* motion multiplier, driven by Tweaks */
  --motion: 1;

  /* --- structure --- */
  --bar-h: 64px;
  --radius: 14px;
  --radius-lg: 20px;
  --hair: rgba(246,248,251,0.10);

  /* long soft floor shadow */
  --floor: 0 40px 80px -24px rgba(0,0,0,0.85),
           0 8px 24px -12px rgba(0,0,0,0.7);
  --floor-lift: 0 70px 130px -30px rgba(0,0,0,0.92),
                0 16px 50px -16px rgba(0,0,0,0.8);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow: hidden;
}

/* tabular, lining numerals everywhere numbers live */
.tnum { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }

#root { height: 100%; }

::selection { background: var(--acc-40); color: var(--ink); }

/* --- a11y: visible keyboard focus ring (WCAG 2.4.7) --- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }   /* mouse/touch focus stays clean */

/* --- a11y: honor the OS reduced-motion preference (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* a11y helper: visually-hidden label that screen readers still announce */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* hide scrollbars but keep scroll */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-16) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--ink-12); border-radius: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* utility: the infinity cove — a subtle radial floor of light behind a single object */
.cove {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(246,248,251,0.045) 0%, rgba(246,248,251,0.012) 38%, transparent 64%),
    radial-gradient(140% 120% at 50% 128%, rgba(0,0,0,0.7) 0%, transparent 60%);
}

/* a raking cold key light from upper-left */
.rake {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 22% -8%, rgba(246,248,251,0.05), transparent 60%);
  mix-blend-mode: screen;
}

button { font-family: inherit; color: inherit; cursor: pointer; }
input, button { font-family: inherit; }

@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes floorPulse {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50%      { opacity: 0.85; transform: scaleX(1.04); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }