/* ====================================================
 * AI-KMS Design Tokens
 * Based on KT Seamless Flow Design System
 * v1.0 · 2026.05.07
 * ====================================================
 *
 * Usage:
 *   @import "./tokens.css";
 *   .my-button { background: var(--color-brand-500); }
 *
 * 모든 컴포넌트는 이 토큰만을 통해 스타일을 정의해야 합니다.
 * 하드코딩된 색상값(#FF0000 등)은 절대 사용하지 마세요.
 * ==================================================== */

:root {
  /* =========================================
   * 1. BRAND COLORS · KT Red 계열
   * Primary CTA, 핵심 강조에만 절제 사용
   * ========================================= */
  --color-brand-50:  #FCE9E9;
  --color-brand-100: #F8C7C9;
  --color-brand-200: #F09094;
  --color-brand-300: #E85A5F;
  --color-brand-400: #E43F45;
  --color-brand-500: #E0282F;  /* ★ KT Signature */
  --color-brand-600: #C81F25;
  --color-brand-700: #A8161B;
  --color-brand-800: #8C1216;
  --color-brand-900: #6E0F12;

  /* =========================================
   * 2. NEUTRAL · 무채색 시스템 (KT 표준)
   * ========================================= */
  --color-text-primary:   #191A1B;
  --color-text-secondary: #55585D;
  --color-text-tertiary:  #8A8D91;
  --color-text-disabled:  #BABDC2;
  --color-text-inverse:   #FFFFFF;

  --color-border:         #E9EAEE;
  --color-border-strong:  #D1D3D8;
  --color-divider:        #EBEBEB;

  --color-surface:        #FFFFFF;
  --color-surface-hover:  #F9FAFB;
  --color-bg:             #FAFAFA;
  --color-bg-muted:       #F3F4F6;

  --color-link:           #1A1A1A;
  --color-link-hover:     #E0282F;

  /* =========================================
   * 3. SEMANTIC · 상태 컬러 (KT Callout 팔레트)
   * ========================================= */
  --color-info:        #0099E0;  /* KT Negative · 파랑 */
  --color-info-bg:     #D9F2FF;

  --color-success:     #6941FF;  /* KT Positive · 보라 */
  --color-success-bg:  #EFEBFF;

  --color-warning:     #007F7F;  /* KT Neutral · 틸 */
  --color-warning-bg:  #E1F5F5;

  --color-error:       #E0282F;  /* KT Red와 동일 */
  --color-error-bg:    #FCE9E9;

  /* =========================================
   * 4. TYPOGRAPHY
   * ========================================= */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Font Weights — KT 표준 */
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;  /* ★ Body 기본 */
  --font-weight-semibold:  600;  /* ★ Heading 기본 */
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Font Sizes */
  --font-size-display-1: 56px;
  --font-size-display-2: 40px;
  --font-size-h1:        32px;
  --font-size-h2:        24px;
  --font-size-h3:        18px;
  --font-size-body-lg:   18px;
  --font-size-body:      15px;
  --font-size-caption:   13px;
  --font-size-small:     12px;
  --font-size-xs:        11px;

  /* Line Heights */
  --line-height-tight:   1.15;
  --line-height-snug:    1.4;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.7;

  /* Letter Spacing */
  --letter-spacing-tight:  -1.5px;
  --letter-spacing-snug:   -0.5px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.5px;
  --letter-spacing-wider:  0.8px;

  /* =========================================
   * 5. SPACING · 4pt/8pt scale
   * ========================================= */
  --space-0:  0;
  --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;

  /* =========================================
   * 6. RADIUS
   * ========================================= */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* =========================================
   * 7. ELEVATION · 그림자
   * ========================================= */
  --shadow-1: 0 1px 2px rgba(25, 26, 27, 0.06);
  --shadow-2: 0 2px 8px rgba(25, 26, 27, 0.08);
  --shadow-3: 0 8px 24px rgba(25, 26, 27, 0.10);
  --shadow-4: 0 16px 40px rgba(25, 26, 27, 0.14);
  --shadow-focus: 0 0 0 3px var(--color-brand-50);

  /* =========================================
   * 8. BREAKPOINTS (CSS variables for use in JS)
   * ========================================= */
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;

  /* =========================================
   * 9. MOTION · 애니메이션
   * ========================================= */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* =========================================
   * 10. Z-INDEX
   * ========================================= */
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-overlay:  1200;
  --z-modal:    1300;
  --z-popover:  1400;
  --z-toast:    1500;
  --z-tooltip:  1600;
}

/* =========================================
 * DARK MODE (선택적 — 향후 확장용)
 * ========================================= */
@media (prefers-color-scheme: dark) {
  :root.theme-auto,
  :root.theme-dark {
    --color-text-primary:   #F5F5F7;
    --color-text-secondary: #B0B3B8;
    --color-text-tertiary:  #8A8D91;
    --color-text-disabled:  #55585D;

    --color-border:        #2A2C30;
    --color-border-strong: #3A3D42;
    --color-divider:       #2A2C30;

    --color-surface:       #1C1D1F;
    --color-surface-hover: #25272A;
    --color-bg:            #131416;
    --color-bg-muted:      #25272A;

    --color-link:          #F5F5F7;

    /* Brand 컬러는 다크 모드에서도 그대로 유지 */
    /* Semantic 배경은 살짝 톤 다운 */
    --color-info-bg:    rgba(0, 153, 224, 0.15);
    --color-success-bg: rgba(105, 65, 255, 0.15);
    --color-warning-bg: rgba(0, 127, 127, 0.15);
    --color-error-bg:   rgba(224, 40, 47, 0.15);
  }
}