/* ==========================================================================
   Design tokens - "Dim Terminal, Disciplined" redesign
   Scoped under new --ns-* custom properties so they do not collide with the
   legacy --primary-bg / --accent-green etc. tokens in main.css that the
   not-yet-migrated playground/professional sections still depend on.
   ========================================================================== */

:root {
    /* Color - dark (default) */
    --ns-bg: #0a0d0b;
    --ns-bg-raised: #10140f;
    --ns-bg-elevated: #141914;
    --ns-border: #1f2a22;
    --ns-border-strong: #2c3a30;

    --ns-text: #f2f5f2;
    --ns-text-secondary: #a2ada4;
    --ns-text-muted: #6b756e;

    --ns-accent: #22c55e;
    --ns-accent-strong: #34d17a;
    --ns-accent-text: #0a0d0b;

    --ns-danger: #ef4444;

    --ns-glitch-a: #22d3ee;
    --ns-glitch-b: #ec4899;

    /* Typography */
    --ns-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ns-font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --ns-text-h1: clamp(2.25rem, 1.4rem + 3.5vw, 3.5rem);
    --ns-text-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    --ns-text-h3: 1.25rem;
    --ns-text-body: 1rem;
    --ns-text-small: 0.875rem;
    --ns-text-label: 0.75rem;

    /* Spacing (reuses the same scale main.css already established) */
    --ns-space-xs: 0.5rem;
    --ns-space-sm: 1rem;
    --ns-space-md: 1.5rem;
    --ns-space-lg: 2rem;
    --ns-space-xl: 3rem;
    --ns-space-2xl: 4rem;

    /* Shape */
    --ns-radius-sm: 8px;
    --ns-radius-md: 14px;
    --ns-radius-lg: 20px;
    --ns-radius-full: 999px;

    --ns-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --ns-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.45);

    --ns-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --ns-container: 1280px;
}

/* Color - light */
[data-theme="light"] {
    --ns-bg: #fafaf8;
    --ns-bg-raised: #ffffff;
    --ns-bg-elevated: #f2f4f1;
    --ns-border: #e3e7e2;
    --ns-border-strong: #cfd6d0;

    --ns-text: #12140f;
    --ns-text-secondary: #4d564e;
    --ns-text-muted: #7b847c;

    --ns-accent: #16a34a;
    --ns-accent-strong: #15803d;
    --ns-accent-text: #ffffff;

    --ns-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.08);
    --ns-shadow-md: 0 12px 28px rgba(15, 23, 42, 0.1);
}