/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS — Nunca Admin v3 · Unified
   네이밍: short convention — components.html + mockup.html 완전 호환
   Updated: 2026-04-09
   ══════════════════════════════════════════════════════════ */

:root {

  /* ══ COLOR: CORE ══ */
  --canvas:          #FFFFFF;
  --heading:         #111827;
  --body:            #6B7280;
  --muted:           #9CA3AF;
  --faint:           #D1D5DB;
  --th-color:        #475569;

  --border:          #E5E7EB;
  --border-s:        #F3F4F6;
  --border-sidebar:  #dde3eb;
  --border-sidebar-i:#eef1f5;


  /* ══ COLOR: SEMANTIC ══ */
  --action:          #16A34A;
  --action-h:        #15803D;
  --action-l:        #22c55e;
  --action-s:        #F0FDF4;
  --action-ss:       #dcfce7;

  --error:           #DC2626;
  --error-s:         #FEF2F2;
  --error-b:         #FEE2E2;
  --error-on:        #B91C1C;

  --info-s:          #EFF6FF;
  --info-on:         #1D4ED8;

  --purple-s:        #F5F3FF;
  --purple-on:       #6D28D9;

  --warn-s:          #FEFCE8;
  --warn-on:         #A16207;
  --warn-b:          #FEF08A;


  /* ══ TYPOGRAPHY ══ */
  --font:            'Inter', sans-serif;
  --font-d:          'Outfit', sans-serif;

  --f-display:       1.75rem;    /* 28px — KPI (Outfit) */
  --f-display-w:     700;
  --f-headline:      1.5rem;     /* 24px — 페이지 타이틀 */
  --f-headline-w:    600;
  --f-title:         0.9375rem;  /* 15px — 섹션 헤더 */
  --f-title-w:       600;
  --f-body:          0.8125rem;  /* 13px — 본문 */
  --f-body-w:        400;
  --f-data:          0.78125rem; /* 12.5px — 테이블 셀 */
  --f-data-w:        500;
  --f-label:         0.65rem;    /* 10.4px — 테이블 헤더 */
  --f-label-w:       700;
  --f-label-ls:      0.08em;
  --f-btn:           0.78125rem; /* 12.5px */
  --f-btn-w:         600;
  --f-logo:          20px;
  --f-logo-w:        800;
  --f-logo-ls:       3px;


  /* ══ SPACING ══ */
  --p-section-head:  12px 16px;
  --p-section-body:  14px 16px;
  --p-page:          20px 22px;
  --p-table-cell:    10px 16px;
  --p-nav-item:      8px 10px;
  --p-btn:           7px 14px;
  --gap-bento:       10px;
  --gap-inline:      10px;


  /* ══ BORDER RADIUS ══ */
  --r-sm:            0.125rem;
  --r-md:            0.375rem;
  --r-lg:            0.5rem;
  --r-full:          9999px;
  --r-pill:          20px;


  /* ══ ELEVATION ══ */
  --shadow-sm:       0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-overlay:  0 20px 25px -5px rgba(0,0,0,0.04);


  /* ══ LAYOUT ══ */
  --sidebar-w:       232px;
  --topbar-h:        60px;
  --max-content:     1280px;


  /* ══ NAV ══ */
  --nav-size:        12.5px;
  --nav-color:       #64748b;
  --nav-color-h:     #334155;
  --nav-bg-h:        #f8fafc;
  --nav-bg-active:   #f8fafc;
  --nav-icon-size:   18px;
  --nav-label-size:  10px;
  --nav-badge-bg:    #fee2e2;
  --nav-badge-color: #dc2626;


  /* ══ USER ══ */
  --avatar-size:     34px;
  --avatar-bg:       #dcfce7;
  --avatar-color:    #16A34A;


  /* ══ TOGGLE ══ */
  --toggle-w:        44px;
  --toggle-h:        24px;
  --toggle-knob:     20px;
  --toggle-off:      #E5E7EB;
  --toggle-on:       #16A34A;


  /* ══ MOTION ══ */
  --fast:            120ms;
  --normal:          180ms;
}