/**
 * peoplelove.org Design System — CSS Tokens v1
 *
 * Pencil .pen 디자인 시스템에서 추출한 토큰.
 * 변경 시 반드시 Pencil의 set_variables도 함께 업데이트할 것.
 *
 * 출처: pencil-welcome.pen (Step A+ Pencil Design System)
 * 생성일: 2026-06-06
 */

:root {
  /* ────────────────────────────────────────────────
   * Colors — Brand Palette
   * 사단법인 정을심는복지회 하이브리드 브랜드
   * ──────────────────────────────────────────────── */
  --ppl-brand-primary: #E63946;       /* 정 빨강 (로고 하트) */
  --ppl-brand-warm:    #F4A261;       /* 따뜻한 오렌지 — 아동·돌봄 */
  --ppl-brand-fresh:   #2A9D8F;       /* 민트 그린 — 청소년·환경 */
  --ppl-brand-trust:   #264653;       /* 딥블루 — 법인 신뢰 */
  --ppl-brand-soft:    #F1FAEE;       /* 크림 — 배경 */

  /* ────────────────────────────────────────────────
   * Colors — Text
   * ──────────────────────────────────────────────── */
  --ppl-text-primary:     #1D3557;
  --ppl-text-secondary:   #6C757D;
  --ppl-text-muted:       #ADB5BD;
  --ppl-text-on-primary:  #FFFFFF;

  /* ────────────────────────────────────────────────
   * Colors — Surface
   * ──────────────────────────────────────────────── */
  --ppl-bg-page:    #FFFFFF;
  --ppl-bg-section: #F8F9FA;
  --ppl-bg-card:    #FFFFFF;

  /* ────────────────────────────────────────────────
   * Colors — Border
   * ──────────────────────────────────────────────── */
  --ppl-border-light:   #E9ECEF;
  --ppl-border-default: #DEE2E6;

  /* ────────────────────────────────────────────────
   * Typography — Family
   * 한글: Pretendard (web font) + Noto Serif KR
   * 영문: Inter + Newsreader
   * ──────────────────────────────────────────────── */
  --ppl-font-heading: "Newsreader", "Noto Serif KR", "Pretendard", serif;
  --ppl-font-body:    "Inter", "Pretendard", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ppl-font-mono:    ui-monospace, "SF Mono", Consolas, monospace;

  /* ────────────────────────────────────────────────
   * Typography — Size (px → rem 환산)
   * Base: 16px = 1rem
   * ──────────────────────────────────────────────── */
  --ppl-text-xs:    0.75rem;   /* 12px - caption */
  --ppl-text-sm:    0.875rem;  /* 14px - small */
  --ppl-text-base:  1rem;      /* 16px - body */
  --ppl-text-lg:    1.125rem;  /* 18px - body large */
  --ppl-text-xl:    1.25rem;   /* 20px - h4 */
  --ppl-text-2xl:   1.5rem;    /* 24px - h4/h3 */
  --ppl-text-3xl:   1.875rem;  /* 30px - h3 */
  --ppl-text-4xl:   2.25rem;   /* 36px - h2 */
  --ppl-text-5xl:   3rem;      /* 48px - h1 */
  --ppl-text-hero:  4rem;      /* 64px - hero */

  /* ────────────────────────────────────────────────
   * Typography — Line Height
   * ──────────────────────────────────────────────── */
  --ppl-leading-tight:  1.1;
  --ppl-leading-snug:   1.3;
  --ppl-leading-normal: 1.5;
  --ppl-leading-relaxed: 1.7;

  /* ────────────────────────────────────────────────
   * Spacing (Bootstrap 5 호환 스케일)
   * ──────────────────────────────────────────────── */
  --ppl-space-1:   0.25rem;   /* 4px */
  --ppl-space-2:   0.5rem;    /* 8px */
  --ppl-space-3:   0.75rem;   /* 12px */
  --ppl-space-4:   1rem;      /* 16px */
  --ppl-space-5:   1.5rem;    /* 24px */
  --ppl-space-6:   2rem;      /* 32px */
  --ppl-space-7:   2.5rem;    /* 40px */
  --ppl-space-8:   3rem;      /* 48px */
  --ppl-space-10:  4rem;      /* 64px */
  --ppl-space-12:  6rem;      /* 96px */

  /* ────────────────────────────────────────────────
   * Border Radius
   * ──────────────────────────────────────────────── */
  --ppl-radius-sm:   4px;
  --ppl-radius-md:   8px;
  --ppl-radius-lg:   12px;
  --ppl-radius-xl:   16px;
  --ppl-radius-2xl:  24px;
  --ppl-radius-full: 9999px;

  /* ────────────────────────────────────────────────
   * Shadow (선택적 사용)
   * ──────────────────────────────────────────────── */
  --ppl-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --ppl-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --ppl-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* ────────────────────────────────────────────────
   * Container max-width (반응형 한계)
   * ──────────────────────────────────────────────── */
  --ppl-container-max: 1440px;
  --ppl-content-max:   1200px;
  --ppl-text-max:      720px;     /* 본문 가독성 한계 */
}

/* ────────────────────────────────────────────────
 * Base — Global Reset (최소)
 * ──────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ppl-font-body);
  font-size: var(--ppl-text-base);
  line-height: var(--ppl-leading-normal);
  color: var(--ppl-text-primary);
  background: var(--ppl-bg-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ppl-font-heading);
  line-height: var(--ppl-leading-snug);
  color: var(--ppl-text-primary);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--ppl-text-5xl); font-weight: 600; }
h2 { font-size: var(--ppl-text-4xl); font-weight: 600; }
h3 { font-size: var(--ppl-text-3xl); font-weight: 600; }
h4 { font-size: var(--ppl-text-2xl); font-weight: 600; }
h5 { font-size: var(--ppl-text-xl);  font-weight: 600; }
h6 { font-size: var(--ppl-text-lg);  font-weight: 600; }

a {
  color: var(--ppl-brand-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--ppl-brand-trust); text-decoration: underline; }

/* ────────────────────────────────────────────────
 * Utility — Section
 * ──────────────────────────────────────────────── */
.ppl-section          { padding: var(--ppl-space-10) var(--ppl-space-12); }
.ppl-section--tight   { padding: var(--ppl-space-7) var(--ppl-space-12); }
.ppl-section--hero    { padding: var(--ppl-space-12) var(--ppl-space-12); }
.ppl-section--soft    { background: var(--ppl-brand-soft); }
.ppl-section--mute    { background: var(--ppl-bg-section); }
.ppl-section--trust   { background: var(--ppl-brand-trust); color: var(--ppl-text-on-primary); }
.ppl-section--primary { background: var(--ppl-brand-primary); color: var(--ppl-text-on-primary); }

/* ────────────────────────────────────────────────
 * Utility — Container
 * ──────────────────────────────────────────────── */
.ppl-container {
  max-width: var(--ppl-content-max);
  margin: 0 auto;
  padding-left: var(--ppl-space-5);
  padding-right: var(--ppl-space-5);
}

/* ────────────────────────────────────────────────
 * Mobile Responsive Breakpoints
 * Bootstrap 5 호환: sm/md/lg/xl/xxl
 * ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --ppl-text-hero: 2.5rem;   /* 64 → 40 */
    --ppl-text-5xl:  2rem;     /* 48 → 32 */
    --ppl-text-4xl:  1.625rem; /* 36 → 26 */
    --ppl-space-12:  3rem;     /* 96 → 48 */
    --ppl-space-10:  2.5rem;   /* 64 → 40 */
  }
  .ppl-section,
  .ppl-section--tight,
  .ppl-section--hero { padding: var(--ppl-space-7) var(--ppl-space-5); }
}