/*
 * GENERATED — do not edit. The spatial design tokens: one source in
 * packages/contracts/src/web/spatial-tokens.ts, written out by
 * apps/web/scripts/build-spatial-tokens.ts.
 */

:root {
  --nf-ink: #04060c;
  --nf-panel: #0a101b;
  --nf-panel-2: #0d1524;
  --nf-line: rgba(148, 170, 220, 0.13);
  --nf-line-bright: rgba(148, 170, 220, 0.26);
  --nf-star: #e9eef9;
  --nf-muted: #94a0b6;
  --nf-dim: #77839b;
  --nf-faint: #5c6981;
  --nf-sky: #50C6FD;
  --nf-sky-deep: #1FA0D8;
  --nf-sky-hover: #84D2FB;
  --nf-ember: #50C6FD;
  --nf-ember-ink: #0A1424;
  --nf-ember-hover: #84D2FB;
  --nf-violet: #9d8cff;
  --nf-ok: #3ccf7a;
  --nf-warn: #ffc46b;
  --nf-danger: #ff8a7a;
  --nf-wash: color-mix(in srgb, var(--nf-sky) 12%, transparent);
  --nf-wash-strong: color-mix(in srgb, var(--nf-sky) 16%, transparent);
  --nf-ring: color-mix(in srgb, var(--nf-sky) 55%, transparent);
  --nf-ring-soft: color-mix(in srgb, var(--nf-sky) 32%, transparent);
  --nf-ring-selected: color-mix(in srgb, var(--nf-sky) 45%, transparent);
  --nf-glow: color-mix(in srgb, var(--nf-sky) 50%, transparent);
  --nf-glow-soft: color-mix(in srgb, var(--nf-sky) 45%, transparent);
  --nf-edge: rgba(233, 238, 249, 0.06);
  --nf-shadow-deep: rgba(0, 0, 0, 0.9);
  --scene-ink: var(--nf-ink);
  --scene-glow: radial-gradient(ellipse 85% 50% at 8% -12%, rgba(30, 155, 224, 0.18), transparent 56%), radial-gradient(ellipse 60% 45% at 100% 100%, rgba(124, 92, 255, 0.1), transparent 60%), radial-gradient(ellipse 65% 42% at 95% 4%, rgba(80, 198, 253, 0.07), transparent 52%), radial-gradient(ellipse 70% 45% at 50% 108%, rgba(30, 155, 224, 0.1), transparent 60%);
  --scene-scrim: color-mix(in srgb, var(--nf-ink) 55%, transparent);
  --scene-scrim-blur: blur(16px) saturate(1.2);
  --glass-blur-window: blur(32px) saturate(1.6);
  --glass-blur-overlay: blur(32px) saturate(1.6);
  --glass-sheen: linear-gradient(160deg, rgba(233, 238, 249, 0.07), rgba(233, 238, 249, 0.015) 55%);
  --glass-sheen-hover: linear-gradient(160deg, rgba(233, 238, 249, 0.11), rgba(233, 238, 249, 0.03) 60%);
  --glass-fill-window: color-mix(in srgb, var(--nf-panel) 72%, transparent);
  --glass-fill-ornament: color-mix(in srgb, var(--nf-panel) 66%, transparent);
  --glass-fill-popover: color-mix(in srgb, var(--nf-panel) 82%, transparent);
  --glass-fill-platter: color-mix(in srgb, var(--nf-panel) 50%, transparent);
  --glass-fill-editor: color-mix(in srgb, #060910 88%, transparent);
  --glass-fill-solid: color-mix(in srgb, #0c121e 97%, transparent);
  --glass-fill-inset: rgba(233, 238, 249, 0.06);
  --glass-fill-inset-hover: rgba(233, 238, 249, 0.1);
  --glass-window: var(--glass-sheen), var(--glass-fill-window);
  --glass-ornament: var(--glass-sheen), var(--glass-fill-ornament);
  --glass-popover: linear-gradient(160deg, rgba(233, 238, 249, 0.08), rgba(233, 238, 249, 0.015) 60%), var(--glass-fill-popover);
  --glass-platter: linear-gradient(160deg, rgba(233, 238, 249, 0.07), rgba(233, 238, 249, 0.015) 60%), var(--glass-fill-platter);
  --glass-editor: linear-gradient(160deg, rgba(233, 238, 249, 0.05), transparent 40%), var(--glass-fill-editor);
  --glass-edge-color: rgba(148, 170, 220, 0.16);
  --glass-edge-color-soft: rgba(148, 170, 220, 0.12);
  --glass-edge-color-hover: rgba(148, 170, 220, 0.24);
  --glass-edge: 1px solid var(--glass-edge-color);
  --glass-hairline: rgba(233, 238, 249, 0.1);
  --glass-highlight: inset 0 1px 0 rgba(233, 238, 249, 0.12);
  --glass-highlight-soft: inset 0 1px 0 rgba(233, 238, 249, 0.08);
  --glass-shadow-window: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  --glass-shadow-ornament: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --glass-shadow-popover: 0 40px 90px -36px rgba(0, 0, 0, 0.95);
  --glass-shadow-platter: 0 18px 40px -26px rgba(0, 0, 0, 0.9);
  --pill-rest: rgba(233, 238, 249, 0.07);
  --pill-hover: rgba(148, 170, 220, 0.12);
  --pill-press: rgba(148, 170, 220, 0.18);
  --pill-selected: rgba(233, 238, 249, 0.94);
  --pill-selected-ink: #0a1424;
  --pill-selected-glow: 0 10px 26px -12px rgba(233, 238, 249, 0.55);
  --action-fill: var(--nf-sky);
  --action-fill-hover: var(--nf-sky-hover);
  --action-fill-press: color-mix(in srgb, var(--nf-sky) 84%, #000);
  --action-ink: #0a1424;
  --action-glow: 0 10px 24px -12px rgba(80, 198, 253, 0.6);
  --well-fill: color-mix(in srgb, var(--nf-ink) 45%, transparent);
  --well-fill-hover: color-mix(in srgb, var(--nf-ink) 55%, transparent);
  --well-edge: rgba(148, 170, 220, 0.14);
  --well-edge-hover: rgba(148, 170, 220, 0.24);
  --well-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --focus-edge: color-mix(in srgb, var(--nf-sky) 55%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--nf-sky) 32%, transparent);
  --focus-outline: 2px solid var(--nf-sky);
  --focus-offset: 2px;
  --radius-window: 26px;
  --radius-sheet: 26px;
  --radius-popover: 20px;
  --radius-card: 18px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --window-gap: 10px;
  --window-pad: 8px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-quick: 120ms;
  --dur-enter: 200ms;
  --dur-exit: 140ms;
  --dur-window: 240ms;
  --motion-rise: 8px;
  --motion-scale-from: 0.97;
  --lift-hover: 1.03;
  --lift-press: 0.97;
  --lift-hover-icon: 1.06;
  --lift-rise: -2px;
  --z-scene: 0;
  --z-grain: 3;
  --z-sticky: 10;
  --z-chrome: 20;
  --z-ornament: 30;
  --z-floating: 100;
  --z-overlay: 1000;
  --z-toast: 1300;
  --z-tooltip: 1400;
  --z-system: 1500;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-blur-window: none;
    --glass-blur-overlay: none;
    --glass-sheen: linear-gradient(transparent, transparent);
    --glass-fill-window: color-mix(in srgb, var(--nf-panel) 94%, transparent);
    --glass-fill-ornament: color-mix(in srgb, var(--nf-panel) 94%, transparent);
    --glass-fill-popover: color-mix(in srgb, var(--nf-panel) 97%, transparent);
    --scene-scrim: color-mix(in srgb, var(--nf-ink) 85%, transparent);
    --scene-scrim-blur: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-blur-window: none;
    --glass-blur-overlay: none;
    --glass-sheen: linear-gradient(transparent, transparent);
    --glass-fill-window: color-mix(in srgb, var(--nf-panel) 94%, transparent);
    --glass-fill-ornament: color-mix(in srgb, var(--nf-panel) 94%, transparent);
    --glass-fill-popover: color-mix(in srgb, var(--nf-panel) 97%, transparent);
    --scene-scrim: color-mix(in srgb, var(--nf-ink) 85%, transparent);
    --scene-scrim-blur: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --glass-edge-color: rgba(148, 170, 220, 0.38);
    --glass-hairline: rgba(233, 238, 249, 0.22);
    --nf-muted: #b7c1d3;
  }
}

@media (forced-colors: active) {
  :root {
    --glass-blur-window: none;
    --glass-blur-overlay: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift-hover: 1;
    --lift-press: 1;
    --lift-hover-icon: 1;
    --lift-rise: 0px;
    --motion-rise: 0px;
    --motion-scale-from: 1;
  }
}

@media (hover: none) {
  :root {
    --lift-hover: 1;
    --lift-hover-icon: 1;
  }
}

@media (max-width: 899px) {
  :root {
    --window-gap: 8px;
  }
}

@media (max-width: 719px) {
  :root {
    --window-gap: 0px;
    --glass-blur-window: none;
    --glass-fill-window: color-mix(in srgb, var(--nf-panel) 92%, transparent);
  }
}