/*
 * ============================================================
 *  바른길 문서자동화 — Design Tokens
 *  모든 페이지에서 공유하는 디자인 기본값.
 *  서비스별 컬러(accent)는 각 템플릿에서 오버라이드하되,
 *  radius · shadow · spacing · typography 는 여기서 통일.
 * ============================================================
 */

:root {
    /* ── Color Scale: Slate (Gray) ── */
    --color-slate-50:  #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    /* ── Color Scale: Blue (Primary) ── */
    --color-blue-50:  #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;

    /* ── Color Scale: Green (Success) ── */
    --color-green-50:  #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #a7f3d0;
    --color-green-400: #22c55e;
    --color-green-500: #10b981;
    --color-green-600: #059669;
    --color-green-700: #047857;
    --color-green-800: #166534;

    /* ── Color Scale: Red (Danger) ── */
    --color-red-50:  #fef2f2;
    --color-red-200: #fecaca;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;

    /* ── Color Scale: Amber (Warning) ── */
    --color-amber-50:  #fffbeb;
    --color-amber-100: #fef9c3;
    --color-amber-200: #fef3c7;
    --color-amber-300: #fde68a;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;

    /* ── Color Scale: Orange ── */
    --color-orange-50:  #fff7ed;
    --color-orange-100: #ffedd5;
    --color-orange-200: #fed7aa;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    --color-orange-700: #c2410c;

    /* ── Color Scale: Cyan ── */
    --color-cyan-700: #0e7490;

    /* ── Color Scale: Indigo ── */
    --color-indigo-50:  #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-400: #818cf8;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-indigo-700: #4338ca;

    /* ── Color Scale: Purple / Violet ── */
    --color-purple-50:  #f5f3ff;
    --color-purple-100: #ede9fe;
    --color-purple-200: #ddd6fe;
    --color-purple-300: #c4b5fd;
    --color-purple-400: #a78bfa;
    --color-purple-500: #8b5cf6;
    --color-purple-600: #7c3aed;

    /* ── Semantic Color Aliases (WCAG AA 4.5:1 기준 검증 완료) ── */
    --color-primary:       var(--color-blue-600);   /* #2563eb — 5.17:1 ✅ */
    --color-primary-hover:  var(--color-blue-700);   /* #1d4ed8 */
    --color-success:       var(--color-green-700);   /* #16a34a — 4.59:1 ✅ */
    --color-success-light: var(--color-green-500);   /* #10b981 — 배경용(텍스트X) */
    --color-danger:        var(--color-red-600);     /* #dc2626 — 4.99:1 ✅ */
    --color-danger-hover:  var(--color-red-700);     /* #b91c1c */
    --color-warning:       var(--color-amber-700);   /* #a16207 — 4.67:1 ✅ */
    --color-warning-hover: var(--color-amber-600);   /* #d97706 — 배경btn용 */
    --color-muted:         var(--color-slate-500);   /* #64748b — 4.76:1 ✅ */
    --color-border:        var(--color-slate-200);   /* #e2e8f0 */
    --color-surface:       #fff;
    --color-text:          var(--color-slate-900);   /* #0f172a */
    --color-text-secondary: var(--color-slate-600);   /* #475569 — 7.58:1 ✅ */
    --color-text-muted:    var(--color-slate-500);   /* #64748b — 4.76:1 ✅ */
    --color-text-light:    var(--color-slate-500);   /* #64748b — 4.76:1 ✅ (was slate-400) */

    /* ── Radius (3단계) ── */
    --radius-sm: 8px;    /* 버튼, 뱃지, 입력 필드 */
    --radius-md: 12px;   /* 카드, 패널, 모달 */
    --radius-lg: 16px;   /* 인사말 배너, 대형 모달 */
    --radius-full: 9999px; /* 필터 탭, 필(pill) 뱃지 */

    /* ── Shadow (3단계) ── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);

    /* ── Spacing (기본 단위 4px) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* ── Typography ── */
    --font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-xs: 11px;
    --font-sm: 12px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 22px;

    /* ── Transition ── */
    --ease-default: 0.15s ease;
    --ease-smooth: 0.25s ease;

    /* ── Z-index layers ── */
    --z-sticky: 50;
    --z-sidebar: 100;
    --z-overlay: 9998;
    --z-fab: 9999;
    --z-modal: 10000;
    --z-notify: 10001;
}

/*
 * ============================================================
 *  알림·확인 시스템 가이드라인
 * ============================================================
 *  ❌ 사용 금지:
 *    alert('메시지')           → brgNotify('메시지','info')
 *    confirm('확인?')          → brgConfirm('확인?',opts).then(ok=>{ ... })
 *
 *  ✅ 사용 권장:
 *    brgNotify(msg, type)      — 토스트 (success|warning|error|info)
 *    brgConfirm(msg, opts)     — 비동기 확인 모달 (Promise<boolean>)
 *    brgFormConfirm(form,msg)  — form.onsubmit 대체
 *    brgBtnConfirm(btn,msg)    — button[name] submit 대체
 *    brgShowLoading(msg?)      — 글로벌 로딩 오버레이 표시
 *    brgHideLoading()          — 글로벌 로딩 오버레이 숨김
 *
 *  참고: 모든 함수는 templates/base.html에 정의되어 있음.
 * ============================================================
 */