/* NS Viewport Studio — NS Design System Tokens v1.8.0
   Semantic, theme-aware source of truth. Primitive aliases remain for legacy compatibility. */

:root,
:root[data-theme="dark"]{
  color-scheme:dark;

  /* Semantic color roles */
  --color-canvas:#080b12;
  --color-canvas-subtle:#0c111b;
  --color-surface:#111824;
  --color-surface-raised:#172131;
  --color-surface-overlay:#1d2939;
  --color-surface-inset:#0a0f18;
  --color-surface-hover:#1b2738;
  --color-surface-active:#213149;

  --color-border-subtle:#202c3e;
  --color-border-default:#2a394e;
  --color-border-strong:#40516a;
  --color-border-focus:#74a7ff;

  --color-text-primary:#f4f7fb;
  --color-text-secondary:#b8c3d2;
  --color-text-muted:#8795a9;
  --color-text-faint:#637187;
  --color-text-inverse:#08111f;
  --color-text-link:#8bb5ff;

  --color-accent:#74a7ff;
  --color-accent-hover:#91bbff;
  --color-accent-pressed:#5b94f5;
  --color-accent-soft:rgba(116,167,255,.13);
  --color-accent-border:rgba(116,167,255,.42);
  --color-accent-contrast:#07111f;
  --color-accent-secondary:#55d7e8;

  --color-success:#46d6a5;
  --color-success-soft:rgba(70,214,165,.12);
  --color-warning:#f4bd62;
  --color-warning-soft:rgba(244,189,98,.14);
  --color-danger:#ff7185;
  --color-danger-soft:rgba(255,113,133,.13);
  --color-info:#69c8ff;
  --color-info-soft:rgba(105,200,255,.13);

  --color-backdrop:rgba(1,5,12,.72);
  --color-selection:rgba(116,167,255,.28);
  --color-focus-ring:rgba(116,167,255,.42);

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(0,0,0,.32);
  --shadow-sm:0 6px 18px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.32);
  --shadow-md:0 18px 44px rgba(0,0,0,.30),0 2px 8px rgba(0,0,0,.22);
  --shadow-lg:0 32px 80px rgba(0,0,0,.38),0 8px 22px rgba(0,0,0,.24);
  --shadow-focus:0 0 0 3px var(--color-focus-ring);
  --shadow-accent:0 14px 34px -18px rgba(75,137,247,.78);
  --shadow-device:0 42px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08);

  /* Gradients are intentionally restrained */
  --gradient-brand:linear-gradient(135deg,#8bb8ff 0%,#69a0ff 52%,#55d7e8 100%);
  --gradient-brand-text:linear-gradient(120deg,#ffffff 12%,#cfe0ff 55%,#8ebaff 100%);
  --gradient-surface:linear-gradient(145deg,rgba(23,33,49,.96),rgba(12,17,27,.98));
  --gradient-atmosphere:radial-gradient(70% 54% at 14% 0%,rgba(73,124,216,.16),transparent 70%);
}

:root[data-theme="light"]{
  color-scheme:light;
  --color-canvas:#f5f7fb;
  --color-canvas-subtle:#edf1f6;
  --color-surface:#ffffff;
  --color-surface-raised:#fbfcfe;
  --color-surface-overlay:#ffffff;
  --color-surface-inset:#eef2f7;
  --color-surface-hover:#f0f4fa;
  --color-surface-active:#e8eef7;

  --color-border-subtle:#e2e7ef;
  --color-border-default:#d2dae6;
  --color-border-strong:#aeb9c9;
  --color-border-focus:#2563eb;

  --color-text-primary:#142033;
  --color-text-secondary:#3f4f68;
  --color-text-muted:#61718a;
  --color-text-faint:#7c899c;
  --color-text-inverse:#ffffff;
  --color-text-link:#1d5ed7;

  --color-accent:#2563eb;
  --color-accent-hover:#1d4ed8;
  --color-accent-pressed:#1e40af;
  --color-accent-soft:rgba(37,99,235,.09);
  --color-accent-border:rgba(37,99,235,.31);
  --color-accent-contrast:#ffffff;
  --color-accent-secondary:#087f8c;

  --color-success:#087f5b;
  --color-success-soft:rgba(8,127,91,.09);
  --color-warning:#9a5b00;
  --color-warning-soft:rgba(154,91,0,.10);
  --color-danger:#c72f49;
  --color-danger-soft:rgba(199,47,73,.09);
  --color-info:#0a6fb1;
  --color-info-soft:rgba(10,111,177,.09);

  --color-backdrop:rgba(18,29,46,.44);
  --color-selection:rgba(37,99,235,.19);
  --color-focus-ring:rgba(37,99,235,.28);

  --shadow-xs:0 1px 2px rgba(20,32,51,.08);
  --shadow-sm:0 8px 22px rgba(28,44,70,.08),0 1px 3px rgba(28,44,70,.07);
  --shadow-md:0 20px 48px rgba(28,44,70,.12),0 2px 8px rgba(28,44,70,.08);
  --shadow-lg:0 34px 90px rgba(28,44,70,.16),0 8px 24px rgba(28,44,70,.10);
  --shadow-accent:0 14px 34px -18px rgba(37,99,235,.50);
  --shadow-device:0 42px 100px rgba(31,44,65,.22),0 0 0 1px rgba(23,36,56,.10),inset 0 1px 0 rgba(255,255,255,.8);

  --gradient-brand:linear-gradient(135deg,#2563eb 0%,#3b82f6 52%,#0ea5b7 100%);
  --gradient-brand-text:linear-gradient(120deg,#142033 10%,#1d4ed8 62%,#087f8c 100%);
  --gradient-surface:linear-gradient(145deg,#ffffff,#f6f8fc);
  --gradient-atmosphere:radial-gradient(70% 54% at 14% 0%,rgba(37,99,235,.09),transparent 72%);
}

:root[data-theme="contrast"]{
  color-scheme:dark;
  --color-canvas:#000000;
  --color-canvas-subtle:#050505;
  --color-surface:#0a0a0a;
  --color-surface-raised:#111111;
  --color-surface-overlay:#171717;
  --color-surface-inset:#000000;
  --color-surface-hover:#1d1d1d;
  --color-surface-active:#252525;

  --color-border-subtle:#666666;
  --color-border-default:#a8a8a8;
  --color-border-strong:#ffffff;
  --color-border-focus:#00e5ff;

  --color-text-primary:#ffffff;
  --color-text-secondary:#f2f2f2;
  --color-text-muted:#d3d3d3;
  --color-text-faint:#b9b9b9;
  --color-text-inverse:#000000;
  --color-text-link:#67e8ff;

  --color-accent:#00e5ff;
  --color-accent-hover:#8ff5ff;
  --color-accent-pressed:#00b8cc;
  --color-accent-soft:rgba(0,229,255,.17);
  --color-accent-border:#00e5ff;
  --color-accent-contrast:#000000;
  --color-accent-secondary:#ffe600;

  --color-success:#67ffbf;
  --color-success-soft:rgba(103,255,191,.16);
  --color-warning:#ffe600;
  --color-warning-soft:rgba(255,230,0,.16);
  --color-danger:#ff8799;
  --color-danger-soft:rgba(255,135,153,.16);
  --color-info:#67e8ff;
  --color-info-soft:rgba(103,232,255,.16);

  --color-backdrop:rgba(0,0,0,.88);
  --color-selection:rgba(255,230,0,.38);
  --color-focus-ring:#ffe600;
  --shadow-xs:none;
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:none;
  --shadow-accent:none;
  --shadow-device:0 0 0 2px #ffffff;
  --gradient-brand:linear-gradient(135deg,#00e5ff,#ffe600);
  --gradient-brand-text:linear-gradient(120deg,#ffffff,#00e5ff);
  --gradient-surface:linear-gradient(#111111,#050505);
  --gradient-atmosphere:none;
}

:root[data-theme="system"]{color-scheme:dark}
@media (prefers-color-scheme:light){
  :root[data-theme="system"]{
    color-scheme:light;
    --color-canvas:#f5f7fb;--color-canvas-subtle:#edf1f6;--color-surface:#ffffff;--color-surface-raised:#fbfcfe;--color-surface-overlay:#ffffff;--color-surface-inset:#eef2f7;--color-surface-hover:#f0f4fa;--color-surface-active:#e8eef7;
    --color-border-subtle:#e2e7ef;--color-border-default:#d2dae6;--color-border-strong:#aeb9c9;--color-border-focus:#2563eb;
    --color-text-primary:#142033;--color-text-secondary:#3f4f68;--color-text-muted:#61718a;--color-text-faint:#7c899c;--color-text-inverse:#ffffff;--color-text-link:#1d5ed7;
    --color-accent:#2563eb;--color-accent-hover:#1d4ed8;--color-accent-pressed:#1e40af;--color-accent-soft:rgba(37,99,235,.09);--color-accent-border:rgba(37,99,235,.31);--color-accent-contrast:#ffffff;--color-accent-secondary:#087f8c;
    --color-success:#087f5b;--color-success-soft:rgba(8,127,91,.09);--color-warning:#9a5b00;--color-warning-soft:rgba(154,91,0,.10);--color-danger:#c72f49;--color-danger-soft:rgba(199,47,73,.09);--color-info:#0a6fb1;--color-info-soft:rgba(10,111,177,.09);
    --color-backdrop:rgba(18,29,46,.44);--color-selection:rgba(37,99,235,.19);--color-focus-ring:rgba(37,99,235,.28);
    --shadow-xs:0 1px 2px rgba(20,32,51,.08);--shadow-sm:0 8px 22px rgba(28,44,70,.08),0 1px 3px rgba(28,44,70,.07);--shadow-md:0 20px 48px rgba(28,44,70,.12),0 2px 8px rgba(28,44,70,.08);--shadow-lg:0 34px 90px rgba(28,44,70,.16),0 8px 24px rgba(28,44,70,.10);--shadow-accent:0 14px 34px -18px rgba(37,99,235,.50);--shadow-device:0 42px 100px rgba(31,44,65,.22),0 0 0 1px rgba(23,36,56,.10),inset 0 1px 0 rgba(255,255,255,.8);
    --gradient-brand:linear-gradient(135deg,#2563eb 0%,#3b82f6 52%,#0ea5b7 100%);--gradient-brand-text:linear-gradient(120deg,#142033 10%,#1d4ed8 62%,#087f8c 100%);--gradient-surface:linear-gradient(145deg,#ffffff,#f6f8fc);--gradient-atmosphere:radial-gradient(70% 54% at 14% 0%,rgba(37,99,235,.09),transparent 72%);
  }
}

:root{
  /* Typography */
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"SF Pro Display","Segoe UI Variable Display",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"SFMono-Regular","Cascadia Code","Roboto Mono","Fira Code",Consolas,monospace;
  --text-2xs:.6875rem;
  --text-xs:.75rem;
  --text-sm:.8125rem;
  --text-md:.9375rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.375rem;
  --text-2xl:1.75rem;
  --text-3xl:2.25rem;
  --text-4xl:clamp(2.65rem,5vw,4.75rem);
  --leading-tight:1.08;
  --leading-snug:1.3;
  --leading-body:1.58;
  --tracking-tight:-.025em;

  /* Spacing */
  --space-0:0;
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* Geometry */
  --radius-xs:.375rem;
  --radius-sm:.625rem;
  --radius-md:.875rem;
  --radius-lg:1.125rem;
  --radius-xl:1.5rem;
  --radius-2xl:2rem;
  --radius-full:999px;
  --control-sm:2.25rem;
  --control-md:2.75rem;
  --control-lg:3.25rem;
  --content-max:90rem;
  --reading-max:70ch;

  /* Motion */
  --duration-instant:80ms;
  --duration-fast:140ms;
  --duration-normal:200ms;
  --duration-slow:300ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.16,1,.3,1);
  --transition-standard:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);

  /* Shell sizing */
  --bar-h:64px;
  --side-w:72px;
  --lp-w:316px;
  --rp-w:296px;
  --auth-w:480px;

  /* Legacy primitive aliases */
  --bg-0:var(--color-canvas);--bg-1:var(--color-canvas-subtle);--bg-2:var(--color-surface);--bg-3:var(--color-surface-raised);--bg-4:var(--color-surface-overlay);--bg-5:var(--color-surface-hover);--bg-6:var(--color-surface-active);
  --br-1:var(--color-border-subtle);--br-2:var(--color-border-default);--br-3:var(--color-border-strong);--br-4:var(--color-border-focus);
  --blue:var(--color-accent);--blue-lt:var(--color-accent-hover);--blue-dk:var(--color-accent-pressed);--cyan:var(--color-accent-secondary);--green:var(--color-success);--amber:var(--color-warning);--red:var(--color-danger);--purple:#9b8cff;
  --blue-a10:var(--color-accent-soft);--blue-a15:var(--color-accent-soft);--blue-a20:var(--color-accent-soft);--blue-a30:var(--color-accent-border);--blue-glow:var(--color-accent-soft);
  --green-a10:var(--color-success-soft);--green-a20:var(--color-success-soft);--green-a30:color-mix(in srgb,var(--color-success) 40%,transparent);
  --red-a10:var(--color-danger-soft);--red-a20:var(--color-danger-soft);--amber-a15:var(--color-warning-soft);--purple-a15:rgba(155,140,255,.14);
  --tx-1:var(--color-text-primary);--tx-2:var(--color-text-secondary);--tx-3:var(--color-text-muted);--tx-4:var(--color-text-faint);
  --g-blue:var(--gradient-brand);--g-blue-v:linear-gradient(180deg,var(--color-accent),var(--color-accent-secondary));--g-purple:linear-gradient(135deg,#9b8cff,var(--color-accent));--g-green:linear-gradient(135deg,var(--color-success),var(--color-accent-secondary));--g-amber:linear-gradient(135deg,var(--color-warning),#f37b4b);--g-card:var(--gradient-surface);--g-glow:var(--gradient-atmosphere);--g-glow2:radial-gradient(ellipse at 80% 80%,color-mix(in srgb,var(--color-accent-secondary) 12%,transparent),transparent 60%);
  --sh-xs:var(--shadow-xs);--sh-sm:var(--shadow-sm);--sh-md:var(--shadow-md);--sh-lg:var(--shadow-lg);--sh-xl:var(--shadow-lg);--sh-blue:var(--shadow-accent);--sh-green:0 0 0 1px color-mix(in srgb,var(--color-success) 32%,transparent),0 8px 24px color-mix(in srgb,var(--color-success) 16%,transparent);--sh-phone:var(--shadow-device);
  --font:var(--font-sans);--mono:var(--font-mono);
  --s1:var(--space-1);--s2:var(--space-2);--s3:var(--space-3);--s4:var(--space-4);--s5:var(--space-5);--s6:var(--space-6);--s8:var(--space-8);--s10:var(--space-10);--s12:var(--space-12);--s16:var(--space-16);
  --r2:var(--radius-xs);--r4:var(--radius-xs);--r6:var(--radius-sm);--r8:var(--radius-sm);--r10:var(--radius-md);--r12:var(--radius-md);--r16:var(--radius-lg);--r20:var(--radius-xl);--r-full:var(--radius-full);
  --ease:var(--duration-normal) var(--ease-standard);--ease-spring:var(--duration-slow) var(--ease-emphasized);--ease-out:var(--duration-normal) var(--ease-emphasized);--motion-fast:var(--duration-fast) var(--ease-standard);--motion-normal:var(--duration-normal) var(--ease-standard);--motion-slow:var(--duration-slow) var(--ease-standard);--motion-standard:var(--transition-standard);
  --focus-ring:var(--shadow-focus);--state-success:var(--color-success);--state-warning:var(--color-warning);--state-danger:var(--color-danger);

  /* v2 compatibility aliases */
  --c-bg:var(--bg-0);--c-bg1:var(--bg-1);--c-bg2:var(--bg-2);--c-bg3:var(--bg-3);--c-bg4:var(--bg-4);--c-bg5:var(--bg-5);--c-bg6:var(--bg-6);
  --c-border:var(--br-1);--c-border2:var(--br-2);--c-border3:var(--br-3);--c-border4:var(--br-4);
  --c-t1:var(--tx-1);--c-t2:var(--tx-2);--c-t3:var(--tx-3);--c-t4:var(--tx-4);
  --c-blue:var(--blue);--c-cyan:var(--cyan);--c-green:var(--green);--c-orange:var(--amber);--c-red:var(--red);--c-purple:var(--purple);
  --c-blue-dim:var(--blue-a10);--c-blue-glow:var(--blue-glow);--c-blue-border:var(--blue-a30);--c-green-dim:var(--green-a10);--c-green-border:var(--green-a30);--c-orange-dim:var(--amber-a15);--c-red-dim:var(--red-a10);
  --grad-blue:var(--g-blue);--grad-card:var(--g-card);
  --shadow-sm:var(--sh-sm);--shadow-md:var(--sh-md);--shadow-lg:var(--sh-lg);--shadow-blue:var(--sh-blue);--shadow-phone:var(--sh-phone);
  --font-body:var(--font);--font-mono:var(--mono);
  --r-xs:var(--radius-xs);--r-sm:var(--radius-sm);--r-md:var(--radius-md);--r-lg:var(--radius-lg);--r-xl:var(--radius-xl);
  --topbar-h:var(--bar-h);--sidebar-w:var(--side-w);
  --t-fast:var(--motion-fast);--t-normal:var(--motion-normal);--t-slow:var(--motion-slow);--t-spring:var(--ease-spring);
  --lh-tight:var(--leading-tight);--lh-snug:var(--leading-snug);--lh-normal:var(--leading-body);--lh-relaxed:1.72;
}