/* =====================================================================
   S-MON EDU (에듀포지 프로) 디자인 토큰 시스템
   원칙: "시험지처럼 정확하고, 쪽지처럼 다정하게."
   - 강조색: 잉크 파랑 #1b5bd6 (--a-blue-700) 단일 강조색
   - 최소 글자 크기: 14px (--a-fs-14) 미만 금지
   - 이모지 금지, 커스텀 SVG 아이콘 및 일러스트만 사용
   ===================================================================== */
:root {
  --a-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --a-serif: "Noto Serif KR", "Batang", "AppleMyungjo", Georgia, serif;
  --a-num: tabular-nums;

  /* 파랑(잉크) */
  --a-blue-50: #ebf2ff;
  --a-blue-75: #dde8fd;
  --a-blue-100: #cfe0fe;
  --a-blue-200: #9bbfff;
  --a-blue-300: #74a5fe;
  --a-blue-500: #3e7ffa;
  --a-blue-600: #2d6fef;
  --a-blue-700: #1b5bd6;
  --a-blue-800: #1c50b5;
  --a-blue-900: #154298;
  --a-blue-on-ink: #b9d1ff;
  --a-fold-a: #2f6be0;
  --a-fold-b: #4a80ea;

  /* 회색 */
  --a-white: #ffffff;
  --a-grey-0: #ffffff;
  --a-grey-50: #f8f9fb;
  --a-grey-100: #f2f4f7;
  --a-grey-150: #eaedf1;
  --a-grey-200: #e3e7ec;
  --a-grey-300: #d0d6de;
  --a-grey-400: #aeb5bf;
  --a-grey-500: #8b939e;
  --a-grey-600: #7d8796;
  --a-grey-700: #5b6676;
  --a-grey-800: #3f4a5a;
  --a-grey-900: #151b26;

  /* 글자 역할색 */
  --a-text-strong: var(--a-grey-900);
  --a-text: var(--a-grey-800);
  --a-text-soft: var(--a-grey-700);
  --a-text-brand: var(--a-blue-700);
  --a-text-on-ink: #ffffff;
  --a-text-on-ink-soft: rgba(255, 255, 255, 0.86);

  /* 면 */
  --a-surface: #ffffff;
  --a-surface-sunk: var(--a-grey-50);
  --a-canvas: var(--a-grey-100);
  --a-canvas-glass: rgba(242, 244, 247, 0.92);
  --a-line: var(--a-grey-200);
  --a-line-input: var(--a-grey-600);
  --a-ink-surface: #13203b;

  /* 잉크 판 위 비침 */
  --a-on-ink-08: rgba(255, 255, 255, 0.08);
  --a-on-ink-14: rgba(255, 255, 255, 0.14);
  --a-on-ink-22: rgba(255, 255, 255, 0.22);
  --a-on-ink-78: rgba(255, 255, 255, 0.78);

  /* 업무 종류색 (아이콘 판·꼬리표 전용) */
  --a-k-blue-50: #ebf2ff;   --a-k-blue-700: #1b5bd6;   /* 영어·변형 */
  --a-k-teal-50: #dff8f8;   --a-k-teal-700: #007375;   /* 수학·작도 */
  --a-k-green-50: #e6f8eb;  --a-k-green-700: #007943;  /* 워크북·해설 */
  --a-k-violet-50: #f4f0ff; --a-k-violet-700: #7150a3; /* OMR·클리닉 */
  --a-k-yellow-50: #fff1d2; --a-k-yellow-700: #845a0f; /* 상담·일정 */
  --a-k-slate-50: #eef3f9;  --a-k-slate-700: #53667f;  /* 문제은행·일반 */

  /* 상태색 */
  --a-danger: #c4283a;   --a-danger-50: #fdeef0;
  --a-warning: #9a4a00;  --a-warning-50: #fff4e2;
  --a-success: #157347;  --a-success-50: #e7f5ed;

  /* 노랑 형광펜 & 메모·안내 면 */
  --a-hl: #ffe198;
  --a-hl-strong: #ffd166;
  --a-strip-bg: #fff7e0;
  --a-strip-line: #efe0b4;
  --a-calc-bg: #fff8e6;
  --a-note-bg: #fffdf5;

  /* 그라데이션 & 무늬 토큰 */
  --a-grad-ink: linear-gradient(140deg, #1b5bd6 0%, #1a52c4 45%, #154298 100%);
  --a-grad-dawn: linear-gradient(135deg, #ebf2ff 0%, #f1f0ff 55%, #fff6e0 100%);
  --a-grad-paper: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  --a-fold-grad: linear-gradient(225deg, transparent 50%, var(--a-fold-a) 50%, var(--a-fold-b) 100%);
  --a-hl-grad: linear-gradient(transparent 60%, var(--a-hl) 60%, var(--a-hl) 94%, transparent 94%);
  --a-pattern-ledger-ink: repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 255, 255, 0.04) 31px 32px);

  /* 글자 크기 단계 (14px 이상만) */
  --a-fs-14: 14px;
  --a-fs-15: 15px;
  --a-fs-16: 16px;
  --a-fs-17: 17px;
  --a-fs-18: 18px;
  --a-fs-20: 20px;
  --a-fs-22: 22px;
  --a-fs-24: 24px;
  --a-fs-28: 28px;
  --a-fs-36: 36px;
  --a-fs-40: 40px;
  --a-fs-56: 56px;

  /* 간격 & 모서리 */
  --a-r-8: 8px;
  --a-r-12: 12px;
  --a-r-card: 20px;
  --a-r-sheet: 24px;
  --a-r-panel: 28px;
  --a-r-pill: 999px;

  /* 그림자 (떠 있는 요소 전용) */
  --a-sh-raise: 0 1px 3px rgba(21, 27, 38, 0.12);
  --a-sh-pop: 0 10px 28px rgba(21, 27, 38, 0.14), 0 2px 6px rgba(21, 27, 38, 0.06);
  --a-sh-float: -12px 0 36px rgba(21, 27, 38, 0.16);
  --a-sh-toast: 0 14px 32px rgba(19, 32, 59, 0.28);
  --a-sh-paper: 0 12px 32px rgba(21, 27, 38, 0.12), 0 2px 6px rgba(21, 27, 38, 0.06);
}

html[data-font-scale="large"] {
  --a-fs-14: 15px;
  --a-fs-15: 16px;
  --a-fs-16: 17px;
  --a-fs-17: 18px;
  --a-fs-18: 20px;
  --a-fs-20: 22px;
  --a-fs-22: 24px;
  --a-fs-28: 30px;
  --a-fs-36: 40px;
  --a-fs-40: 44px;
}