/* ═══════════════════════════════════════════════════════════
   VERBATIM — CSS Custom Properties  ·  Minimalist Modern
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Core backgrounds */
  --deep:           #FAFAFA;
  --primary:        #FFFFFF;
  --surface:        #FFFFFF;
  --surface-raised: #F1F5F9;
  --navy:           #0F172A;

  /* Brand accent — Electric Blue */
  --gold:        #0052FF;
  --gold-soft:   #4D7CFF;
  --gold-dim:    rgba(0,82,255,0.07);
  --gold-border: rgba(0,82,255,0.18);
  --accent:      #0052FF;
  --accent-soft: #4D7CFF;

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;
  --body-text:      #0F172A;
  --muted:          #94A3B8;
  --subtle:         rgba(15,23,42,0.05);

  /* Borders */
  --border:      #E2E8F0;
  --border-soft: #F1F5F9;

  /* Semantic */
  --success:    #16A34A;
  --success-bg: rgba(22,163,74,0.08);
  --warning:    #D97706;
  --error:      #DC2626;
  --error-bg:   rgba(220,38,38,0.08);
  --info:       #0052FF;
  --info-bg:    rgba(0,82,255,0.08);

  /* Subscription tiers */
  --tier-free:       #16A34A;
  --tier-basic:      #0052FF;
  --tier-premium:    #7C3AED;
  --tier-enterprise: #0F172A;

  /* Typography */
  --font-display: 'Calistoga', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* Shadows — crisp, light */
  --shadow-sm:        0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:        0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
  --shadow-lg:        0 12px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-accent:    0 8px 32px rgba(0,82,255,0.14);
  --shadow-accent-lg: 0 16px 56px rgba(0,82,255,0.2);

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, #0052FF 0%, #4D7CFF 100%);
  --gradient-hero:   linear-gradient(135deg, #0052FF 0%, #7C3AED 100%);
  --gradient-text:   linear-gradient(135deg, #0052FF 0%, #4D7CFF 60%, #7C3AED 100%);

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

  /* Layout */
  --container-max:  1200px;
  --nav-height:     68px;
  --sidebar-width:  240px;
  --topbar-height:  60px;

  /* White alias */
  --white: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}