/* marigold — 디자인 시스템 정본 (이식 모드 · 출처 Figma Community "Personal Portfolio Website Template")
 * 값은 피그마 등록 스타일을 그대로 옮겼다(_design/figma-spec.md). 이름은 Tailwind 4 @theme 이름공간을 따르지만
 * 선언은 :root 에 둔다 — 브라우저는 @theme 블록을 읽지 않는다(lessons #73).
 * 원본 값 가운데 AA 미달이 셋 있다(대비표는 _design/DESIGN.md). G1 에서 회색 두 곳(보조 글자·입력 테두리)만
 * *-aa 로 돌렸다 — 노란 라벨은 원본 인상의 핵심이라 그대로. 페이지 CSS 는 원본 색을 직접 쓰지 말고 별칭을 쓴다.
 */
:root {
  /* 색 — 피그마 스타일 그대로 */
  --color-accent: #fdc435;      /* brand / yellow — 버튼·물결·원·밑줄·파도 */
  --color-ink: #25282b;         /* font / high-emphasis · bg / line — 제목·내비·버튼 글자·테두리 */
  --color-muted: #828282;       /* font / medium-emphasis — 소개·설명·저작 줄 */
  --color-bg: #f9faff;          /* bg / gray — 페이지 바탕 */
  --color-surface: #ffffff;     /* bg / white — 카드 글 반·입력 바탕 */
  --color-line: #e8ecf4;        /* 입력 테두리 */
  --color-on-accent: #25282b;   /* 노랑 위 글자(버튼) — 9.26:1 */

  /* 접근성 개선 후보 — 메인이 "개선" 으로 정하면 아래 별칭이 이 값을 가리킨다 */
  --color-muted-aa: #6e6e6e;    /* 본문 4.89:1(bg) · 5.10:1(white) — 원본 #828282 와 같은 무채 회색 */
  --color-label-aa: #946800;    /* 라벨 4.75:1(bg) — 원본 노랑의 어두운 같은 색상 */
  --color-line-aa: #878f9f;     /* 입력 테두리 3.25:1(white) · 3.12:1(bg) — WCAG 1.4.11 비텍스트 3:1 */

  /* 역할 별칭 — G1 메인 결정(2026-10-01): 회색 두 곳만 AA 로 개선, 노란 라벨은 원본 그대로 */
  --color-text-muted: var(--color-muted-aa);
  --color-label: var(--color-accent);
  --color-field-line: var(--color-line-aa);

  /* 자리표시자 — 노란 도형 위 빗금(원본 구도를 지키며 "사진 자리" 로 읽히게) */
  --color-ph-hatch: rgb(37 40 43 / 0.10);
  --color-ph-chip: rgb(255 255 255 / 0.92);

  /* 서체 — 서가: Playfair Display · Nunito · Manrope. 한글(가상 고지)만 Pretendard 로 떨어진다 */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Nunito", "Pretendard Variable", system-ui, sans-serif;
  --font-logo: "Nunito", "Pretendard Variable", system-ui, sans-serif;  /* 원본 Comfortaa 대체 */
  --font-ui: "Manrope", "Pretendard Variable", system-ui, sans-serif;   /* 원본 Raleway(내비)·Roboto(버튼) 대체 */

  /* 글자 척도 — 피그마 값(px)을 rem 으로. 행간은 Tailwind 4 의 --text-*--line-height 짝 */
  --text-display: 4rem;                 /* 64 — title / h1 */
  --text-display--line-height: 1.2;
  --text-title: 3rem;                   /* 48 — title / h2 */
  --text-title--line-height: 1.5;       /* 72px */
  --text-heading: 2.5rem;               /* 40 — 프로젝트 제목 */
  --text-heading--line-height: 1.5;
  --text-lead: 1.5rem;                  /* 24 — 히어로 소개 · About 본문 */
  --text-lead--line-height: 1.5;
  --text-label: 1.25rem;                /* 20 — UI/UX DESIGNER */
  --text-label--line-height: 1.5;
  --text-body: 1.125rem;                /* 18 — 프로젝트 설명 · 내비 · 버튼 · 로고 */
  --text-body--line-height: 1.5;
  --text-nav--line-height: 1.5556;      /* 28/18 */
  --text-small: 1rem;                   /* 16 — 폼 라벨 · 저작 줄 */
  --text-small--line-height: 1.5;

  /* 반응형 글자 — 원본에 없어 새로 정했다(폭 표: _design/wireframe.md) */
  --text-display-fluid: clamp(2.75rem, 4.44vw, 4rem);       /* 좌우 분할(≥900) — 1440 에서 64 */
  --text-display-stack: clamp(2.125rem, 7vw, 3.5rem);       /* 세로 쌓기(<900) — 390 에서 34 */
  --text-title-fluid: clamp(2rem, 3.34vw, 3rem);            /* 48 → 32 */
  --text-heading-fluid: clamp(1.75rem, 2.78vw, 2.5rem);     /* 40 → 28 */
  --text-lead-fluid: clamp(1.125rem, 1.67vw, 1.5rem);       /* 24 → 18 */

  /* 간격 — 피그마 배치에서 실측한 단계 */
  --spacing-hair: 0.125rem;   /* 2 — 활성 탭 막대 두께·간격 */
  --spacing-1: 0.25rem;       /* 4 — 제목 밑줄 두께 */
  --spacing-2: 0.5rem;        /* 8 — 라벨→입력 · 버튼 세로 패딩 */
  --spacing-3: 0.75rem;       /* 12 — 버튼 사이 · 라벨→제목 */
  --spacing-4: 1rem;          /* 16 */
  --spacing-6: 1.5rem;        /* 24 — 버튼 가로 패딩 · 폼 칸 사이 · 카드 글 사이 · 아이콘 사이 */
  --spacing-8: 2rem;          /* 32 — 제목→소개→버튼 · 아이콘→저작 줄 */
  --spacing-12: 3rem;         /* 48 — 내비 사이 · 아이콘 크기 */
  --spacing-14: 3.5rem;       /* 56 — 머리 높이 · 폼→아이콘 */
  --spacing-20: 5rem;         /* 80 — 섹션 제목→카드 · 카드 사이 */
  --spacing-page: clamp(1.25rem, 8.33vw, 7.5rem);   /* 좌우 바깥 여백 — 1440 에서 120 */
  --spacing-section: clamp(4rem, 8.33vw, 7.5rem);   /* 섹션 사이 */
  --spacing-intro: 30.375rem;   /* 486 — 히어로 글 칼럼 최대 폭 */
  --spacing-about: 36.75rem;    /* 588 — About 글 칼럼 최대 폭 */
  --spacing-cards: 62rem;       /* 992 — 프로젝트 카드 폭 */
  --spacing-form: 25rem;        /* 400 — 폼 폭 */

  /* 모서리 */
  --radius-bar: 0.125rem;     /* 2 — 밑줄·활성 막대 */
  --radius-md: 0.5rem;        /* 8 — 버튼·입력 */
  --radius-lg: 1.5rem;        /* 24 — 카드 · View Project 알약 */
  --radius-full: 9999px;      /* About 원 */

  /* 그림자 — 피그마 drop-shadow 0 6 32 rgba(112,144,176,.10) */
  --shadow-card: 0 6px 32px rgb(112 144 176 / 0.10);
  --shadow-card-hover: 0 12px 40px rgb(112 144 176 / 0.18);

  /* 움직임 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-enter: 520ms;
}