/* =====================================================
   variables.css — Design Tokens
   Expense Tracker v0.2.0
   ===================================================== */

:root {
  /* Colors — Black & White theme */
  --c-bg:         #F5F5F5;
  --c-surface:    #FFFFFF;
  --c-surface2:   #EFEFEF;
  --c-border:     #E2E2E2;
  --c-border2:    #C8C8C8;

  --c-primary:    #111111;
  --c-primary-d:  #000000;
  --c-primary-l:  #F0F0F0;
  --c-secondary:  #444444;

  --c-success:    #0A875A;
  --c-success-l:  #E6F5EF;
  --c-warning:    #C27803;
  --c-warning-l:  #FEF3C7;
  --c-danger:     #C81E1E;
  --c-danger-l:   #FDE8E8;
  --c-info:       #555555;
  --c-info-l:     #F0F0F0;

  --c-text:       #111827;
  --c-text2:      #4B5563;
  --c-text3:      #9CA3AF;
  --c-text-inv:   #FFFFFF;

  /* Category colors */
  --cat-복리후생:   #3B82F6;
  --cat-접대:      #EF4444;
  --cat-교통:      #10B981;
  --cat-소통지원:   #F59E0B;
  --cat-통신:      #8B5CF6;
  --cat-소모품:    #EC4899;
  --cat-회의:      #06B6D4;
  --cat-기타:      #6B7280;

  /* Typography */
  --font-sans:    'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);
  --shadow-xl:  0 20px 60px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);

  /* Transitions */
  --t-fast:   0.12s ease;
  --t-base:   0.20s ease;
  --t-slow:   0.35s cubic-bezier(.22,1,.36,1);

  /* Layout */
  --header-h:   110px;
  --max-w:      640px;
  --bottom-nav: 68px;
}