/* ============================================
   API Key Manager Pro — Design Tokens
   ============================================ */
:root {
  /* Brand Blues */
  --color-primary:        #1a6bff;
  --color-primary-dark:   #1250cc;
  --color-primary-light:  #e8f0fe;
  --color-primary-glow:   rgba(26, 107, 255, 0.18);

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #f0f4ff;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f6f8ff;
  --color-border:         #d8e2f5;
  --color-border-strong:  #b8c8e8;

  /* Grays */
  --color-gray-50:        #f8fafc;
  --color-gray-100:       #f0f4f8;
  --color-gray-200:       #dde4ee;
  --color-gray-300:       #c3cfdf;
  --color-gray-400:       #94a3b8;
  --color-gray-500:       #64748b;
  --color-gray-600:       #475569;
  --color-gray-700:       #334155;
  --color-gray-800:       #1e293b;
  --color-gray-900:       #0f172a;

  /* Semantic */
  --color-success:        #10b981;
  --color-success-bg:     #d1fae5;
  --color-warning:        #f59e0b;
  --color-warning-bg:     #fef3c7;
  --color-danger:         #ef4444;
  --color-danger-bg:      #fee2e2;
  --color-info:           #06b6d4;
  --color-info-bg:        #cffafe;

  /* Strength Colors */
  --strength-weak:        #ef4444;
  --strength-fair:        #f59e0b;
  --strength-good:        #3b82f6;
  --strength-strong:      #10b981;

  /* Category Colors */
  --cat-payment:          #8b5cf6;
  --cat-cloud:            #06b6d4;
  --cat-social:           #f472b6;
  --cat-database:         #10b981;
  --cat-analytics:        #f59e0b;
  --cat-ai:               #6366f1;
  --cat-messaging:        #14b8a6;
  --cat-other:            #94a3b8;

  /* Typography */
  --font-sans:            'Inter', 'Poppins', system-ui, sans-serif;
  --font-mono:            'Roboto Mono', 'JetBrains Mono', monospace;

  /* Sizing */
  --radius-sm:            6px;
  --radius-md:            10px;
  --radius-lg:            16px;
  --radius-xl:            22px;
  --radius-full:          9999px;

  /* Shadows */
  --shadow-xs:            0 1px 3px rgba(10,30,80,0.07);
  --shadow-sm:            0 2px 8px rgba(10,30,80,0.09);
  --shadow-md:            0 4px 20px rgba(10,30,80,0.10);
  --shadow-lg:            0 8px 40px rgba(10,30,80,0.13);
  --shadow-xl:            0 16px 60px rgba(10,30,80,0.16);
  --shadow-glow:          0 0 0 3px rgba(26,107,255,0.22);

  /* Transitions */
  --transition-fast:      all 0.15s ease;
  --transition:           all 0.25s ease;
  --transition-slow:      all 0.4s ease;

  /* Sidebar */
  --sidebar-width:        260px;
  --sidebar-collapsed:    68px;
  --header-height:        64px;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-bg:             #0d1117;
  --color-surface:        #161b22;
  --color-surface-alt:    #1c2333;
  --color-border:         #2a3548;
  --color-border-strong:  #3d506a;
  --color-primary-light:  #1a2744;
  --color-gray-50:        #1c2333;
  --color-gray-100:       #1e2a3b;
  --color-gray-200:       #253349;
  --color-gray-300:       #3d506a;
  --color-gray-400:       #5a7099;
  --color-gray-500:       #7a92b5;
  --color-gray-600:       #94a8c8;
  --color-gray-700:       #b0c2de;
  --color-gray-800:       #ccdaee;
  --color-gray-900:       #e8eef8;
  --color-white:          #e8eef8;
  --shadow-sm:            0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:            0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:            0 8px 40px rgba(0,0,0,0.5);
}