/* =============================================================
   CF대납결제 Design System — Colors & Typography Tokens
   업무용 웹 애플리케이션을 위한 토큰 정의
   ============================================================= */

/* --- Fonts: Pretendard via jsdelivr, Noto Sans KR fallback via Google Fonts --- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ COLOR PALETTE ============ */

  /* Primary — Warm Amber (호박색) */
  --amber-50:  #FDF6E8;
  --amber-100: #FAEACB;
  --amber-200: #F4D69A;
  --amber-300: #EEBE69;
  --amber-400: #EBAE50;
  --amber-500: #E8A33D;  /* BRAND ACCENT */
  --amber-600: #D18A29;
  --amber-700: #A86C1D;
  --amber-800: #7B4E15;
  --amber-900: #4E320D;

  /* Neutrals — Warm Gray (따뜻한 회색, 약간의 갈색 톤) */
  --paper:    #FBF9F4;   /* 페이지 배경 */
  --ink-50:   #F8F5EF;
  --ink-100:  #EFEAE3;
  --ink-200:  #DCD5CA;
  --ink-300:  #C9C0B5;
  --ink-400:  #9C9388;
  --ink-500:  #7A7066;
  --ink-600:  #5E544B;
  --ink-700:  #4A423A;
  --ink-800:  #2F2923;
  --ink-900:  #1F1B16;   /* 본문 텍스트 */
  --white:    #FFFFFF;

  /* Semantic */
  --success-50:  #E8F3EC;
  --success-500: #3F8A55;
  --success-700: #2F6741;

  --warning-50:  #FDF2E4;
  --warning-500: #D4872B;
  --warning-700: #A66820;

  --danger-50:   #FBE8E8;
  --danger-500:  #C14545;
  --danger-700:  #8F3232;

  --info-50:     #E8F0F9;
  --info-500:    #3A6B9B;
  --info-700:    #2A5179;

  /* Data / Category (로고에서 추출) */
  --cat-red:     #D94437;
  --cat-orange:  #E8A33D;
  --cat-teal:    #35A89E;
  --cat-blue:    #2E6DB5;

  /* ============ SEMANTIC COLOR ROLES ============ */
  --bg-page:       var(--paper);
  --bg-surface:    var(--white);
  --bg-subtle:     var(--ink-50);
  --bg-hover:      var(--ink-100);

  --fg-primary:    var(--ink-900);
  --fg-secondary:  var(--ink-700);
  --fg-muted:      var(--ink-500);
  --fg-disabled:   var(--ink-400);
  --fg-inverse:    var(--white);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--amber-500);

  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-600);
  --accent-subtle: var(--amber-50);

  /* ============ TYPOGRAPHY ============ */
  --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR',
               -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Size scale (rem base = 16px) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Letter spacing (Korean 서체는 -0.01em 살짝 타이트하게) */
  --ls-tight: -0.02em;
  --ls-normal: -0.01em;
  --ls-loose:  0;

  /* ============ SPACING (8pt grid) ============ */
  --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;

  /* ============ RADIUS ============ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ============ SHADOW (따뜻한 갈색톤 베이스) ============ */
  --shadow-xs: 0 1px 2px rgba(74, 55, 30, 0.04);
  --shadow-sm: 0 2px 6px rgba(74, 55, 30, 0.06), 0 1px 2px rgba(74, 55, 30, 0.04);
  --shadow-md: 0 8px 16px rgba(74, 55, 30, 0.08), 0 2px 4px rgba(74, 55, 30, 0.05);
  --shadow-lg: 0 16px 32px rgba(74, 55, 30, 0.12), 0 4px 8px rgba(74, 55, 30, 0.06);
  --shadow-focus: 0 0 0 3px rgba(232, 163, 61, 0.28);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* ============ LAYOUT ============ */
  --layout-sidebar-w: 240px;
  --layout-sidebar-collapsed-w: 64px;
  --layout-header-h: 56px;
  --layout-content-max: 1280px;
}

/* ============ BASE TYPOGRAPHY ============ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'tnum';
}

h1, .h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  margin: 0;
}

h3, .h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-primary);
  margin: 0;
}

h4, .h4 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  margin: 0;
}

.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  letter-spacing: 0;
}

.label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
  letter-spacing: 0;
}

.numeric, .num, code, kbd {
  font-feature-settings: 'tnum', 'ss01';
  font-variant-numeric: tabular-nums;
}

code, pre, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--amber-200); color: var(--ink-900); }