/* ============================================
   KBR Journal — Production Design Tokens
   어드민에서 관리하는 컬러(--c-navy, --c-yellow 등)는
   +layout.svelte에서 동적으로 설정됨
   ============================================ */

:root {
  /* ── Colors: 어드민에서 관리하지 않는 고정 토큰 ── */
  --c-white:      #FFFFFF;
  --c-gray:       #B5B2A5;
  --c-gray-dk:    #6B6960;
  --c-green:      #1A6B42;
  --c-green-lt:   #E6F5EE;

  /* ── Colors: On Dark ── */
  --c-on-dark:       rgba(255,255,255, 1);
  --c-on-dark-sub:   rgba(255,255,255, .7);
  --c-on-dark-muted: rgba(255,255,255, .4);

  /* ── Colors: Overlay ── */
  --c-backdrop:      rgba(0,0,0, .5);
  --c-backdrop-heavy:rgba(0,0,0, .85);

  /* ── Typography ── */
  --f-display: 'EB Garamond', serif;
  --f-body:    'DM Sans', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --fs-display: 36px;
  --fs-h1:      24px;
  --fs-h2:      20px;
  --fs-body:    15px;
  --fs-small:   13px;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-normal: 0;
  --ls-wide:   0.04em;

  /* ── Spacing (4px base) ── */
  --sp-2xs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;

  /* ── Border Radius ── */
  --r-sm:   4px;
  --r-md:   12px;
  --r-pill: 9999px;

  /* ── Border Width ── */
  --bw-thin:   1px;
  --bw-accent: 3px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0, .08);
  --shadow-md: 0 4px 12px rgba(0,0,0, .1);
  --shadow-lg: 0 8px 32px rgba(0,0,0, .15);

  /* ── Z-Index ── */
  --z-sticky:   10;
  --z-dropdown: 100;
  --z-modal:    1000;

  /* ── Transitions ── */
  --tr-fast:    150ms ease;
  --tr-default: 200ms ease;

  /* ── Layout ── */
  --max-w:       1200px;
  --max-w-narrow: 800px;
  --sidebar-w:   300px;
  --grid-gap:    32px;
}

/* ── 기존 변수명 매핑 (typeB 컴포넌트 호환) ── */
:root {
  /* Typography */
  --text-xs:   var(--fs-small);
  --text-sm:   var(--fs-body);
  --text-base: var(--fs-body);
  --text-lg:   var(--fs-h2);
  --text-xl:   var(--fs-h1);
  --text-2xl:  var(--fs-display);
  --font-md:   var(--fs-body);
  --font-sm:   var(--fs-small);

  /* Font Weight */
  --font-normal:    var(--fw-regular);
  --font-medium:    var(--fw-medium);
  --font-semibold:  var(--fw-bold);
  --font-bold:      var(--fw-bold);

  /* Font Family */
  --font-display: var(--f-display);
  --font-body:    var(--f-body);

  /* Colors — 어드민 변수 기반 매핑 */
  --text-primary:   var(--c-text);
  --text-secondary: var(--c-gray-dk);
  --text-tertiary:  var(--c-gray);
  --color-bg-primary:   var(--c-bg);
  --color-bg-secondary: var(--c-bg);
  --color-border:       var(--c-gray-lt);

  /* Border Radius */
  --border-radius: var(--r-md);

  /* 헤더/GNB — 어드민 변수 기반 매핑 */
  --kjvr-primary:   var(--c-navy);
  --kjvr-secondary: var(--c-yellow);
  --kjvr-dark:      var(--c-navy-lt);
  --color-bg-primary: var(--c-bg);
}