/* 2026-05-04 - PHARMAI - 디자인 토큰 (CSS Custom Properties)
 * 파일 위치: ai-agent/claude/260504_신규UI_프로토타입/src/styles/tokens.css
 * 출처: docs/디자인가이드_260503_AIPharm Modern Biotech v1.0.md §1
 * Phase 1 결정 토큰: --z-*, --dur-*, --ease-out (가이드 미정의분 — 일지 ADR 참조)
 */

:root {
  /* === Color — Background === */
  --bg-base:        #202124;
  --bg-panel:       #26282c;
  --bg-card:        #2a2d31;
  --bg-input:       #202124;
  --bg-row-active:  rgba(155, 138, 251, 0.04);
  --bg-chip-purple: rgba(155, 138, 251, 0.12);
  --bg-chip-teal:   rgba(79, 209, 197, 0.10);
  --bg-chip-warn:   rgba(255, 183, 77, 0.12);
  --bg-chip-danger: rgba(255, 122, 122, 0.12);

  /* === Color — Border === */
  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-soft:    rgba(255, 255, 255, 0.06);
  --border-divider: rgba(255, 255, 255, 0.08);
  --border-purple:  rgba(155, 138, 251, 0.30);
  --border-teal:    rgba(79, 209, 197, 0.15);

  /* === Color — Text === */
  --text-primary:    #f1f3f4;
  --text-body:       #e8eaed;
  --text-muted:      #c4c7c5;
  --text-secondary:  #9aa0a6;
  --text-on-accent:  #1a1b1e;

  /* === Color — Accent === */
  --accent-purple:       #9b8afb;
  --accent-purple-soft:  #b8abff;
  --accent-teal:         #4fd1c5;
  --accent-teal-soft:    #7ddccb;

  /* === Color — Status === */
  --status-completed:    #4fd1c5;
  --status-in-progress:  #9b8afb;
  --status-pending:      #9aa0a6;

  /* === Color — Semantic === */
  --danger:   #ff7a7a;
  --warn:     #ffb84d;
  --warn-2:   #ff9f43;
  --warn-3:   #ffcc80;
  --success:  #4fd1c5;

  /* === Typography — Font Family === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* === Typography — Font Size === */
  --fs-xxs: 10.5px;
  --fs-xs:  11px;
  --fs-sm:  11.5px;
  --fs-base: 12px;
  --fs-md:  13px;
  --fs-lg:  15px;
  --fs-xl:  17px;
  --fs-2xl: 22px;

  /* === Typography — Weight / Line Height / Letter Spacing === */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --lh-tight: 1.2;
  --lh-base:  1.55;
  --ls-tight: -0.2px;
  --ls-loose: 1px;

  /* === Spacing === */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  10px;
  --sp-6:  12px;
  --sp-7:  14px;
  --sp-8:  16px;
  --sp-9:  18px;
  --sp-10: 20px;
  --sp-11: 22px;

  /* === Radius === */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* === Border Width === */
  --bw-1:      1px;
  --bw-strong: 1.5px;

  /* === Identity Bar === */
  --bar-w: 4px;
  --bar-h: 16px;

  /* === Elevation / Shadow === */
  --elev-0:     none;
  --elev-1:     0 1px 0 rgba(0, 0, 0, 0.20);
  --elev-2:     0 4px 12px rgba(0, 0, 0, 0.30);
  --elev-focus: 0 0 0 2px rgba(155, 138, 251, 0.35);

  /* === Layout === */
  --layout-w-fhd:      1920px;
  --layout-h-fhd:      1080px;
  --panel-w-expanded:  220px;
  --panel-w-collapsed: 64px;
  --header-h:          56px;
  --content-pad-x:     22px;
  --content-pad-y:     20px;
  --card-gap:          14px;

  /* === Phase 1 결정 — Z-index 계층 === */
  --z-header:         100;
  --z-panel:          90;
  --z-modal-backdrop: 200;
  --z-modal:          210;
  --z-toast:          300;

  /* === Phase 1 결정 — Animation Duration / Easing === */
  --dur-fast: 100ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}