/* ============================================
   KBR Journal — Production Design Tokens
   ============================================ */

:root {
  /* ── Colors: Brand ── */
  --c-navy:       #14213D;
  --c-navy-lt:    #1B2F58;
  --c-yellow:     #F5E901;
  --c-yellow-lt:  #FEFCE8;

  /* ── Colors: Neutral ── */
  --c-white:      #FFFFFF;
  --c-bg:         #F8F7F2;
  --c-gray-lt:    #E3E1D8;
  --c-gray:       #B5B2A5;
  --c-gray-dk:    #6B6960;
  --c-text:       #1A1917;

  /* ── Colors: Semantic ── */
  --c-blue:       #1A4E8C;
  --c-blue-lt:    #EBF2FF;
  --c-green:      #1A6B42;
  --c-green-lt:   #E6F5EE;

  /* ── Colors: Article Action Buttons (클라이언트 지정 4색) ── */
  --c-act-abstract:  #14213D;
  --c-act-fulltext:  #1A4E8C;
  --c-act-pdf:       #C87000;
  --c-act-reference: #5B2C8D;

  /* ── 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-* → 새 토큰 매핑 */
  --text-xs:   var(--fs-small);    /* 13px */
  --text-sm:   var(--fs-body);     /* 15px */
  --text-base: var(--fs-body);     /* 15px */
  --text-lg:   var(--fs-h2);       /* 20px */
  --text-xl:   var(--fs-h1);       /* 24px */
  --text-2xl:  var(--fs-display);  /* 36px */
  --font-md:   var(--fs-body);     /* 16px → 15px */
  --font-sm:   var(--fs-small);    /* 14px → 13px */

  /* Font Weight */
  --font-normal:    var(--fw-regular);  /* 400 */
  --font-medium:    var(--fw-medium);   /* 500 */
  --font-semibold:  var(--fw-bold);     /* 600 → 700 */
  --font-bold:      var(--fw-bold);     /* 700 */

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

  /* Colors — 기존 변수 → 새 토큰 매핑 */
  --text-primary:   var(--c-text);       /* #1A1917 */
  --text-secondary: var(--c-gray-dk);    /* #6B6960 */
  --text-tertiary:  var(--c-gray);       /* #B5B2A5 */
  --color-bg-primary:   var(--c-white);
  --color-bg-secondary: var(--c-bg);     /* #F8F7F2 */
  --color-border:       var(--c-gray-lt); /* #E3E1D8 */

  /* Border Radius */
  --border-radius: var(--r-md);  /* 12px → 8px */

  /* 헤더/GNB — 기존 테마 변수 오버라이드 */
  --kjvr-primary:   var(--c-navy);      /* #14213D */
  --kjvr-secondary: var(--c-yellow);    /* #F5E901 */
  --kjvr-dark:      var(--c-navy-lt);   /* #1B2F58 */

  /* 바디 배경 */
  --color-bg-primary: var(--c-bg);      /* #F8F7F2 */
}