globals.css

/* src/app/globals.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme inline {
  /* Fonts */
  --font-sans: var(--font-archivo), system-ui, sans-serif;
  --font-mono: var(--font-mono), monospace;

  /* ── Layer 1: Raw color palette ──────────────────────────────────────
   * Ground-truth OKLCH values. The only place a raw color appears.
   * Tailwind v4 generates text-cyan, bg-amber, border-red, etc.
   */

  /* Hues */
  --color-cyan: oklch(80.43% 0.1459 219.52); /* #01d4ff */
  --color-amber: oklch(76.86% 0.1647 70.08); /* #f59e0b */
  --color-red: oklch(63.68% 0.2078 25.33); /* #ef4444 */
  --color-green: oklch(69.59% 0.1491 162.48); /* #10b981 */
  --color-lime: oklch(72.27% 0.192 149.58); /* #22c55e */
  --color-violet: oklch(60.56% 0.2189 292.72); /* #8b5cf6 */
  --color-sky: oklch(71.48% 0.1257 215.22); /* #06b6d4 */

  /* Surfaces — dark purple-gray. Neumorphism: light/dark pair for depth. */
  --color-surface-900: oklch(22.9% 0.0155 279.49); /* #1b1c24 */
  --color-surface-800: oklch(24.55% 0.0174 275.22); /* #1e2029 */
  --color-surface-700: oklch(28.82% 0.0221 277.51); /* #282a36 */
  --color-surface-600: oklch(31.52% 0.0323 279.44); /* #2e3042 */
  --color-surface-500: oklch(33.87% 0.0317 279.61); /* #343648 */
  --color-surface-400: oklch(34.45% 0.0283 276.51); /* #353848 */

  /* Text grays */
  --color-gray-50: oklch(92.88% 0.0126 255.51); /* #e2e8f0 */
  --color-gray-400: oklch(71.07% 0.0351 256.79); /* #94a3b8 */
  --color-gray-500: oklch(55.44% 0.0407 257.42); /* #64748b */
  --color-gray-600: oklch(44.55% 0.0374 257.28); /* #475569 */

  /* ── Layer 2: Semantic aliases ─────────────────────────────────────────
   * Intent-named tokens. Use text-accent, bg-danger, border-warn, etc.
   */

  /* Surfaces */
  --color-base: var(--color-surface-700);
  --color-raised: var(--color-surface-700);
  --color-elevated: var(--color-surface-600);
  --color-overlay: var(--color-surface-500);
  --color-control-bg: var(--color-surface-800);

  /* Text hierarchy */
  --color-primary: var(--color-gray-50);
  --color-secondary: var(--color-gray-400);
  --color-tertiary: var(--color-gray-500);
  --color-muted: var(--color-gray-600);

  /* Semantic status */
  --color-accent: var(--color-cyan);
  --color-warn: var(--color-amber);
  --color-danger: var(--color-red);
  --color-success: var(--color-green);

  /* Dim/glow variants */
  --color-accent-dim: oklch(80.43% 0.1459 219.52 / 0.15); /* #01d4ff 15% */
  --color-accent-glow: oklch(80.43% 0.1459 219.52 / 0.3); /* #01d4ff 30% */
  --color-warn-dim: oklch(76.86% 0.1647 70.08 / 0.15); /* #f59e0b 15% */
  --color-danger-dim: oklch(63.68% 0.2078 25.33 / 0.15); /* #ef4444 15% */
  --color-success-dim: oklch(69.59% 0.1491 162.48 / 0.15); /* #10b981 15% */

  /* Borders */
  --color-border: oklch(71.07% 0.0351 256.79 / 0.08); /* #94a3b8 8% */
  --color-border-soft: oklch(71.07% 0.0351 256.79 / 0.04); /* #94a3b8 4% */
  --color-border-emphasis: oklch(71.07% 0.0351 256.79 / 0.15); /* #94a3b8 15% */

  /* Controls */
  --color-control-border: oklch(71.07% 0.0351 256.79 / 0.08); /* #94a3b8 8% */
  --color-control-focus: oklch(80.43% 0.1459 219.52 / 0.5); /* #01d4ff 50% */

  /* ── Layer 3: Purpose aliases ──────────────────────────────────────────
   * Domain-specific meaning for data visualization.
   * Generates text-upload, bg-download, border-positive, etc.
   */
  --color-upload: var(--color-cyan);
  --color-download: var(--color-amber);
  --color-positive: var(--color-lime);
  --color-negative: var(--color-red);
  --color-neutral: var(--color-gray-400);
  --color-tracker-default: var(--color-cyan);

  /* Ordinal scale — ratio tiers, seed-time tiers */
  --color-scale-1: var(--color-red);
  --color-scale-2: var(--color-amber);
  --color-scale-3: var(--color-green);
  --color-scale-4: var(--color-cyan);
  --color-scale-5: var(--color-violet);
  --color-scale-6: var(--color-sky);

  /* Glow shadows */
  --shadow-glow: 0 0 16px var(--color-accent-glow);
  --shadow-glow-sm: 0 0 8px var(--color-accent-glow);
  --shadow-glow-lg: 0 0 28px var(--color-accent-glow);
  --shadow-glow-warn: 0 0 16px var(--color-warn-dim);
  --shadow-glow-danger: 0 0 16px var(--color-danger-dim);
  --shadow-glow-success: 0 0 16px var(--color-success-dim);

  /* Border radius — bubbly */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Sub-xs font sizes for dense data UI.
   * text-3xs and text-2xs are intentionally the same value today (10px).
   * text-2xs covers former 11px contexts (table cells, pills).
   * If dense tables feel too tight, bump --text-2xs to 11px — one-line change. */
  --text-4xs: 9px;
  --text-3xs: 10px;
  --text-2xs: 10px;
}

/* Custom radius utilities matching design system tokens */
@utility rounded-nm-sm {
  border-radius: var(--radius-sm);
}
@utility rounded-nm-md {
  border-radius: var(--radius-md);
}
@utility rounded-nm-lg {
  border-radius: var(--radius-lg);
}
@utility rounded-nm-xl {
  border-radius: var(--radius-xl);
}
@utility rounded-nm-pill {
  border-radius: var(--radius-pill);
}

/*
 * Neumorphic shadow utilities — registered as @utility so Tailwind v4
 * generates variant classes (hover:nm-raised, active:nm-pressed, etc.).
 * Base: #282A36. Generated via neumorphism.io.
 *
 * IMPORTANT: overflow-hidden on a parent CLIPS these shadows. If you nest
 * nm-raised elements inside an overflow-hidden container, use the p-N/-m-N
 * trick to push the clip boundary out. Shadow reach per variant:
 *   nm-raised-sm: ~12px  (use p-3 -m-3)
 *   nm-raised:    ~24px  (use p-6 -m-6)
 *   nm-raised-lg: ~36px  (use p-9 -m-9)
 */
@utility nm-raised {
  box-shadow:
    -8px -8px 16px oklch(34.45% 0.0283 276.51),
    /* #353848 */ 8px 8px 16px oklch(22.9% 0.0155 279.49); /* #1b1c24 */
}

@utility nm-raised-sm {
  box-shadow:
    -4px -4px 8px oklch(33.24% 0.0268 276.01),
    /* #323544 */ 4px 4px 8px oklch(24.23% 0.0172 280.05); /* #1e1f28 */
}

@utility nm-raised-lg {
  box-shadow:
    -12px -12px 24px oklch(36.85% 0.0312 277.36),
    /* #3b3e50 */ 12px 12px 24px oklch(20.19% 0.0121 277.81); /* #15161c */
}

@utility nm-inset {
  box-shadow:
    inset 4px 4px 8px oklch(19.74% 0.0121 277.78),
    /* #14151b */ inset -4px -4px 8px oklch(37.23% 0.0311 277.38); /* #3c3f51 */
}

@utility nm-inset-sm {
  box-shadow:
    inset 2px 2px 5px oklch(24.55% 0.0174 275.22),
    /* #1e2029 */ inset -2px -2px 5px oklch(32.94% 0.0266 278.88); /* #323443 */
}

@utility nm-pressed {
  box-shadow:
    inset 4px 4px 10px oklch(19.74% 0.0121 277.78),
    /* #14151b */ inset -2px -2px 5px oklch(32.94% 0.0266 278.88); /* #323443 */
}

/* Tracker color accent glow — corner-pooling inset glow via pseudo-element
 * so it doesn't conflict with the card's nm-raised box-shadow. Four offset
 * shadows concentrate light in the corners and fade along the edges.
 * Color passed as --card-accent via inline style. */
@utility card-accent {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
      inset 5px 5px 14px -5px var(--card-accent, transparent),
      inset -3px -3px 14px -8px var(--card-accent, transparent),
      inset 1px 1px 2px 0 rgba(255, 255, 255, 0.05),
      inset -1px -1px 2px 0 rgba(255, 255, 255, 0.015);
    pointer-events: none;
  }
}

@utility slot-label {
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}

/* ─── Typography utilities ─── */

@utility card-heading {
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@utility timestamp {
  font-size: var(--text-3xs);
  font-family: var(--font-mono);
  color: var(--color-muted);
}

@utility tabular-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
  font-size: var(--text-xs);
}

@utility torrent-cell {
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  color: var(--color-muted);
}

@utility ghost-link {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-tertiary);
  cursor: pointer;
  transition: color 150ms;
  &:hover {
    color: var(--color-secondary);
  }
}

@utility description-text {
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  color: var(--color-tertiary);
  line-height: 1.625;
}

@utility danger-confirm-text {
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-primary);
  line-height: 1.625;
}

@utility progress-footnote {
  font-size: var(--text-3xs);
  font-family: var(--font-mono);
  color: var(--color-muted);
  text-align: right;
}

/* ─── Native dialog backdrop ─── */

dialog[data-overlay]::backdrop {
  background: rgb(0 0 0 / 0.6);
  opacity: 0;
  transition: opacity 150ms ease-in;
}

dialog[data-overlay][data-visible]::backdrop {
  opacity: 1;
  transition: opacity 200ms ease-out;
}

/* ─── Interactive utilities ─── */

@utility help-icon {
  cursor: help;
  font-size: var(--text-4xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  border: 1px solid currentColor;
}

@utility tooltip-icon {
  color: var(--color-muted);
  cursor: help;
  font-size: var(--text-sm);
  transition: color 150ms;
  &:hover {
    color: var(--color-secondary);
  }
}

/* ─── Structural utilities ─── */

@utility color-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

@utility form-responsive-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  @media (min-width: 640px) {
    flex-direction: row;
    align-items: flex-end;
  }
}

@utility full-page-loader {
  display: flex;
  height: 100%;
  min-height: calc(100vh - 6rem);
  align-items: center;
  justify-content: center;
}

@utility lazy-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
}

/*
 * Neumorphic interactive states — for clickable raised surfaces.
 * Three tiers matching elevation: sm (cards), base (panels), inset (dormant links).
 * Each transitions: rest → hover (raise higher) → active (press inward + scale).
 * These replace static nm-raised-* classes on interactive elements.
 */
.nm-interactive-sm {
  box-shadow:
    -4px -4px 8px oklch(33.24% 0.0268 276.01),
    /* #323544 */ 4px 4px 8px oklch(24.23% 0.0172 280.05); /* #1e1f28 */
  transition:
    box-shadow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nm-interactive-sm:hover {
  box-shadow:
    -4px -4px 8px oklch(31.67% 0.0271 275.92),
    /* #2e3140 */ 5px 5px 9px oklch(23.8% 0.0173 280.02); /* #1d1e27 */
  transform: scale(1.01);
}
.nm-interactive-sm:active {
  box-shadow:
    inset 2px 2px 6px oklch(21.5% 0.0119 277.89),
    /* #18191f */ inset -2px -2px 4px oklch(31.42% 0.0287 279.05); /* #2e3040 */
  transform: scale(0.99);
}

.nm-interactive-inset {
  box-shadow:
    inset 2px 2px 5px oklch(24.55% 0.0174 275.22),
    /* #1e2029 */ inset -2px -2px 5px oklch(32.94% 0.0266 278.88); /* #323443 */
  transition:
    box-shadow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nm-interactive-inset:hover {
  box-shadow:
    -2px -2px 5px oklch(31.67% 0.0271 275.92),
    /* #2e3140 */ 3px 3px 6px oklch(25.07% 0.017 280.1); /* #20212a */
  transform: scale(1.01);
}
.nm-interactive-inset:active {
  box-shadow:
    inset 2px 2px 6px oklch(21.5% 0.0119 277.89),
    /* #18191f */ inset -2px -2px 4px oklch(31.42% 0.0287 279.05); /* #2e3040 */
  transform: scale(0.99);
}

/* Glow animation for pulse dots */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 5px currentColor);
  }
  50% {
    opacity: 0.7;
    filter: drop-shadow(0 0 12px currentColor);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

@keyframes jiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-0.5deg);
  }
  75% {
    transform: rotate(0.5deg);
  }
}

.animate-jiggle {
  animation: jiggle 0.3s ease-in-out infinite;
}

@keyframes loading-breathe {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

.animate-loading-breathe {
  animation: loading-breathe 2s ease-in-out infinite;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-scroll {
  animation: marquee-scroll 12s linear infinite;
}
.marquee-scroll:hover {
  animation-play-state: paused;
}

/* Carousel slide animations — used by DownloadClientStatusWidget */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Alert banner entrance — subtle slide from left */
@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Override browser/password-manager autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:autofill,
input:autofill:hover,
input:autofill:focus,
textarea:autofill,
select:autofill {
  -webkit-box-shadow: 0 0 0 1000px oklch(24.55% 0.0174 275.22) inset; /* control-bg — Chromium */
  box-shadow: 0 0 0 1000px oklch(24.55% 0.0174 275.22) inset; /* control-bg — Firefox/standard */
  -webkit-text-fill-color: oklch(92.88% 0.0126 255.51); /* primary text */
  color: oklch(92.88% 0.0126 255.51) !important;
  background-color: oklch(24.55% 0.0174 275.22) !important;
  caret-color: oklch(92.88% 0.0126 255.51);
  transition: background-color 5000s ease-in-out 0s;
}

/* Hide native number input spinners — we use custom NumberInput controls */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Select elements use pointer cursor since they open a dropdown */
select {
  cursor: pointer;
}

/* Page scrollbar — picks up --scrollbar-color from nearest ancestor (tracker page sets it) */
.themed-scrollbar {
  --scrollbar-color: oklch(34.45% 0.0283 276.51); /* #353848 */
  --scrollbar-hover: oklch(40.24% 0.0439 279.12); /* #434660 */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) transparent;
}
.themed-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.themed-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.themed-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 9999px;
}
.themed-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

/* Inner horizontal scrollbars on tables/code — always subtle */
.styled-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: oklch(34.45% 0.0283 276.51) /* #353848 */ transparent;
}
.styled-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.styled-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.styled-scrollbar::-webkit-scrollbar-thumb {
  background: oklch(34.45% 0.0283 276.51); /* #353848 */
  border-radius: 9999px;
}
.styled-scrollbar::-webkit-scrollbar-thumb:hover {
  background: oklch(40.24% 0.0439 279.12); /* #434660 */
}

.styled-scrollbar-visible {
  scrollbar-width: thin;
  scrollbar-color: oklch(34.45% 0.0283 276.51) /* #353848 */ oklch(22.44% 0.0168 277.68)
    /* #1e2029 */;
}
.styled-scrollbar-visible::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.styled-scrollbar-visible::-webkit-scrollbar-track {
  background: oklch(22.44% 0.0168 277.68); /* #1e2029 control-bg */
  border-radius: 9999px;
}
.styled-scrollbar-visible::-webkit-scrollbar-thumb {
  background: oklch(34.45% 0.0283 276.51); /* #353848 */
  border-radius: 9999px;
}
.styled-scrollbar-visible::-webkit-scrollbar-thumb:hover {
  background: oklch(40.24% 0.0439 279.12); /* #434660 */
}

/* react-colorful overrides */
.color-picker-wrapper .react-colorful {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.color-picker-wrapper .react-colorful__saturation {
  border-radius: var(--radius-sm);
  border-bottom: none;
}
.color-picker-wrapper .react-colorful__hue {
  height: 10px;
  border-radius: var(--radius-pill);
  margin-top: 8px;
}
.color-picker-wrapper .react-colorful__pointer {
  width: 16px;
  height: 16px;
  border: 2px solid oklch(100% 0 0); /* #ffffff */
  box-shadow: 0 0 4px oklch(0% 0 0 / 0.4); /* #000000 40% */
}

/* Emoji picker theme overrides */
.emoji-picker-wrapper .EmojiPickerReact.epr-dark-theme {
  --epr-bg-color: oklch(31.52% 0.0323 279.44); /* #2e3042 */
  --epr-category-label-bg-color: oklch(31.52% 0.0323 279.44); /* #2e3042 */
  --epr-hover-bg-color: oklch(33.87% 0.0317 279.61); /* #343648 */
  --epr-search-input-bg-color: oklch(24.55% 0.0174 275.22); /* #1e2029 */
  --epr-text-color: oklch(92.88% 0.0126 255.51); /* #e2e8f0 */
  --epr-search-input-text-color: oklch(92.88% 0.0126 255.51); /* #e2e8f0 */
  --epr-search-input-placeholder-color: oklch(55.44% 0.0407 257.42); /* #64748b */
  --epr-category-icon-active-color: oklch(80.43% 0.1459 219.52); /* #01d4ff */
  --epr-skin-tone-picker-menu-color: oklch(33.87% 0.0317 279.61); /* #343648 */
  border-radius: var(--radius-md);
  border: 1px solid oklch(37.23% 0.0311 277.38); /* #3c3f51 */
}