/* ============================================================
   소풍 디자인 시스템 — 토큰 v1.0
   PICNIC 패밀리(Campus·Table·Compass·Bench·Field) + 소풍앤에듀 공통
   사용: 프로젝트 전역 CSS 최상단에 import
   규칙: 컴포넌트 코드에서는 원시 hex 대신 반드시 이 토큰만 사용
   ============================================================ */

:root {
  /* ---------- 원색 스케일 ---------- */
  /* Green · 잔디밭 (브랜드 중심) */
  --green-50:  #f4f8f5;
  --green-100: #e9f2ec;
  --green-200: #d4e6da;
  --green-300: #a9cbb1;
  --green-400: #8fbf96;
  --green-500: #5b8c62;   /* 브랜드 기준색 · 포커스 링 */
  --green-600: #4a7a52;   /* 주 버튼 (흰 글자 대비 확보) */
  --green-700: #3d6b45;
  --green-800: #2c4d33;   /* 제목색 */
  --green-900: #203a26;

  /* Sun · 햇빛 (포인트 강조 — 화면당 한 곳) */
  --sun-100: #faf0da;
  --sun-300: #eecb8a;
  --sun-500: #e0a83d;
  --sun-700: #b07f24;

  /* Clay · 흙길 (보조 강조 · Compass) */
  --clay-100: #f6e7de;
  --clay-300: #dda286;
  --clay-500: #c06b4a;
  --clay-700: #96513a;

  /* Coral · 산호 (브릭그라운드 전용 주색) */
  --coral-100: #fdf1e6;
  --coral-300: #f3b795;
  --coral-500: #e8825a;
  --coral-700: #d0623a;

  /* Sea · 물빛 (정보·데이터 보조) */
  --sea-100: #e3f0f4;
  --sea-500: #3f8ba0;
  --sea-700: #2b6d80;

  /* Danger */
  --danger-100: #f9e5e0;
  --danger-500: #cd4a35;
  --danger-700: #a33726;

  /* Warm Neutral · 종이와 돌 (쿨그레이 사용 금지) */
  --paper: #fbfaf5;        /* 페이지 배경 */
  --cream: #f7f4ec;        /* 보조 면 */
  --line: #e3e0d5;         /* 일반 경계 */
  --line-strong: #c9d3c9;  /* 입력·강조 경계 */
  --stone-300: #b8b5a8;
  --stone-500: #8a8878;    /* muted 텍스트 */
  --bark: #4c4b42;         /* 본문 텍스트 */
  --ink: #23241f;          /* 제목·강조 텍스트 */

  /* ---------- 시맨틱 토큰 (컴포넌트에서는 이것 우선) ---------- */
  --bg: var(--paper);
  --surface: #ffffff;
  --surface-alt: var(--cream);

  --text: var(--ink);
  --text-sub: var(--bark);
  --text-muted: var(--stone-500);

  --border: var(--line);
  --border-strong: var(--line-strong);

  --primary: var(--green-600);
  --primary-hover: var(--green-700);
  --primary-text: #ffffff;
  --ring: var(--green-500);

  --success-bg: var(--green-100);  --success-text: var(--green-700);
  --warning-bg: var(--sun-100);    --warning-text: var(--sun-700);
  --danger-bg: var(--danger-100);  --danger-text: var(--danger-700);
  --info-bg: var(--sea-100);       --info-text: var(--sea-700);

  /* ---------- 제품 액센트 (식별 지점에만: 로고·활성 탭·엠블럼) ---------- */
  --accent-campus:   #3d6b45;  /* 숲 · LMS */
  --accent-table:    #7fb488;  /* 잔디 · 수업 중 함께 활동(PICNIC Table · 구 Meadow — 2026-10-13 개칭) */
  --accent-compass:  #c06b4a;  /* 나침반 · AI 튜터 */
  --accent-bench:    #8f7a55;  /* 나무 · 코딩 도구 */
  --accent-bricktale:#e8825a;  /* 산호 · 브릭그라운드 */

  /* ---------- 형태 ---------- */
  --radius-sm: 6px;    /* 작은 버튼·인풋 내부 요소 */
  --radius-md: 10px;   /* 버튼·입력 기본 */
  --radius-lg: 14px;   /* 카드 */
  --radius-xl: 20px;   /* 모달·큰 패널 */
  --radius-full: 999px;/* 배지·아바타 */

  --shadow-sm: 0 1px 2px rgba(35, 36, 31, .05);
  --shadow-md: 0 4px 14px rgba(44, 77, 51, .08);

  /* ---------- 타이포 ---------- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;
  /* 브랜드 견출(마케팅 전용): 'Fraunces', serif / 'Gowun Batang', serif — 제품 UI 사용 금지 */

  --text-display: 38px;  /* 700 / 1.25 / -0.01em */
  --text-h1: 30px;       /* 700 / 1.3  */
  --text-h2: 24px;       /* 600 / 1.35 */
  --text-h3: 18px;       /* 600 / 1.45 */
  --text-body: 15px;     /* 400 / 1.7  — 학생 화면은 17px */
  --text-caption: 13px;  /* 400 / 1.6  */
  --text-label: 12px;    /* 600 / caps / .08em */

  /* ---------- 간격 (4px 기반) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
}

/* ============================================================
   shadcn/ui 시맨틱 매핑 — globals.css에서 함께 사용
   ============================================================ */
:root {
  --background: #fbfaf5;
  --foreground: #23241f;
  --card: #ffffff;
  --card-foreground: #23241f;
  --popover: #ffffff;
  --popover-foreground: #23241f;
  --primary: #4a7a52;
  --primary-foreground: #ffffff;
  --secondary: #f7f4ec;
  --secondary-foreground: #2c4d33;
  --muted: #f4f8f5;
  --muted-foreground: #8a8878;
  --accent: #e9f2ec;
  --accent-foreground: #2c4d33;
  --destructive: #cd4a35;
  --destructive-foreground: #ffffff;
  --border: #e3e0d5;
  --input: #c9d3c9;
  --ring: #5b8c62;
  --radius: 10px;
}

/* 기본 바디 적용 */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}