/**
 * NoGravity Design Language (NGDL) — Master CSS Variables & Utilities
 * Author: Vivek Kumar (@Iamvive)
 * Version: 1.2.0 — values must match docs/design-system/DESIGN-SYSTEM.md §2.1 (tests/ngdl-tokens)
 */

:root,
[data-theme="dark"] {
  /* Surface & Canvas (Space Black & Graphite) */
  --ngdl-bg-canvas: #08090a;
  --ngdl-surface-card: #121316;
  --ngdl-surface-elevated: #1a1c20;
  --ngdl-surface-overlay: rgba(18, 19, 22, 0.75);
  --ngdl-surface-glass: rgba(255, 255, 255, 0.03);

  /* Hairline Borders & Specular Reflections */
  --ngdl-border-subtle: rgba(255, 255, 255, 0.08);
  --ngdl-border-active: rgba(255, 255, 255, 0.22);
  --ngdl-border-glow: rgba(255, 255, 255, 0.12);

  /* Monochromatic Typography */
  --ngdl-text-primary: #ffffff;
  --ngdl-text-secondary: #a0a5ae;
  --ngdl-text-tertiary: #5f6570;

  /* Buttons & Micro-Surfaces */
  --ngdl-btn-bg: #ffffff;
  --ngdl-btn-text: #08090a;
  --ngdl-btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --ngdl-btn-secondary-text: #ffffff;
  --ngdl-btn-success-bg: #22c55e;
  --ngdl-btn-success-fg: #08090a;

  /* Elevation Shadows */
  --ngdl-accent-glow: 0 0 24px rgba(255, 255, 255, 0.12);
  --ngdl-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.45);
  --ngdl-elevated-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);

  /* Semantic Status Indicators */
  --ngdl-status-success: #22c55e;
  --ngdl-status-warning: #eab308;
  --ngdl-status-danger: #ef4444;
  --ngdl-status-info: #60a5fa;

  /* Motion Curves */
  --ngdl-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ngdl-duration-micro: 180ms;
  --ngdl-duration-sheet: 240ms;
}

[data-theme="light"] {
  /* Surface & Canvas (Pure Alabaster & Milk White) */
  --ngdl-bg-canvas: #f8f9fa;
  --ngdl-surface-card: #ffffff;
  --ngdl-surface-elevated: #f1f3f5;
  --ngdl-surface-overlay: rgba(255, 255, 255, 0.85);
  --ngdl-surface-glass: rgba(0, 0, 0, 0.02);

  /* Soft Refined Borders */
  --ngdl-border-subtle: rgba(0, 0, 0, 0.08);
  --ngdl-border-active: rgba(0, 0, 0, 0.25);
  --ngdl-border-glow: rgba(0, 0, 0, 0.05);

  /* Human-Calibrated Contrast Typography */
  --ngdl-text-primary: #090a0c;
  --ngdl-text-secondary: #585e6b;
  --ngdl-text-tertiary: #8c929e;

  /* Tactile Modernist Buttons */
  --ngdl-btn-bg: #090a0c;
  --ngdl-btn-text: #ffffff;
  --ngdl-btn-secondary-bg: #ffffff;
  --ngdl-btn-secondary-text: #090a0c;
  --ngdl-btn-success-bg: #15803d;
  --ngdl-btn-success-fg: #ffffff;

  /* Diffuse Ambient Shadows */
  --ngdl-accent-glow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ngdl-card-shadow: 0 1px 3px rgba(9, 10, 12, 0.06), 0 8px 24px rgba(9, 10, 12, 0.08);
  --ngdl-elevated-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);

  /* Semantic Status */
  --ngdl-status-success: #16a34a;
  --ngdl-status-warning: #ca8a04;
  --ngdl-status-danger: #dc2626;
  --ngdl-status-info: #2563eb;
}

/* NGDL Utility Classes */
.ngdl-canvas {
  background-color: var(--ngdl-bg-canvas);
  color: var(--ngdl-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background-color var(--ngdl-duration-sheet) var(--ngdl-ease-spring),
              color var(--ngdl-duration-sheet) var(--ngdl-ease-spring);
}

.ngdl-card {
  background-color: var(--ngdl-surface-card);
  border: 1px solid var(--ngdl-border-subtle);
  border-radius: 14px;
  box-shadow: var(--ngdl-card-shadow);
  transition: all var(--ngdl-duration-micro) var(--ngdl-ease-spring);
}

.ngdl-card:hover {
  border-color: var(--ngdl-border-active);
  transform: translateY(-2px);
}

.ngdl-card-elevated {
  background-color: var(--ngdl-surface-elevated);
  border: 1px solid var(--ngdl-border-subtle);
  border-radius: 18px;
  box-shadow: var(--ngdl-elevated-shadow);
}

.ngdl-glass {
  background: var(--ngdl-surface-overlay);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--ngdl-border-subtle);
}

.ngdl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ngdl-duration-micro) var(--ngdl-ease-spring);
  text-decoration: none;
}

.ngdl-btn:active {
  transform: scale(0.98);
}

.ngdl-btn-primary {
  background-color: var(--ngdl-btn-bg);
  color: var(--ngdl-btn-text);
  box-shadow: var(--ngdl-accent-glow);
}

.ngdl-btn-secondary {
  background-color: var(--ngdl-btn-secondary-bg);
  color: var(--ngdl-btn-secondary-text);
  border-color: var(--ngdl-border-subtle);
}

.ngdl-btn-secondary:hover {
  border-color: var(--ngdl-border-active);
}

.ngdl-btn-ghost {
  background-color: transparent;
  color: var(--ngdl-text-secondary);
}

.ngdl-btn-ghost:hover {
  color: var(--ngdl-text-primary);
  background-color: var(--ngdl-surface-glass);
}

.ngdl-input {
  width: 100%;
  background-color: var(--ngdl-surface-elevated);
  border: 1px solid var(--ngdl-border-subtle);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--ngdl-text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
  transition: all var(--ngdl-duration-micro) var(--ngdl-ease-spring);
}

.ngdl-input:focus {
  border-color: var(--ngdl-text-primary);
  box-shadow: 0 0 0 3px var(--ngdl-border-glow);
}

.ngdl-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  background-color: var(--ngdl-surface-glass);
  border: 1px solid var(--ngdl-border-subtle);
  color: var(--ngdl-text-secondary);
  letter-spacing: 0.04em;
}

.ngdl-mono {
  font-family: 'JetBrains Mono', monospace;
}