/* =====================================================================
   naexam 디자인 토큰 — 모든 화면은 이 변수만 사용한다.
   방향: 밝고 신뢰감 있는 교육 서비스. 저연령 학생 사용 고려.
   ===================================================================== */

@font-face {
    font-family: 'Pretendard Variable';
    src: url('/assets/vendor/pretendard/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- 컬러: 메인(파랑, 신뢰) ---- */
    --c-primary-50:  #EEF4FE;
    --c-primary-100: #D9E6FD;
    --c-primary-500: #2E6FF2;
    --c-primary-600: #1F5AD8;
    --c-primary-700: #1847AE;

    /* ---- 컬러: 보조(틸, 친근) — 응시자 화면 포인트 ---- */
    --c-secondary-50:  #E7F9F6;
    --c-secondary-100: #C8F1EA;
    --c-secondary-500: #12B8A6;
    --c-secondary-600: #0E9887;
    --c-secondary-700: #0B7A6E;

    /* ---- 시맨틱 컬러 ---- */
    --c-success:     #16A34A;
    --c-success-bg:  #F0FDF4;
    --c-success-bd:  #BBF7D0;
    --c-warning:     #B45309;
    --c-warning-bg:  #FFFBEB;
    --c-warning-bd:  #FDE68A;
    --c-danger:      #DC2626;
    --c-danger-bg:   #FEF2F2;
    --c-danger-bd:   #FECACA;

    /* ---- 뉴트럴 ---- */
    --c-text:        #1F2937;
    --c-text-muted:  #6B7280;
    --c-border:      #E5E7EB;
    --c-bg:          #F5F7FA;
    --c-surface:     #FFFFFF;
    --c-surface-dim: #F8FAFC;

    /* ---- 간격 스케일 (4px 기반) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* ---- 라운딩 ---- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-full: 999px;

    /* ---- 그림자 3단계 ---- */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-2: 0 4px 12px rgba(15, 23, 42, .10);
    --shadow-3: 0 12px 32px rgba(15, 23, 42, .18);

    /* ---- 타이포 ---- */
    --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;

    /* ---- 터치 타깃 ---- */
    --touch-min: 44px;

    /* ---- 구버전 별칭 (인라인 스타일 하위 호환) ---- */
    --primary: var(--c-primary-500);
    --primary-dark: var(--c-primary-600);
    --danger: var(--c-danger);
    --success: var(--c-success);
    --border: var(--c-border);
    --bg: var(--c-bg);
    --text: var(--c-text);
    --text-muted: var(--c-text-muted);
    --radius: var(--r-md);
}