/* ═══════════════════════════════════════════════════════════════
   Customer Velocity 360 — Design Tokens (atq-tokens.css)
   Single source of truth for all shared design tokens.
   New code should use --cv-* namespace; --atq-* aliases exist
   for backward compatibility and will be deprecated over time.
   ═══════════════════════════════════════════════════════════════ */

/* ── Canonical Tokens (--cv-* namespace) ── */
:root {
  /* ── Brand ── */
  --cv-brand-primary:      #2563eb;
  --cv-brand-primary-dark: #1e40af;
  --cv-brand-primary-light:#eff6ff;
  --cv-brand-accent:       #2563eb;
  --cv-brand-gradient:     linear-gradient(135deg, #2563eb, #7c3aed);
  --cv-brand-surface:      #0a0f1e;

  /* ── Text ── */
  --cv-text-primary:   #0f172a;
  --cv-text-secondary: #334155;
  --cv-text-muted:     #64748b;

  /* ── Backgrounds ── */
  --cv-bg-primary: #f8fafc;
  --cv-bg-surface: #ffffff;
  --cv-bg-raised:  #f8fafc;

  /* ── Borders ── */
  --cv-border-default: #e2e8f0;
  --cv-border-light:   #f1f5f9;

  /* ── Status Colors ── */
  --cv-color-success:     #059669;
  --cv-color-success-dim: rgba(5, 150, 105, 0.08);
  --cv-color-danger:      #dc2626;
  --cv-color-warning:     #d97706;
  --cv-color-info:        #0284c7;

  /* ── Spacing ── */
  --cv-space-xs: 4px;
  --cv-space-sm: 8px;
  --cv-space-md: 16px;
  --cv-space-lg: 24px;
  --cv-space-xl: 40px;

  /* ── Radii ── */
  --cv-radius-sm:   8px;
  --cv-radius-md:   12px;
  --cv-radius-lg:   16px;
  --cv-radius-pill: 999px;

  /* ── Shadows ── */
  --cv-shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --cv-shadow-md:    0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --cv-shadow-lg:    0 4px 16px rgba(0,0,0,0.08);
  --cv-shadow-glass: 0 8px 32px rgba(0,0,0,0.15);

  /* ── Typography ── */
  --cv-font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cv-font-mono:   'Cascadia Code', 'Fira Code', monospace;

  /* ── Motion ── */
  --cv-ease-spring:    cubic-bezier(0.16, 1, 0.3, 1);
  --cv-ease-expo:      cubic-bezier(0.19, 1, 0.22, 1);
  --cv-duration-fast:  200ms;
  --cv-duration-normal:400ms;

  /* ── Focus / Readonly ── */
  --cv-focus-ring:  rgba(37, 99, 235, 0.12);
  --cv-focus-bg:    #ffffff;
  --cv-readonly-bg: #f1f5f9;
}

/* ── Backward-Compatible Aliases (--atq-* → --cv-*) ── */
:root {
  --atq-primary:       var(--cv-brand-primary);
  --atq-primary-dark:  var(--cv-brand-primary-dark);
  --atq-primary-light: var(--cv-brand-primary-light);
  --atq-accent:        var(--cv-brand-accent);
  --atq-text:          var(--cv-text-primary);
  --atq-text-secondary:var(--cv-text-secondary);
  --atq-text-muted:    var(--cv-text-muted);
  --atq-border:        var(--cv-border-default);
  --atq-border-light:  var(--cv-border-light);
  --atq-bg:            var(--cv-bg-primary);
  --atq-surface:       var(--cv-bg-surface);
  --atq-surface-raised:var(--cv-bg-raised);
  --atq-success:       var(--cv-color-success);
  --atq-success-dim:   var(--cv-color-success-dim);
  --atq-danger:        var(--cv-color-danger);
  --atq-warning:       var(--cv-color-warning);
  --atq-info:          var(--cv-color-info);
  --atq-radius:        var(--cv-radius-md);
  --atq-radius-lg:     var(--cv-radius-lg);
  --atq-radius-sm:     var(--cv-radius-sm);
  --atq-shadow:        var(--cv-shadow-sm);
  --atq-shadow-md:     var(--cv-shadow-md);
  --atq-shadow-lg:     var(--cv-shadow-lg);
  --atq-font:          var(--cv-font-family);
  --atq-ease:          var(--cv-ease-spring);
  --atq-focus-ring:    var(--cv-focus-ring);
  --atq-focus-bg:      var(--cv-focus-bg);
  --atq-readonly-bg:   var(--cv-readonly-bg);
}

/* ── Dark Theme Overrides ── */
html[data-theme="dark"] {
  --cv-brand-primary:      #a78bfa;
  --cv-brand-primary-dark: #8b5cf6;
  --cv-brand-primary-light:rgba(167, 139, 250, 0.12);
  --cv-brand-accent:       #60a5fa;
  --cv-text-primary:       #ffffff;
  --cv-text-secondary:     #d4d4d4;
  --cv-text-muted:         #a3a3a3;
  --cv-border-default:     #333333;
  --cv-border-light:       #2a2a2a;
  --cv-bg-primary:         #0a0a0a;
  --cv-bg-surface:         #1a1a1a;
  --cv-bg-raised:          #262626;
  --cv-bg-elevated:        #131b2e;
  --cv-border-subtle:      rgba(255,255,255,0.06);
  --cv-color-success:      #10b981;
  --cv-color-success-dim:  rgba(16, 185, 129, 0.15);
  --cv-color-danger:       #ef4444;
  --cv-color-warning:      #f59e0b;
  --cv-shadow-sm:          0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --cv-shadow-md:          0 4px 12px rgba(0,0,0,0.4);
  --cv-shadow-lg:          0 4px 16px rgba(0,0,0,0.4);
  --cv-focus-ring:         rgba(167, 139, 250, 0.2);
  --cv-focus-bg:           #2d2d2d;
  --cv-readonly-bg:        rgba(255,255,255,0.05);
}