/* CloudNext token layer — retunes Nocturne's variables to the CloudNext palette.
   Loaded after the Nocturne stylesheet. Components keep using var(--color-*) etc. */
:root {
  --color-bg: #0b1016;
  --color-nav: #111923;
  --color-surface: #17222d;
  --color-surface-2: #1c2935;
  --color-elevated: #21303f;
  --color-border: #2b3846;
  --color-text: #eef3f8;
  --color-text-2: #98aabd;
  --color-text-3: #6f8296;
  --color-accent: #4e8bfa;
  --color-accent-2: #60dbdf;
  --color-danger: #e2555d;
  --color-danger-900: #3a1a1f;
  --color-warning: #e8b44f;
  --color-success: #4fc59a;
  --color-divider: #2b3846;

  --color-neutral-100: #eef3f8;
  --color-neutral-200: #d6dfe8;
  --color-neutral-300: #b8c6d4;
  --color-neutral-400: #98aabd;
  --color-neutral-500: #7a8da1;
  --color-neutral-600: #5d6f82;
  --color-neutral-700: #435263;
  --color-neutral-800: #2b3846;
  --color-neutral-900: #17222d;

  --color-accent-100: #eef4ff;
  --color-accent-200: #dce8ff;
  --color-accent-300: #b9d1ff;
  --color-accent-400: #84aefc;
  --color-accent-500: #4e8bfa;
  --color-accent-600: #3a6fd0;
  --color-accent-700: #2c56a3;
  --color-accent-800: #1f3d74;
  --color-accent-900: #142744;

  --color-accent-2-100: #ecfcfc;
  --color-accent-2-200: #d0f6f7;
  --color-accent-2-300: #a7eef0;
  --color-accent-2-400: #7fe5e8;
  --color-accent-2-500: #60dbdf;
  --color-accent-2-600: #3fb3b7;
  --color-accent-2-700: #2d8689;
  --color-accent-2-800: #1f5b5e;
  --color-accent-2-900: #133638;

  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-sm: 0 0 0 1px #2b3846;
  --shadow-md: 0 0 0 1px #2b3846, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 0 0 1px #35455a, 0 20px 48px rgba(0,0,0,0.6);
  --ease: cubic-bezier(.16,1,.3,1);
  /* Radius */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;
  /* Motion — micro 120–220ms, panels 180–320ms, page 300–500ms */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 420ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.36,.64,1);
  /* Type scale */
  --text-xs: 11px; --text-sm: 12.5px; --text-md: 14px; --text-lg: 15.5px; --text-xl: 20px; --text-2xl: 28px;
}
html, body { height: 100%; }
body { background: var(--color-bg); color: var(--color-text); font-size: 14px; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.btn, .tag { white-space: nowrap; }
a { color: var(--color-accent-400); transition: color var(--dur-1); }
a:hover { color: var(--color-accent-300); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #243140; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #33455a; background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn { transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.btn:active:not(:disabled) { transform: scale(.97); }
.input { transition: border-color var(--dur-1), box-shadow var(--dur-2); }
.input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-2) 50%), linear-gradient(135deg, var(--color-text-2) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.seg-opt { transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-2); }
@keyframes cn-spin { to { transform: rotate(360deg); } }
@keyframes cn-pulse { 0%,100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes cn-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cn-dot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes cn-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cn-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cn-pop-up { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cn-slide-in-left { from { opacity: .4; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes cn-slide-in-right { from { opacity: .4; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes cn-sheet-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cn-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cn-msg-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes cn-badge-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes cn-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes cn-toast-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cn-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes cn-glow-in { from { box-shadow: 0 0 0 0 transparent; } }
@keyframes cn-bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
html.cn-reduce-motion *, html.cn-reduce-motion *::before, html.cn-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }