/*
 * Study2Play 공통 디자인 토큰 (W4-G1). 기준: docs/36 §1.1~1.3, docs/45 §3.1 D-01~D-09, DEC-108(순수 HTML/JS).
 * - 라이트 테마 하나만 둔다(다크 토큰 없음).
 * - 모든 이름은 --s2p- 접두어. 앱 인라인 :root 의 --primary 등과 겹치지 않는다.
 * - 이 파일에는 :root 변수만 둔다. 색 코드는 여기에서만 쓰고 components.css 는 변수만 참조한다.
 * 대비값(WCAG 2.x 상대 휘도 기준, 소수 둘째 자리) 은 각 줄 주석에 적는다.
 *   본문 글자 4.5:1 이상, 큰 글자·컨트롤 경계·포커스 링 3:1 이상(docs/36 §1.3).
 */
:root {
  /* ---- Primary (Indigo) ---- */
  --s2p-primary-50: #eef2ff;
  --s2p-primary-100: #e0e7ff;
  --s2p-primary-200: #c7d2fe;
  --s2p-primary-300: #a5b4fc;
  --s2p-primary-500: #6366f1;
  --s2p-primary-600: #4f46e5;   /* 흰 배경 위 글자 6.29:1, 흰 글자 얹기 6.29:1 */
  --s2p-primary-700: #4338ca;   /* 흰 글자 얹기 7.90:1, primary-50 위 글자 7.07:1 */
  --s2p-primary-800: #3730a3;   /* primary-50 위 글자 8.88:1 */
  --s2p-primary-900: #312e81;
  --s2p-color-primary: var(--s2p-primary-600);
  --s2p-color-primary-hover: var(--s2p-primary-700);
  --s2p-color-primary-light: var(--s2p-primary-50);
  --s2p-color-on-primary: #ffffff;

  /* ---- 상태색: 채움(600)·연한 배경(100)·글자(700~800) ---- */
  /* Success(Emerald): 서버 확정 성공에만. PENDING 에는 쓰지 않는다. */
  --s2p-color-success: #059669;        /* 아이콘·채움용. 흰 배경 위 3.77:1(그래픽 3:1 충족, 본문 글자로는 쓰지 않음) */
  --s2p-color-success-light: #d1fae5;
  --s2p-color-success-text: #047857;   /* 흰 배경 5.48:1, success-light 위 4.84:1 */
  --s2p-color-success-strong: #065f46; /* success-light 위 6.78:1 */
  /* Warning(Amber): stale·검토 중·적용 대기(PENDING) */
  --s2p-color-warning: #b45309;        /* 흰 배경 5.02:1, warning-light 위 4.51:1 */
  --s2p-color-warning-light: #fef3c7;
  --s2p-color-warning-text: #92400e;   /* warning-light 위 6.37:1 */
  /* Danger(Red): 잠금·철회·삭제·권한 거부 */
  --s2p-color-danger: #dc2626;         /* 흰 배경 4.83:1, 흰 글자 얹기 4.83:1 */
  --s2p-color-danger-hover: #b91c1c;   /* 흰 글자 얹기 6.47:1 */
  --s2p-color-danger-light: #fee2e2;
  --s2p-color-danger-text: #b91c1c;    /* danger-light 위 5.30:1 (#dc2626 은 3.95:1 이라 글자로 쓰지 않음) */
  /* Info: 일반 안내(primary 계열) */
  --s2p-color-info-light: var(--s2p-primary-50);
  --s2p-color-info-text: var(--s2p-primary-800); /* 8.88:1 */
  /* Neutral */
  --s2p-color-neutral-light: #f1f5f9;
  --s2p-color-neutral-text: #334155;   /* neutral-light 위 9.45:1 */

  /* ---- 차트 범주 색 (A4): 서로 다른 범주 6개 + "기타" 하나. 모두 흰 배경 위 그래픽 3:1 이상(docs/36 §1.3).
          색은 범례·표의 글자와 함께 쓰고 색만으로 구분하지 않는다. 순서가 곧 슬롯이다(과목은 목록 순서대로 1번부터). ---- */
  --s2p-chart-1: #2a78d6;   /* 파랑   흰 배경 4.42:1 */
  --s2p-chart-2: #eb6834;   /* 주황   3.20:1 */
  --s2p-chart-3: #168a5d;   /* 초록   4.35:1 */
  --s2p-chart-4: #b7791f;   /* 호박색 3.64:1 */
  --s2p-chart-5: #c7487f;   /* 분홍   4.50:1 */
  --s2p-chart-6: #6250d6;   /* 보라   5.77:1 */
  --s2p-chart-other: var(--s2p-color-text-subtle); /* "기타" 묶음 4.76:1 */

  /* ---- 면·글자·선 (Slate) ---- */
  --s2p-color-bg: #f8fafc;             /* 페이지 배경 */
  --s2p-color-surface: #ffffff;        /* 카드 */
  --s2p-color-surface-muted: #f1f5f9;  /* 표 머리·hover */
  --s2p-color-text: #0f172a;           /* 흰 배경 17.85:1, bg 위 17.06:1 */
  --s2p-color-text-muted: #475569;     /* 흰 배경 7.58:1, bg 위 7.24:1 */
  --s2p-color-text-subtle: #64748b;    /* 흰 배경 4.76:1, bg 위 4.55:1 — 보조 12~13px 의 하한 */
  --s2p-color-border: #cbd5e1;         /* 장식용(카드·구분선) 1.48:1 — 컨트롤 경계로 쓰지 않음 */
  --s2p-color-border-subtle: #e2e8f0;  /* 장식용 1.23:1 */
  --s2p-color-border-input: #64748b;   /* 입력·체크박스 경계, 흰 배경 4.76:1(3:1 충족). #94a3b8 은 2.56:1 이라 부족 */
  --s2p-color-link: var(--s2p-primary-700); /* 흰 배경 7.90:1 */

  /* ---- 사이드바(어두운 면은 사이드바 하나뿐) ---- */
  --s2p-sidebar-bg: #0f172a;
  --s2p-sidebar-text: #94a3b8;         /* sidebar-bg 위 6.96:1 */
  --s2p-sidebar-active: #ffffff;       /* sidebar-bg 위 17.85:1 */
  --s2p-sidebar-hover: #1e293b;        /* 흰 글자 14.63:1 */
  --s2p-sidebar-group: #a5b4fc;        /* 그룹 제목, sidebar-bg 위 8.96:1 */

  /* ---- 포커스 링 ---- */
  --s2p-focus-ring-color: var(--s2p-primary-600); /* 흰 배경 6.29:1 */
  --s2p-focus-ring-width: 3px;
  --s2p-focus-ring-offset: 2px;
  --s2p-focus-ring-color-inverse: var(--s2p-primary-300); /* 사이드바(#0f172a) 위 8.96:1. primary-600 은 어두운 면에서 3:1 미만 */

  /* ---- 반지름 ---- */
  --s2p-radius: 12px;      /* 카드·다이얼로그 */
  --s2p-radius-sm: 8px;    /* 버튼·입력 */
  --s2p-radius-pill: 999px;/* 배지 */

  /* ---- 간격 (4px 단위) ---- */
  --s2p-space-1: 4px;
  --s2p-space-2: 8px;
  --s2p-space-3: 12px;
  --s2p-space-4: 16px;
  --s2p-space-5: 20px;
  --s2p-space-6: 24px;     /* 화면 기본 패딩 */
  --s2p-space-7: 28px;
  --s2p-space-8: 32px;     /* 섹션 간격 상한 */

  /* ---- 글자 크기 ---- */
  --s2p-text-title-lg: 28px; /* 페이지 큰 제목 */
  --s2p-text-title: 24px;    /* 페이지 제목·상단바 제목 */
  --s2p-text-title-sm: 20px; /* 카드·다이얼로그 제목 */
  --s2p-text-body-lg: 16px;
  --s2p-text-body: 14px;
  --s2p-text-caption: 13px;
  --s2p-text-caption-sm: 12px;
  --s2p-weight-regular: 400;
  --s2p-weight-medium: 500;
  --s2p-weight-semibold: 600;
  --s2p-weight-bold: 700;

  /* ---- 줄 높이 ---- */
  --s2p-leading-tight: 1.3;  /* 제목 */
  --s2p-leading-body: 1.55;  /* 본문 */

  /* ---- 그림자 2단계 ---- */
  --s2p-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --s2p-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
  --s2p-color-backdrop: rgba(15, 23, 42, 0.55); /* 드로어·다이얼로그 뒤 가림막 */

  /* ---- 전환 ---- */
  --s2p-duration-fast: 120ms;
  --s2p-duration: 200ms;
  --s2p-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- 레이아웃 치수 ---- */
  --s2p-sidebar-width: 240px;
  --s2p-topbar-height: 56px;
  --s2p-content-max: 1200px;
  --s2p-control-height: 40px;    /* md 버튼·입력 */
  --s2p-control-height-sm: 32px; /* sm 버튼 */

  /* ---- z-index 단계 ---- */
  --s2p-z-topbar: 100;
  --s2p-z-sidebar: 200;
  --s2p-z-drawer-backdrop: 300;
  --s2p-z-drawer: 310;
  --s2p-z-toast: 400;
  --s2p-z-dialog: 500;       /* <dialog> 는 top layer 라 보조값. 비 dialog 오버레이용 */
}