/* ============================================================ */
/* UDS 디자인 토큰                                                */
/* 파일명 : css/tokens.css                                       */
/* ------------------------------------------------------------ */
/* 모든 CSS 파일이 참조하는 단일 기준(Single source of truth).     */
/* 색상/여백/모서리/폰트는 여기 정의된 토큰만 사용한다.            */
/* index.html 의 <head> 에서 다른 css 보다 "먼저" 연결할 것.       */
/* ============================================================ */
 
:root{
    /* 프로젝트 공통 서체 */
    --font-family-base : 'Pretendard', sans-serif;
 
    /* ---------------------------------------------------- */
    /* 1) Color - Text                                       */
    /* ---------------------------------------------------- */
    --color-text-base-primary : #1a1a1a;
    --color-text-base-secondary : #747474;
    --color-text-base-tertiary : #969696;
    --color-text-base-disabled : #bdbdbd;
    --color-text-base-on-color : #ffffff;
    --color-text-brand-primary : #e10975;
    --color-text-feedback-success : #126344; /* 정답 및 성공 상태의 글자색 */
    --color-text-feedback-error : #b32348; /* 오답 및 오류 상태의 글자색 */
 
    /* ---------------------------------------------------- */
    /* 2) Color - Container (배경)                            */
    /* ---------------------------------------------------- */
    --color-container-base-primary : #ffffff;
    --color-container-base-secondary : #fcfcfc;
    --color-container-base-low : #f2f2f2;
    --color-container-base-strong : #1a1a1a;
    --color-container-brand-primary : #e10975;
    --color-container-brand-secondary : #fef1f7;
    --color-container-overlay : rgba(26, 26, 26, 0.58); /* 팝업 뒤 화면의 반투명 배경 */
    --color-container-feedback-success : #e8f7ef; /* 정답 및 성공 상태의 배경색 */
    --color-container-feedback-error : #fff0f1; /* 오답 및 오류 상태의 배경색 */
 
    /* ---------------------------------------------------- */
    /* 3) Color - Border                                     */
    /* ---------------------------------------------------- */
    --color-border-base-low : #ebebeb;
    --color-border-base-mid : #e0e0e0;
    --color-border-base-high : #bdbdbd;
    --color-border-brand-primary : #e10975;
 
    /* ---------------------------------------------------- */
    /* 4) Color - Icon                                       */
    /* ---------------------------------------------------- */
    --color-icon-base-primary : #1a1a1a;
    --color-icon-base-secondary : #747474;
    --color-icon-base-tertiary : #969696;
    --color-icon-base-on-color : #ffffff;
    --color-icon-brand-primary : #e10975;
 
    /* ---------------------------------------------------- */
    /* 5) State - hover / pressed (그라데이션 금지, 단색 단계)  */
    /* ---------------------------------------------------- */
    --color-state-light-hover : #fcfcfc;
    --color-state-light-pressed : #f2f2f2;
    --color-state-light-active : #ebebeb;
    --color-state-dark-hover : #474747;
    --color-state-dark-pressed : #050505;
    --color-state-brand-hover : #c80868; /* 브랜드색 버튼에 마우스를 올렸을 때 */
 
    /* ---------------------------------------------------- */
    /* 6) Radius - 컴포넌트 역할별로 선택                      */
    /*    small  : Button / Text Field / Textarea            */
    /*    medium : Card / Dialog                             */
    /*    large  : Bottomsheet 전용                          */
    /*    full   : Chip / Toggle (pill)                      */
    /* ---------------------------------------------------- */
    --radius-small : 4px;
    --radius-medium : 8px;
    --radius-large : 12px;
    --radius-full : 999px;

    /* ---------------------------------------------------- */
    /* 6-1) Border - 기본선 / 키보드 포커스                  */
    /* ---------------------------------------------------- */
    --border-width-default : 1px; /* 카드와 선택지의 기본 테두리 두께 */
    --border-width-focus : 3px; /* 키보드 포커스 표시 두께 */
 
    /* ---------------------------------------------------- */
    /* 7) Spacing - Gap (블록과 블록 사이)                     */
    /* ---------------------------------------------------- */
    --spacing-gap-2 : 2px;
    --spacing-gap-4 : 4px;
    --spacing-gap-6 : 6px;
    --spacing-gap-8 : 8px;
    --spacing-gap-10 : 10px;
    --spacing-gap-12 : 12px;
    --spacing-gap-16 : 16px;
    --spacing-gap-20 : 20px;
    --spacing-gap-24 : 24px;
    --spacing-gap-32 : 32px;
    --spacing-gap-40 : 40px;
 
    /* ---------------------------------------------------- */
    /* 8) Spacing - Layout X (페이지 좌우 여백) : 16 / 20 만   */
    /* ---------------------------------------------------- */
    --spacing-layout-x-16 : 16px;
    --spacing-layout-x-20 : 20px;
 
    /* ---------------------------------------------------- */
    /* 9) Spacing - Layout Y (섹션 위아래 여백)                */
    /* ---------------------------------------------------- */
    --spacing-layout-y-16 : 16px;
    --spacing-layout-y-20 : 20px;
    --spacing-layout-y-24 : 24px;
    --spacing-layout-y-40 : 40px;
    --spacing-layout-y-64 : 64px;
    --spacing-layout-y-80 : 80px;
 
    /* ---------------------------------------------------- */
    /* 10) Spacing - Component X (컴포넌트 안쪽 좌우 padding)  */
    /* ---------------------------------------------------- */
    --spacing-component-x-4 : 4px;
    --spacing-component-x-8 : 8px;
    --spacing-component-x-10 : 10px;
    --spacing-component-x-12 : 12px;
    --spacing-component-x-16 : 16px;
    --spacing-component-x-20 : 20px;
 
    /* ---------------------------------------------------- */
    /* 11) Spacing - Component Y (컴포넌트 안쪽 위아래 padding)*/
    /* ---------------------------------------------------- */
    --spacing-component-y-4 : 4px;
    --spacing-component-y-6 : 6px;
    --spacing-component-y-8  : 8px;
    --spacing-component-y-10 : 10px;
    --spacing-component-y-12 : 12px; /* 컴포넌트 내부 위아래 여백 */
    --spacing-component-y-14 : 14px;
    --spacing-component-y-16 : 16px;
    --spacing-component-y-20 : 20px;
    --spacing-component-y-24 : 24px;
    --spacing-component-y-28 : 28px;
 
    /* ---------------------------------------------------- */
    /* 12) Typography - Size (12 미만 사용 금지)               */
    /* ---------------------------------------------------- */
    --font-size-12 : 12px;
    --font-size-14 : 14px;
    --font-size-16 : 16px;
    --font-size-18 : 18px;
    --font-size-20 : 20px;
    --font-size-24 : 24px;
    --font-size-28 : 28px;
    --font-size-36 : 36px;
    --font-size-display-min : 100px; /* TEST 시작 숫자의 최소 글자 크기 */
    --font-size-display-max : 180px; /* TEST 시작 숫자의 최대 글자 크기 */
 
    /* ---------------------------------------------------- */
    /* 13) Typography - Weight (500 / 700 만 사용, 600 금지)   */
    /* ---------------------------------------------------- */
    --font-weight-medium : 500;
    --font-weight-bold   : 700;

    /* ---------------------------------------------------- */
    /* 14) Typography - Line height                          */
    /* ---------------------------------------------------- */
    --line-height-tight : 1; /* 큰 숫자 등 높이를 좁게 맞출 때 */
    --line-height-body : 1.5; /* 문제와 보기의 기본 줄 간격 */
    --line-height-relaxed : 1.6; /* 학습포인트처럼 긴 설명의 줄 간격 */
}
 
/* ============================================================ */
/* Typography 유틸리티 클래스                                     */
/* CSS 에 font-size 를 직접 쓰기보다 HTML 에서 이 클래스를 쓴다.   */
/* ============================================================ */
.font-12{ font-size:var(--font-size-12); }
.font-14{ font-size:var(--font-size-14); }
.font-16{ font-size:var(--font-size-16); }
.font-18{ font-size:var(--font-size-18); }
.font-20{ font-size:var(--font-size-20); }
.font-24{ font-size:var(--font-size-24); }
.font-28{ font-size:var(--font-size-28); }
.font-36{ font-size:var(--font-size-36); }
 
.font-medium{ font-weight:var(--font-weight-medium); }
.font-bold  { font-weight:var(--font-weight-bold); }