/* ============================================================
 * theme.css — 디자인 토큰 (CSS Custom Properties)
 * 출처: DESIGN-OliveYoung.md (Colors / Typography / Spacing / Shapes)
 * ============================================================ */

:root {
  /* ---------- Colors · Brand & Accent ---------- */
  --color-primary: #82dc28;          /* Olive Green */
  --color-primary-active: #6bb820;
  --color-primary-soft: #e8f7d4;
  --color-accent: #ff7878;           /* Coral Orange */
  --color-accent-active: #ff5757;
  --color-accent-soft: #ffe6e6;

  /* ---------- Colors · Surface ---------- */
  --color-canvas: #ffffff;
  --color-surface-soft: #f7f7f7;
  --color-surface-strong: #f0f0f0;
  --color-surface-dark: #1a1a1a;
  --color-surface-dark-soft: #2a2a2a;

  /* ---------- Colors · Hairlines & Borders ---------- */
  --color-hairline: #e5e5e5;
  --color-hairline-soft: #ededed;
  --color-border-strong: #cccccc;

  /* ---------- Colors · Text ---------- */
  --color-ink: #1a1a1a;
  --color-body: #333333;
  --color-muted: #666666;
  --color-muted-soft: #999999;
  --color-on-primary: #ffffff;
  --color-on-accent: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-dark-soft: #b3b3b3;

  /* ---------- Colors · Semantic ---------- */
  --color-error: #e74c3c;
  --color-success: #82dc28;
  --color-warning: #f5a623;
  --color-focus: #82dc28;

  /* ---------- Colors · Scrim ---------- */
  --color-scrim: rgba(0, 0, 0, 0.5);

  /* ---------- Typography · Family ---------- */
  --font-family-base:
    Pretendard,
    "Pretendard Variable",
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  /* ---------- Typography · Scale (size / weight / line-height / letter-spacing) ---------- */
  --font-size-display-xl: 56px;
  --font-size-display-lg: 44px;
  --font-size-display-md: 32px;
  --font-size-display-sm: 24px;
  --font-size-title-lg:   20px;
  --font-size-title-md:   18px;
  --font-size-title-sm:   16px;
  --font-size-body-lg:    18px;
  --font-size-body-md:    16px;
  --font-size-body-sm:    14px;
  --font-size-caption:    13px;
  --font-size-caption-sm: 12px;
  --font-size-uppercase-tag: 11px;
  --font-size-button-md:  15px;
  --font-size-button-sm:  13px;
  --font-size-nav-link:   15px;
  --font-size-link:       14px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-display-xl: 1.15;
  --line-height-display-lg: 1.2;
  --line-height-display-md: 1.25;
  --line-height-display-sm: 1.3;
  --line-height-title:      1.4;
  --line-height-title-lg:   1.35;
  --line-height-body:       1.6;
  --line-height-body-sm:    1.55;
  --line-height-caption:    1.4;
  --line-height-button:     1.0;
  --line-height-nav:        1.4;
  --line-height-link:       1.5;

  --letter-spacing-display-xl: -1.5px;
  --letter-spacing-display-lg: -1px;
  --letter-spacing-display-md: -0.8px;
  --letter-spacing-display-sm: -0.4px;
  --letter-spacing-title-lg:   -0.2px;
  --letter-spacing-uppercase-tag: 1px;
  --letter-spacing-normal: 0;

  /* ---------- Spacing (base unit 4px) ---------- */
  --space-xxs:     2px;
  --space-xs:      4px;
  --space-sm:      8px;
  --space-md:     12px;
  --space-base:   16px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section: 80px;

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ---------- Elevation ---------- */
  --shadow-card-lift: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
  --shadow-none: none;

  /* ---------- Layout ---------- */
  --container-max-width: 1280px;
  --container-narrow-width: 1080px;
  --breakpoint-mobile:  768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-wide:   1440px;
}

/* ============================================================
 * Dark Mode
 * - 시스템 설정에 따른 자동 다크 (prefers-color-scheme)
 * - 명시적 토글 (data-theme="dark")
 * 브랜드 컬러(primary/accent)는 다크에서도 유지.
 * ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas:         #1a1a1a;
    --color-surface-soft:   #2a2a2a;
    --color-surface-strong: #333333;
    --color-surface-dark:       #0d0d0d;
    --color-surface-dark-soft:  #1a1a1a;

    --color-hairline:       #333333;
    --color-hairline-soft:  #2a2a2a;
    --color-border-strong:  #555555;

    --color-ink:        #ffffff;
    --color-body:       #e0e0e0;
    --color-muted:      #b3b3b3;
    --color-muted-soft: #808080;

    --color-primary-soft: #2a3a1c;
    --color-accent-soft:  #3a2424;

    --color-scrim: rgba(0, 0, 0, 0.65);
  }
}

[data-theme="dark"] {
  --color-canvas:         #1a1a1a;
  --color-surface-soft:   #2a2a2a;
  --color-surface-strong: #333333;
  --color-surface-dark:       #0d0d0d;
  --color-surface-dark-soft:  #1a1a1a;

  --color-hairline:       #333333;
  --color-hairline-soft:  #2a2a2a;
  --color-border-strong:  #555555;

  --color-ink:        #ffffff;
  --color-body:       #e0e0e0;
  --color-muted:      #b3b3b3;
  --color-muted-soft: #808080;

  --color-primary-soft: #2a3a1c;
  --color-accent-soft:  #3a2424;

  --color-scrim: rgba(0, 0, 0, 0.65);
}