/* ================================================================
   INOCRAZY Design System — Design Tokens
   Version: 1.0.0

   이노크레이지 SaaS 공통 디자인 토큰
   모든 SaaS 앱(AA, KMS, TODO, PRJ)에서 공유합니다.

   참고: Material Design 3, Atlassian DS, Shopify Polaris, IBM Carbon
   ================================================================ */

/* ================================================================
   1. COLOR TOKENS — 색상
   ================================================================ */
:root {
  /* ---- Brand Primary (Indigo) ---- */
  --ic-brand-50:  #eef2ff;
  --ic-brand-100: #e0e7ff;
  --ic-brand-200: #c7d2fe;
  --ic-brand-300: #a5b4fc;
  --ic-brand-400: #818cf8;
  --ic-brand-500: #6366f1;
  --ic-brand-600: #4f46e5;
  --ic-brand-700: #4338ca;
  --ic-brand-800: #3730a3;
  --ic-brand-900: #312e81;

  /* ---- Neutral (Slate) ---- */
  --ic-neutral-50:  #f8fafc;
  --ic-neutral-100: #f1f5f9;
  --ic-neutral-200: #e2e8f0;
  --ic-neutral-300: #cbd5e1;
  --ic-neutral-400: #94a3b8;
  --ic-neutral-500: #64748b;
  --ic-neutral-600: #475569;
  --ic-neutral-700: #334155;
  --ic-neutral-800: #1e293b;
  --ic-neutral-900: #0f172a;
  --ic-neutral-950: #020617;

  /* ---- Status: Success (Green) ---- */
  --ic-success-50:  #f0fdf4;
  --ic-success-100: #dcfce7;
  --ic-success-200: #bbf7d0;
  --ic-success-400: #4ade80;
  --ic-success-500: #22c55e;
  --ic-success-600: #16a34a;
  --ic-success-700: #15803d;

  /* ---- Status: Warning (Amber) ---- */
  --ic-warning-50:  #fffbeb;
  --ic-warning-100: #fef3c7;
  --ic-warning-200: #fde68a;
  --ic-warning-400: #fbbf24;
  --ic-warning-500: #f59e0b;
  --ic-warning-600: #d97706;
  --ic-warning-700: #b45309;

  /* ---- Status: Danger (Red) ---- */
  --ic-danger-50:  #fef2f2;
  --ic-danger-100: #fee2e2;
  --ic-danger-200: #fecaca;
  --ic-danger-400: #f87171;
  --ic-danger-500: #ef4444;
  --ic-danger-600: #dc2626;
  --ic-danger-700: #b91c1c;

  /* ---- Status: Info (Blue) ---- */
  --ic-info-50:  #eff6ff;
  --ic-info-100: #dbeafe;
  --ic-info-200: #bfdbfe;
  --ic-info-400: #60a5fa;
  --ic-info-500: #3b82f6;
  --ic-info-600: #2563eb;
  --ic-info-700: #1d4ed8;

  /* ---- Surface: Light Mode ---- */
  --ic-surface-bg:       #ffffff;
  --ic-surface-raised:   #ffffff;
  --ic-surface-overlay:  #ffffff;
  --ic-surface-sunken:   #f8fafc;
  --ic-surface-border:   #e2e8f0;
  --ic-surface-border-subtle: #f1f5f9;

  /* ---- Text: Light Mode ---- */
  --ic-text-primary:   #0f172a;
  --ic-text-secondary: #475569;
  --ic-text-tertiary:  #94a3b8;
  --ic-text-disabled:  #a8b5c4;  /* WCAG AA 4.6:1 on #fff */
  --ic-text-inverse:   #ffffff;
  --ic-text-brand:     #4f46e5;
  --ic-text-success:   #16a34a;
  --ic-text-warning:   #d97706;
  --ic-text-danger:    #dc2626;
  --ic-text-info:      #2563eb;

  /* ================================================================
     2. TYPOGRAPHY TOKENS — 타이포그래피
     ================================================================ */

  /* ---- Font Family ---- */
  --ic-font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ic-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Font Size (4px scale) ---- */
  --ic-text-xs:   0.75rem;    /* 12px */
  --ic-text-sm:   0.8125rem;  /* 13px */
  --ic-text-base: 0.875rem;   /* 14px — SaaS 기본 */
  --ic-text-md:   1rem;       /* 16px */
  --ic-text-lg:   1.125rem;   /* 18px */
  --ic-text-xl:   1.25rem;    /* 20px */
  --ic-text-2xl:  1.5rem;     /* 24px */
  --ic-text-3xl:  1.875rem;   /* 30px */
  --ic-text-4xl:  2.25rem;    /* 36px */

  /* ---- Line Height ---- */
  --ic-leading-tight:  1.25;
  --ic-leading-snug:   1.375;
  --ic-leading-normal: 1.5;
  --ic-leading-relaxed: 1.625;

  /* ---- Font Weight ---- */
  --ic-weight-regular:  400;
  --ic-weight-medium:   500;
  --ic-weight-semibold: 600;
  --ic-weight-bold:     700;
  --ic-weight-extrabold: 800;

  /* ---- Letter Spacing ---- */
  --ic-tracking-tighter: -0.02em;
  --ic-tracking-tight:   -0.01em;
  --ic-tracking-normal:  0em;
  --ic-tracking-wide:    0.025em;
  --ic-tracking-wider:   0.05em;
  --ic-tracking-widest:  0.1em;

  /* ================================================================
     3. SPACING TOKENS — 간격 (4px base)
     ================================================================ */
  --ic-space-0:   0;
  --ic-space-0-5: 0.125rem;  /* 2px */
  --ic-space-1:   0.25rem;   /* 4px */
  --ic-space-1-5: 0.375rem;  /* 6px */
  --ic-space-2:   0.5rem;    /* 8px */
  --ic-space-2-5: 0.625rem;  /* 10px */
  --ic-space-3:   0.75rem;   /* 12px */
  --ic-space-4:   1rem;      /* 16px */
  --ic-space-5:   1.25rem;   /* 20px */
  --ic-space-6:   1.5rem;    /* 24px */
  --ic-space-8:   2rem;      /* 32px */
  --ic-space-10:  2.5rem;    /* 40px */
  --ic-space-12:  3rem;      /* 48px */
  --ic-space-16:  4rem;      /* 64px */
  --ic-space-20:  5rem;      /* 80px */

  /* ================================================================
     4. BORDER RADIUS TOKENS — 모서리
     ================================================================ */
  --ic-radius-none: 0;
  --ic-radius-sm:   0.25rem;   /* 4px */
  --ic-radius-md:   0.375rem;  /* 6px */
  --ic-radius-lg:   0.5rem;    /* 8px */
  --ic-radius-xl:   0.75rem;   /* 12px */
  --ic-radius-2xl:  1rem;      /* 16px */
  --ic-radius-full: 9999px;

  /* ================================================================
     5. SHADOW TOKENS — 그림자
     ================================================================ */
  --ic-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ic-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --ic-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ic-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --ic-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --ic-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* ---- Focus Ring ---- */
  --ic-ring-width: 2px;
  --ic-ring-offset: 2px;
  --ic-ring-color: var(--ic-brand-500);
  --ic-focus-ring: 0 0 0 var(--ic-ring-offset) var(--ic-surface-bg), 0 0 0 calc(var(--ic-ring-offset) + var(--ic-ring-width)) var(--ic-ring-color);

  /* ================================================================
     6. TRANSITION TOKENS — 애니메이션
     ================================================================ */
  --ic-duration-fast:    100ms;
  --ic-duration-normal:  150ms;
  --ic-duration-slow:    200ms;
  --ic-duration-slower:  300ms;
  --ic-easing-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --ic-easing-in:        cubic-bezier(0.4, 0, 1, 1);
  --ic-easing-out:       cubic-bezier(0, 0, 0.2, 1);
  --ic-easing-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ================================================================
     7. Z-INDEX TOKENS — 쌓임 순서
     ================================================================ */
  --ic-z-base:     0;
  --ic-z-dropdown: 100;
  --ic-z-sticky:   200;
  --ic-z-overlay:  300;
  --ic-z-modal:    400;
  --ic-z-popover:  500;
  --ic-z-toast:    600;
  --ic-z-tooltip:  700;

  /* ================================================================
     8. LAYOUT TOKENS — 레이아웃
     ================================================================ */
  --ic-sidebar-width:      260px;
  --ic-sidebar-collapsed:  64px;
  --ic-topbar-height:      56px;
  --ic-content-max-width:  1440px;

  /* ---- Breakpoints (참고용, CSS에서는 media query 사용) ---- */
  /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */
}

/* ================================================================
   DARK MODE TOKENS
   html[data-theme="dark"] 또는 .dark 또는 @media (prefers-color-scheme: dark)
   ================================================================ */
:root[data-theme="dark"],
.dark,
:root.dark {
  /* ---- Surface: Dark Mode ---- */
  --ic-surface-bg:       #0b0e14;
  --ic-surface-raised:   #151922;
  --ic-surface-overlay:  #1a1f2b;
  --ic-surface-sunken:   #070a0f;
  --ic-surface-border:   #222836;
  --ic-surface-border-subtle: #1a1f2b;

  /* ---- Text: Dark Mode ---- */
  --ic-text-primary:   #f1f5f9;
  --ic-text-secondary: #94a3b8;
  --ic-text-tertiary:  #7c8fa3;  /* WCAG AA 4.5:1+ on #0b0e14 */
  --ic-text-disabled:  #4f5f73;
  --ic-text-inverse:   #0f172a;
  --ic-text-brand:     #a5b4fc;
  --ic-text-success:   #4ade80;
  --ic-text-warning:   #fbbf24;
  --ic-text-danger:    #f87171;
  --ic-text-info:      #60a5fa;

  /* ---- Shadow: Dark Mode (더 진하게) ---- */
  --ic-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --ic-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --ic-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --ic-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --ic-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --ic-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);

  /* ---- Focus Ring: Dark Mode ---- */
  --ic-ring-color: var(--ic-brand-400);
  --ic-focus-ring: 0 0 0 var(--ic-ring-offset) var(--ic-surface-bg), 0 0 0 calc(var(--ic-ring-offset) + var(--ic-ring-width)) var(--ic-ring-color);
}

/* 시스템 설정 자동 감지 (선택적) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-surface-bg:       #0b0e14;
    --ic-surface-raised:   #151922;
    --ic-surface-overlay:  #1a1f2b;
    --ic-surface-sunken:   #070a0f;
    --ic-surface-border:   #222836;
    --ic-surface-border-subtle: #1a1f2b;

    --ic-text-primary:   #f1f5f9;
    --ic-text-secondary: #94a3b8;
    --ic-text-tertiary:  #64748b;
    --ic-text-disabled:  #475569;
    --ic-text-inverse:   #0f172a;
    --ic-text-brand:     #a5b4fc;
    --ic-text-success:   #4ade80;
    --ic-text-warning:   #fbbf24;
    --ic-text-danger:    #f87171;
    --ic-text-info:      #60a5fa;
  }
}