/* ═══════════════════════════════════════════════════════════════
   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;
}

/* ── Edit-Case Blueprint Tokens (--cvb-* → page-specific palette) ── */
/* Referenced by the Dataverse edit-case page CSS (§1 Design Tokens). */
:root {
  --cvb-primary:        #4f7cff;
  --cvb-primary-hover:  #3b66f5;
  --cvb-accent:         #0ea5e9;
  --cvb-text:           #0f172a;
  --cvb-text-secondary: #334155;
  --cvb-border:         #e2e6ef;
  --cvb-border-hover:   #cfd6e6;
  --cvb-bg:             #f6f7fb;
  --cvb-surface:        #ffffff;
  --cvb-surface-raised: #f1f4f9;
  --cvb-success:        #059669;
  --cvb-success-dim:    rgba(5,150,105,0.08);
  --cvb-danger:         #dc2626;
  --cvb-warning:        #d97706;
  --cvb-info:           #2563eb;
  --cvb-radius:         22px;
  --cvb-radius-sm:      14px;
  --cvb-radius-xs:      10px;
  --cvb-shadow-sm:      0 1px 3px rgba(15,23,42,0.05);
  --cvb-shadow-md:      0 8px 24px rgba(15,23,42,0.08);
  --cvb-shadow-lg:      0 20px 50px rgba(15,23,42,0.10);
  --cvb-ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --cvb-gradient:       linear-gradient(135deg, #4f7cff 0%, #0ea5e9 100%);
  --cvb-focus-ring:     rgba(79,124,255,0.18);
  --cvb-focus-bg:       #ffffff;
  --cvb-readonly-bg:    #f1f4f9;
}
html[data-theme="dark"] {
  --cvb-primary:        #8ab4ff;
  --cvb-primary-hover:  #6c9dff;
  --cvb-accent:         #22d3ee;
  --cvb-text:           #e7edf7;
  --cvb-text-secondary: #b0bdd0;
  --cvb-border:         rgba(138,180,255,0.08);
  --cvb-border-hover:   rgba(138,180,255,0.14);
  --cvb-bg:             #0b0f16;
  --cvb-surface:        #141a24;
  --cvb-surface-raised: #1a2030;
  --cvb-success:        #10b981;
  --cvb-success-dim:    rgba(16,185,129,0.12);
  --cvb-danger:         #f87171;
  --cvb-warning:        #f59e0b;
  --cvb-info:           #60a5fa;
  --cvb-shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --cvb-shadow-md:      0 8px 24px rgba(0,0,0,0.4);
  --cvb-shadow-lg:      0 20px 50px rgba(0,0,0,0.5);
  --cvb-gradient:       linear-gradient(135deg, #8ab4ff 0%, #22d3ee 100%);
  --cvb-focus-ring:     rgba(138,180,255,0.22);
  --cvb-focus-bg:       #1a2030;
  --cvb-readonly-bg:    rgba(255,255,255,0.04);
}

/* ── 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);
}