/* PHNX590 Web — shared design tokens. */
:root,
html[data-theme="phnx-dark"] {
  color-scheme: dark;
  --ui-font: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --ui-bg-0: #05060d;
  --ui-bg-1: #080b16;
  --ui-bg-2: #0d1221;
  --ui-surface-0: rgba(10, 14, 27, 0.8);
  --ui-surface-1: rgba(15, 21, 38, 0.78);
  --ui-surface-2: rgba(22, 30, 52, 0.8);
  --ui-surface-solid: #101625;
  --ui-surface-hover: rgba(31, 41, 68, 0.84);
  --ui-text-strong: #f8f9ff;
  --ui-text: #dce2f1;
  --ui-text-muted: #929db4;
  --ui-text-faint: #616c84;
  --ui-border: rgba(166, 184, 224, 0.13);
  --ui-border-strong: rgba(174, 196, 241, 0.25);
  --ui-fire: #ff653b;
  --ui-fire-bright: #ffae36;
  --ui-fire-soft: rgba(255, 101, 59, 0.14);
  --ui-cyan: #52e5f7;
  --ui-cyan-soft: rgba(82, 229, 247, 0.12);
  --ui-violet: #8274ff;
  --ui-violet-soft: rgba(130, 116, 255, 0.13);
  --ui-pink: #ff5b9f;
  --ui-success: #48e1a3;
  --ui-success-soft: rgba(72, 225, 163, 0.12);
  --ui-warning: #ffbd55;
  --ui-warning-soft: rgba(255, 189, 85, 0.13);
  --ui-danger: #ff6177;
  --ui-danger-soft: rgba(255, 97, 119, 0.13);
  --ui-gradient-brand: linear-gradient(135deg, #ffb23f 0%, #ff6239 44%, #e93058 100%);
  --ui-gradient-tech: linear-gradient(135deg, #52e5f7 0%, #6e8dff 50%, #a36df5 100%);
  --ui-gradient-panel: linear-gradient(145deg, rgba(22, 29, 50, 0.9), rgba(8, 12, 24, 0.78));
  --ui-radius-xs: 0.55rem;
  --ui-radius-sm: 0.78rem;
  --ui-radius-md: 1rem;
  --ui-radius-lg: 1.35rem;
  --ui-radius-xl: 1.8rem;
  --ui-radius-pill: 999px;
  --ui-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.22);
  --ui-shadow-md: 0 22px 60px rgba(0, 0, 0, 0.3);
  --ui-shadow-lg: 0 34px 100px rgba(0, 0, 0, 0.44);
  --ui-shadow-fire: 0 0 38px rgba(255, 101, 59, 0.15);
  --ui-neon-cyan: 0 0 0 1px rgba(82, 229, 247, 0.18), 0 0 22px rgba(82, 229, 247, 0.13);
  --ui-neon-fire: 0 0 0 1px rgba(255, 101, 59, 0.18), 0 0 24px rgba(255, 101, 59, 0.18);
  --ui-neon-mixed: 0 0 0 1px rgba(255, 139, 72, 0.14), 0 0 26px rgba(82, 229, 247, 0.1), 0 0 36px rgba(255, 101, 59, 0.1);
  --ui-shadow-focus: 0 0 0 3px rgba(82, 229, 247, 0.15), 0 0 0 1px rgba(82, 229, 247, 0.68);
  --ui-blur: 22px;
  --ui-fast: 140ms;
  --ui-duration: 240ms;
  --ui-slow: 480ms;
  --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* Legacy variables inherit the new system. */
  --bg: var(--ui-bg-0);
  --panel: var(--ui-surface-solid);
  --panel-soft: var(--ui-surface-2);
  --line: var(--ui-border);
  --line-strong: var(--ui-border-strong);
  --muted: var(--ui-text-muted);
  --cyan: var(--ui-cyan);
  --blue: #678cff;
  --pink: var(--ui-pink);
  --red: var(--ui-danger);
  --amber: var(--ui-warning);
  --green: var(--ui-success);
}

html {
  font-family: var(--ui-font);
  color: var(--ui-text);
  background: var(--ui-bg-0);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ui-fire) 46%, transparent) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: color-mix(in srgb, var(--ui-fire) 46%, transparent);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ui-fire-bright) 62%, transparent);
  background-clip: padding-box;
}

::selection { color: #fff; background: rgba(255, 101, 59, 0.65); }