/* =============================================
   SkillMarket — CSS Design System Variables
   Premium, minimal, tech-forward B2B aesthetic
   ============================================= */

:root {
  /* === Brand Colors === */
  --color-primary:        #5B4FE8;
  --color-primary-hover:  #4A3ED6;
  --color-primary-light:  #EEF0FF;
  --color-primary-mid:    #C7C2F8;

  /* === Neutral Palette === */
  --color-secondary:      #1A1A2E;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F8F9FC;
  --color-surface-3:      #F0F2F8;
  --color-border:         #E5E7F0;
  --color-border-light:   #F0F2F8;

  /* === Text === */
  --color-text:           #1E1E30;
  --color-text-2:         #4A4A62;
  --color-text-muted:     #6B7280;
  --color-text-xmuted:    #9CA3AF;

  /* === Semantic === */
  --color-success:        #10B981;
  --color-success-bg:     #ECFDF5;
  --color-warning:        #F59E0B;
  --color-warning-bg:     #FFFBEB;
  --color-error:          #EF4444;
  --color-error-bg:       #FEF2F2;
  --color-info:           #3B82F6;
  --color-info-bg:        #EFF6FF;

  /* === Category Colors (for badges) === */
  --cat-legal:        #7C3AED;
  --cat-accounting:   #0891B2;
  --cat-hr:           #059669;
  --cat-sales:        #DC2626;
  --cat-pm:           #D97706;
  --cat-procurement:  #2563EB;
  --cat-safety:       #EA580C;
  --cat-psychology:   #7C3AED;
  --cat-default:      #6B7280;

  /* === Shadows === */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.08);
  --shadow-card: 0 2px 12px rgba(91,79,232,.07);
  --shadow-md:   0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
  --shadow-xl:   0 20px 60px rgba(0,0,0,.14);
  --shadow-elevated: 0 8px 32px rgba(91,79,232,.14);

  /* === Radius === */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-card: 16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.8125rem; /* 13px */
  --text-base:  0.9375rem; /* 15px */
  --text-md:    1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* === 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;

  /* === Layout === */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --navbar-height: 64px;
  --sidebar-width: 260px;

  /* === Transitions === */
  --transition-fast:   0.15s ease;
  --transition:        0.2s ease;
  --transition-slow:   0.3s ease;
  --transition-spring: 0.35s cubic-bezier(.34,1.56,.64,1);
}