/* ═══════════════════════════════════════════════════════════════════
   올리브영 US 리뷰 분석기 — Design Tokens
   출처: ad_dash_v5.9.15/css/tokens.css (Apple Design System)
   이 스탠드얼론 도구에 필요한 토큰만 발췌 복사 (룩앤필 일관성).
   색·여백·폰트·radius·시맨틱색은 반드시 이 var(--*) 만 사용.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Apple 시맨틱 색 ─────────────────────────────────────────── */
  --clr-primary: #0066cc;
  --clr-primary-focus: #0071e3;
  --clr-primary-on-dark: #2997ff;
  --clr-ink: #1d1d1f;
  --clr-ink-muted-80: #333333;
  --clr-ink-muted-48: #7a7a7a;
  --clr-canvas: #ffffff;
  --clr-parchment: #f5f5f7;
  --clr-surface-pearl: #fafafc;
  --clr-hairline: #e0e0e0;
  --clr-divider-soft: #f0f0f0;
  --clr-on-primary: #ffffff;

  /* ── 시맨틱 상태 색 ──────────────────────────────────────────── */
  --state-success: #16A34A;
  --state-danger:  #DC2626;
  --state-warning: #D97706;
  --state-info:    #0066cc;
  --state-success-bg: #f0fdf4;
  --state-danger-bg:  #fef2f2;
  --state-warning-bg: #fffbeb;
  --state-info-bg:    #eff6ff;

  /* ── 타이포 (Apple ladder) ───────────────────────────────────── */
  --font-display: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'SF Pro Text',    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --fz-display-md:  34px;
  --fz-lead:        28px;
  --fz-tagline:     21px;
  --fz-button-lg:   18px;
  --fz-body:        17px;
  --fz-caption:     14px;
  --fz-fine:        12px;

  --lh-tight:  1.07;
  --lh-snug:   1.19;
  --lh-normal: 1.47;

  --ls-display-md: -0.374px;
  --ls-body:    -0.374px;
  --ls-caption: -0.224px;

  --fw-regular:    400;
  --fw-semi:       600;
  --fw-bold:       700;

  /* ── 간격 (Apple 8pt grid) ───────────────────────────────────── */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  17px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;

  /* ── 반경 (Apple ladder) ─────────────────────────────────────── */
  --r-xs:     5px;
  --r-sm:     8px;
  --r-md:     11px;
  --r-lg:     18px;
  --r-pill:   9999px;

  /* ── 그림자 ──────────────────────────────────────────────────── */
  --shadow:            0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.08);

  /* ── 레이아웃 상수 ───────────────────────────────────────────── */
  --layout-max: 1100px;

  /* ── 모션 ────────────────────────────────────────────────────── */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --transition-slow: 0.3s;

  /* ── Backward-compat 별칭 (신규 컴포넌트 편의) ───────────────── */
  --bg:      var(--clr-canvas);
  --bg2:     var(--clr-parchment);
  --bg3:     var(--clr-surface-pearl);
  --text:    var(--clr-ink);
  --text2:   var(--clr-ink-muted-80);
  --text3:   var(--clr-ink-muted-48);
  --border:  var(--clr-hairline);

  --info:       var(--state-info);
  --info-bg:    var(--state-info-bg);
  --success:    var(--state-success);
  --success-bg: var(--state-success-bg);
  --danger:     var(--state-danger);
  --danger-bg:  var(--state-danger-bg);
  --warning:    var(--state-warning);
  --warning-bg: var(--state-warning-bg);

  --r:    var(--r-lg);
  --rs:   var(--r-sm);
  --font: var(--font-text);
}

/* ── 다크 모드 (Apple tile dark variant) ─────────────────────────── */
[data-theme="dark"] {
  --clr-canvas:        #0f0f12;
  --clr-parchment:     #1a1a21;
  --clr-surface-pearl: #131318;
  --clr-ink:           #f0f0f5;
  --clr-ink-muted-80:  #cccccc;
  --clr-ink-muted-48:  #8a8f9e;
  --clr-hairline:      #2a2a35;
  --clr-divider-soft:  #1a1a21;

  --state-success-bg: #052e16;
  --state-danger-bg:  #2c0b0e;
  --state-warning-bg: #312006;
  --state-info-bg:    #0c1f3d;

  --shadow:            0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.4);
}