/* NE Design System — tokens.css — Phase 1 (#65) */
/* Design tokens: colors, spacing, radius, typography, z-index, layout */
/* No selectors or rules — only custom properties */

:root {
	/*
	 * === Surfaces ===
	 *
	 * Three-tier hierarchy (darkest to lightest):
	 *   --ne-bg       → Page background, form inputs inside cards
	 *   --ne-surface  → Cards, panels, default containers
	 *   --ne-elevated → Hover states, modals, nested containers inside cards
	 *
	 * Rule: child elements must use a DARKER tier than their parent.
	 * Example: inputs (--ne-bg) inside cards (--ne-surface).
	 * Example: modal content (--ne-elevated), modal inputs (--ne-bg).
	 */
	--ne-bg:            #0B0D1A;
	--ne-surface:       #131630;
	--ne-elevated:      #1A1E3C;

	/* === Borders === */
	--ne-border:        rgba(255, 255, 255, 0.07);
	--ne-border-s:      rgba(255, 255, 255, 0.12);
	--ne-border-brand:  #252a59;

	/* === Text === */
	--ne-text:          #E8E9F0;
	--ne-text-muted:    #a3a5bb;
	--ne-text-subtle:   #7b7e96;

	/* === Brand — Primary (Purple) === */
	--ne-accent:        #8B7FE8;
	--ne-accent-soft:   #654DD1;
	--ne-accent-deep:   #4830B4;
	--ne-accent-glow:   rgba(139, 127, 232, 0.15);

	/* === Brand — Secondary (Green) === */
	--ne-green:         #3DD68C;
	--ne-green-soft:    #86B831;
	--ne-green-alt:     #1DBB60;

	/*
	 * === Semantic ===
	 *
	 * Readability on dark surfaces:
	 *   --ne-green   ✓  Readable on --ne-bg, --ne-surface, --ne-elevated
	 *   --ne-red     ✓  Readable on all surfaces
	 *   --ne-yellow  ✓  Readable on all surfaces
	 *   --ne-blue    ✗  TOO DARK for --ne-bg/--ne-surface. Use --ne-accent or --ne-text-muted for info states.
	 */
	--ne-red:           #FF4F4F;
	--ne-blue:          #0076be;
	--ne-yellow:        #FFB800;

	/* === Spacing === */
	--ne-space-1:       4px;
	--ne-space-2:       8px;
	--ne-space-3:       12px;
	--ne-space-4:       16px;
	--ne-space-5:       24px;
	--ne-space-6:       32px;
	--ne-space-7:       48px;
	--ne-space-8:       64px;

	/* === Radius === */
	--ne-radius-sm:     4px;
	--ne-radius-md:     8px;
	--ne-radius-lg:     12px;
	--ne-radius-pill:   20px;

	/* === Typography === */
	--ne-font-display:  'Instrument Serif', Georgia, serif;
	--ne-font-body:     'Inter', 'Rubik', sans-serif;
	--ne-font-mono:     'Geist Mono', 'Courier New', monospace;

	/* === Z-index === */
	--ne-z-dropdown:    100;
	--ne-z-sticky:      200;
	--ne-z-modal:       300;
	--ne-z-toast:       400;

	/* === Layout === */
	--ne-max-width:     1080px;
	--ne-section-pad:   64px 32px;
	--ne-card-gap:      10px;

	/* === Transitions === */
	--ne-ease:          cubic-bezier(0.16, 1, 0.3, 1);
	--ne-duration:      0.2s;

	/* === Legacy aliases (backward compatibility) === */
	--cornetto-color-1:   var(--ne-accent-soft);
	--cornetto-color-2:   var(--ne-accent-deep);
	--cornetto-color-b-1: var(--ne-green-soft);
	--cornetto-color-b-2: var(--ne-green-alt);
}