/*
  EurekaAI 디자인 토큰 · 정식 1판 "낮 · 새싹" (2026-10-20, 디자인팀)

  - 색: 사장님 결정 "낮 · 새싹"(d2, 2026-10-20). 흰 바탕, 남색 잉크와 라벤더 띠, 새싹 초록 포인트 하나.
    "나중에 변경이 필요하면 그때 바꾸자"(사장님). 바꿀 때는 이 파일의 값만 바꾼다.
  - 한글 제목: Pretendard 굵게(사장님 결정, 2026-10-20).
  - 홈페이지팀 eureka-hp/site/assets/css/tokens.css와 변수 이름이 같다. 통째로 바꿔 끼우면 된다.
    1부는 기존 변수, 2부는 디자인팀이 더한 변수다. 2부는 안 써도 기존 CSS가 깨지지 않는다.
  - 포인트 색은 하나다: 링크, 버튼, 라벨, 강조 단어, 로고의 점, 상징 그림의 씨앗.
    로고·상징 전용 색(--logo-seed, --sym-seed, --forest-seed)은 따로 두지 않는다. 모두 포인트 색을 따른다.
  - 대비(WCAG 2.x)는 tokens/README.md에 있다. 글자 조합은 모두 4.5:1 이상이다.
  - 원본은 eureka-design repo의 tokens/ 폴더다. 고칠 일이 있으면 디자인팀에 알린다.
*/

:root {
  /* ===== 1부: 기존 변수 ===== */

  /* ---- 색: 종이와 잉크 (남색 계열) ---- */
  --paper: #FFFFFF;          /* 기본 바탕 */
  --paper-band: #F3F4FD;     /* 구분 띠 바탕 (라벤더) */
  --paper-raised: #FFFFFF;   /* 카드·앱 화면 안쪽 */
  --ink: #10143A;            /* 본문 글자, 진한 버튼. 바탕 17.8:1, 띠 16.2:1 */
  --ink-2: #424672;          /* 보조 글자. 바탕 8.9:1, 띠 8.2:1 */
  --ink-3: #5868A8;          /* 메타 글자. 바탕 5.3:1, 띠 4.8:1 */
  --line: #D5DAF2;           /* 가는 선, 땅선 */
  --line-strong: #B4BCE0;    /* 강조 선, 상징 그림의 나무 선 */

  /* ---- 색: 포인트 (새싹 초록 하나) ---- */
  --accent: #1B7A3B;         /* 바탕 5.4:1, 띠 4.9:1, 흰 글자 얹으면 5.4:1 */
  --accent-strong: #145C2C;  /* 눌렀을 때, 진한 강조. 바탕 8.1:1, 흰 글자 얹으면 8.1:1 */
  --accent-soft: #E2F3E6;    /* 옅은 칠. 위에 --accent 글자 4.7:1, --ink-3 글자 4.6:1 */

  /* ---- 색: 어두운 띠 (소식 띠, 우리가 가는 길, /scholar 머리) ----
     이름은 forest-*로 남겼지만 지금 값은 남색 띠다. 이름을 바꾸면 다른 CSS를 다 고쳐야 해서 그대로 둔다. */
  --forest: #10143A;         /* 띠 바탕 (= --ink) */
  --forest-ink: #E8EBFA;     /* 띠 위 글자 15.0:1 */
  --forest-ink-2: #A9B0D6;   /* 띠 위 보조 글자 8.3:1, 상징 그림의 나무 선 */
  --forest-line: #262B5C;    /* 띠 위 선 */
  --forest-accent: #7BD88F;  /* 띠 위 포인트(링크, 씨앗) 10.2:1 */

  /* ---- 글꼴 ---- */
  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system,
    "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;

  /* 제목 글꼴은 언어별로 아래에서 정한다 */
  --font-display: var(--font-serif);
  --display-weight: 400;
  --display-tracking: -0.015em;
  --display-leading: 1.06;

  /* ---- 글자 크기 (휴대폰 → 데스크톱으로 자연스럽게 커진다) ---- */
  --step--1: 0.875rem;                                  /* 14px 메타 */
  --step-0: 1.0625rem;                                  /* 17px 본문 */
  --step-1: 1.25rem;                                    /* 20px 카드 제목 */
  --step-2: clamp(1.5rem, 1.32rem + 0.8vw, 1.875rem);   /* 24→30px */
  --step-3: clamp(1.875rem, 1.45rem + 1.9vw, 2.875rem); /* 30→46px 섹션 제목 */
  --step-4: clamp(2.5rem, 1.55rem + 4.2vw, 4.75rem);    /* 40→76px 첫 문구 */
  --eyebrow-size: 0.75rem;
  --eyebrow-tracking: 0.14em;

  --body-leading: 1.6;

  /* ---- 간격 ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* ---- 틀 ---- */
  --container: 76rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --measure: 38rem;          /* 본문 한 줄 최대 길이 */
  --radius: 2px;             /* 버튼만. 카드는 모서리 없이 선으로 나눈다 */
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);

  /* ===== 2부: 디자인팀이 더한 변수 (안 써도 된다) ===== */

  /* ---- 초점 테두리: 어두운 띠 위 ----
     --accent는 남색 띠 위에서 3.3:1로 겨우 넘는다. 띠 안에서는 이것을 쓴다(10.2:1). */
  --focus-on-dark: 0 0 0 2px var(--forest), 0 0 0 4px var(--forest-accent);

  /* ---- 포인트 단계: 그림·도표 전용. 글자와 바탕에는 1부 변수를 쓴다 ----
     새싹 초록 하나(OKLCH 색상각 150°)의 밝기만 바꾼 것이다. 포인트 색이 늘어난 것이 아니다. */
  --accent-50:  #EFFAF0;
  --accent-100: #DEF5E2;
  --accent-200: #BEE9C6;
  --accent-300: #92D8A0;
  --accent-400: #5FBC76;
  --accent-500: #389B55;
  --accent-600: #1B7A3B;     /* = --accent */
  --accent-700: #145C2C;     /* = --accent-strong */
  --accent-800: #134923;
  --accent-900: #0D3318;
  --accent-950: #071E0D;

  /* ---- 미션 강조 빨강: 두 기둥 미션의 핵심 낱말에만 (사장님 지시 2026-10-21) ---- */
  --emphasis-red: #C0262D;          /* paper 위 5.90:1, paper-band 위 5.39:1. OKLCH 밝기 0.53으로 accent(0.51)와 무게가 같다 */
  --forest-emphasis-red: #FF8A8F;   /* 어두운 띠에 쓸 때. forest 위 7.85:1 */

  /* ---- 글꼴: 고정폭 (LTEM 예시, 코드, 버전 번호). 시스템 글꼴만 쓴다 ---- */
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- 앱 화면 틀 ---- */
  --radius-window: 8px;      /* Cellmark 앱 화면을 감싸는 창 모서리 (Windows 11 창과 같음) */
  --shadow-window: 0 1px 2px rgb(16 20 58 / 0.06), 0 12px 32px -8px rgb(16 20 58 / 0.18);
                             /* 평소 그림자는 앱 화면에만 쓴다. 칸·카드가 떠오를 때만 --shadow-lift */

  /* ---- 움직임 ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;         /* 단추, 밑줄 */
  --dur-base: 320ms;         /* 펼침, 바뀜 */
  --dur-grow: 1600ms;        /* 씨앗 → 숲 그림이 자라는 시간 */

  /* ---- 떠오름: 칸·카드에 마우스를 올렸을 때 (사장님 결정 2026-10-20, "여기저기 다") ---- */
  --dur-lift: 220ms;
  --lift-y: -4px;            /* 칸, 상자, 카드 */
  --lift-y-small: -2px;      /* 단추, 소식 줄 */
  --shadow-lift: 0 2px 6px rgb(16 20 58 / 0.06), 0 18px 40px -14px rgb(16 20 58 / 0.24);
  --shadow-lift-small: 0 8px 18px -8px rgb(16 20 58 / 0.4);
}

/* ---- 한국어판: 제목은 Pretendard 굵게 ---- */
:root:lang(ko) {
  --font-display: var(--font-sans);
  --display-weight: 700;
  --display-tracking: -0.025em;
  --display-leading: 1.28;
  --step-4: clamp(2.125rem, 1.4rem + 3.2vw, 3.875rem);  /* 34→62px, 한글은 조금 작게 */
  --step-3: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
  --eyebrow-tracking: 0.02em;
  --eyebrow-size: 0.8125rem;
  --body-leading: 1.75;
}

/* ---- 잔잔한 모드: 움직임 줄이기 설정이면 멈추지 않고 더 느리고 작게 (사장님 결정 2026-10-20) ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 240ms;       /* 1.5배 */
    --dur-base: 480ms;
    --dur-grow: 2400ms;
    --dur-lift: 360ms;
    --lift-y: -2px;          /* 절반 */
    --lift-y-small: -1px;
  }
}