/* ============================================================
   CVFlow — Design Tokens (CSS Custom Properties)
   All visual values live here. Easy to theme & maintain.
   ============================================================ */

:root {
  /* --- Brand Colors --- */
  --brand-primary: #6366f1;
  --brand-primary-light: #818cf8;
  --brand-primary-dark: #4f46e5;
  --brand-secondary: #0ea5e9;
  --brand-accent: #f43f5e;
  --brand-success: #10b981;
  --brand-warning: #f59e0b;
  --brand-purple: #8b5cf6;

  /* --- Background & Surface --- */
  --bg-base: #0a0f1e;
  --bg-surface: #111827;
  --bg-elevated: #1f2937;
  --bg-overlay: rgba(17, 24, 39, 0.9);

  /* --- Text Colors --- */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  /* --- Borders --- */
  --border-subtle: #1e293b;
  --border-default: #334155;
  --border-strong: #475569;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.6), 0 10px 10px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.35);
  --shadow-card-hover: 0 20px 40px rgba(99, 102, 241, 0.15);

  /* --- Gradients --- */
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  --gradient-card: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.08) 100%);
  --gradient-cta: linear-gradient(135deg, #6366f1 0%, #f43f5e 100%);
  --gradient-shine: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);

  /* --- Typography --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic: 'Amiri', 'Noto Sans Arabic', serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 2rem);
  --navbar-height: 72px;
  --sidebar-width: 280px;

  /* --- Border Radius --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-index --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* --- Navbar glassmorphism --- */
  --nav-bg: rgba(10, 15, 30, 0.85);
  --nav-border: rgba(255, 255, 255, 0.05);
}