/* ==========================================================================
   Churahee Songbook — Design Tokens
   민트/세이지 파스텔 · 큐트 · 프리텐다드
   ========================================================================== */

/* v2.39: Pretendard 웹폰트는 index.html 의 <link> 로 옮겼습니다 (@import 는 직렬 로딩이라 느립니다) */

:root {
  color-scheme: only light;

  /* ─────────────────────────────────────────────────────────────
     COLOR · Base Neutrals (warm-mint 계열의 오프화이트)
     ───────────────────────────────────────────────────────────── */
  --page:            #f4faf6;   /* 페이지 최하단 배경 */
  --paper:           #ffffff;   /* 카드/시트 */
  --paper-soft:      #fafdfb;   /* 서브 카드 */
  --paper-cream:     #fef9f0;   /* 강조 카드 (버터/크림) */

  --ink:             #2f4235;   /* 본문 텍스트 */
  --ink-soft:        #4b6154;   /* 세컨더리 텍스트 */
  --muted:           #7d9285;   /* 캡션/힌트 */
  --muted-2:         #a8b8ae;   /* 아주 옅은 텍스트/보더 위 */
  --line:            #e2ede6;   /* 구분선 */
  --line-strong:     #cfe0d5;   /* 강한 구분선/보더 */

  /* ─────────────────────────────────────────────────────────────
     COLOR · Brand Pastel (mint / sage)
     lightness ≈ 0.92, chroma ≈ 0.05 계열
     ───────────────────────────────────────────────────────────── */
  --mint-50:         #edf8f2;
  --mint-100:        #d7f0e3;
  --mint-200:        #b8e5cd;   /* 메인 소프트 */
  --mint-300:        #8fd4ae;
  --mint-400:        #66c091;   /* 메인 액센트 */
  --mint-500:        #4aa677;   /* 눌린/강조 */
  --mint-600:        #388862;   /* 다크 (거의 안 씀) */

  --sage-50:         #f0f5f1;
  --sage-100:        #dfe9e1;
  --sage-200:        #c3d5c7;   /* 세이지 액센트 */
  --sage-300:        #a6bfab;

  /* ─────────────────────────────────────────────────────────────
     COLOR · Support Pastels (액센트 · 뱃지용)
     ───────────────────────────────────────────────────────────── */
  --butter:          #fce8a8;   /* 즐겨찾기, hot */
  --butter-soft:     #fdf4d1;
  --peach:           #fdd6c4;   /* new / 알림 */
  --peach-soft:      #fee9de;
  --sky:             #cfe5f2;   /* info */
  --sky-soft:        #e6f2f9;
  --rose:            #f5c9d1;   /* like / heart */
  --rose-soft:       #fbe4e8;
  --lilac:           #d9d0ee;   /* 카테고리 tint */
  --lilac-soft:      #ece7f6;

  /* ─────────────────────────────────────────────────────────────
     COLOR · Semantic
     ───────────────────────────────────────────────────────────── */
  --success:         #4aa677;
  --success-bg:      #dff2e6;
  --warning:         #d99a3b;
  --warning-bg:      #fbeacd;
  --danger:          #d16a75;
  --danger-bg:       #fbe0e3;
  --info:            #5a9bc7;
  --info-bg:         #e0eef7;

  /* 상태 (신청곡 대기열용) */
  --status-waiting:  var(--butter);
  --status-singing:  var(--mint-300);
  --status-done:     var(--muted-2);
  --status-blocked:  var(--rose);

  /* ─────────────────────────────────────────────────────────────
     TYPE
     ───────────────────────────────────────────────────────────── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, Roboto, "Helvetica Neue", "Segoe UI",
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-display: "Pretendard Variable", var(--font-sans);

  /* Type scale (rem 기준, 1rem = 16px) */
  --fs-display:   2.75rem;   /* 44 · 브랜드 타이틀 */
  --fs-h1:        2rem;      /* 32 */
  --fs-h2:        1.5rem;    /* 24 */
  --fs-h3:        1.25rem;   /* 20 */
  --fs-h4:        1.0625rem; /* 17 */
  --fs-body:      0.9375rem; /* 15 */
  --fs-body-lg:   1rem;      /* 16 */
  --fs-caption:   0.8125rem; /* 13 */
  --fs-micro:     0.6875rem; /* 11 · UPPERCASE tag */

  /* Weights */
  --fw-thin:    300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line height */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-caps:    0.14em;   /* micro uppercase */

  /* ─────────────────────────────────────────────────────────────
     SPACING (4px baseline)
     ───────────────────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ─────────────────────────────────────────────────────────────
     RADIUS (적당히 둥글게 — 8~12px, 큰 컨테이너는 16~20)
     ───────────────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;   /* 기본 카드/버튼 */
  --r-lg:   16px;   /* 큰 카드 */
  --r-xl:   20px;   /* 시트 · 팝오버 */
  --r-2xl:  28px;   /* 히어로 컨테이너 */
  --r-pill: 999px;  /* chip, badge */

  /* ─────────────────────────────────────────────────────────────
     SHADOW · 노란기 없는 초록 톤 그림자
     ───────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(60, 100, 78, .06);
  --shadow-sm: 0 2px 6px rgba(60, 100, 78, .07);
  --shadow-md: 0 6px 18px rgba(60, 100, 78, .08);
  --shadow-lg: 0 14px 36px rgba(60, 100, 78, .10);
  --shadow-xl: 0 24px 64px rgba(60, 100, 78, .12);
  --shadow-inner: inset 0 1px 2px rgba(60, 100, 78, .06);

  /* 포커스 링 */
  --ring: 0 0 0 4px rgba(102, 192, 145, .22);

  /* ─────────────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* 큐트한 튐 */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}

/* ==========================================================================
   Base type utilities (의미 있는 시맨틱 스타일)
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--page);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.t-body    { font-size: var(--fs-body-lg); font-weight: var(--fw-regular); line-height: var(--lh-normal); }
.t-body-sm { font-size: var(--fs-body);    font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--ink-soft); }
.t-caption { font-size: var(--fs-caption); font-weight: var(--fw-medium);  line-height: var(--lh-snug);   color: var(--muted); }
.t-micro   { font-size: var(--fs-micro);   font-weight: var(--fw-bold);    letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); }
.t-mono    { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-soft); }