/* Deepie 디자인 토큰 — Figma "Deepie" Foundations 변수 그대로 (docs/DESIGN_GUIDE.md)
 * 새 컴포넌트(components.css, dp-*)는 이 변수만 쓴다. 값을 직접 쓰지 않는다.
 * 기존 app.css 변수(--accent, --bg …)는 건드리지 않는다. 화면 전체 교체는 따로 진행.
 */
:root {
  /* ── Primitives · cherry (키컬러 500) ── */
  --cherry-50: #fdebf0;
  --cherry-100: #fad3de;
  --cherry-200: #f5a9bd;
  --cherry-300: #f07c9a;
  --cherry-400: #de4a72;
  --cherry-500: #c02750;
  --cherry-600: #9e1f42;
  --cherry-700: #7c1834;
  --cherry-800: #5e1228;
  --cherry-900: #440c1e;

  /* ── Primitives · gray (Figma 시맨틱 변수가 참조하는 단계만. gray/600은 Figma에 쓰이는 곳이 없어 비움) ── */
  --gray-0: #ffffff;
  --gray-50: #f2f2f2;
  --gray-100: #efefef;
  --gray-200: #dbdbdb;
  --gray-300: #b9b9b9;
  --gray-400: #777777;
  --gray-500: #6a6a6a;
  --gray-700: #353537;
  --gray-800: #222225;
  --gray-900: #16151c;
  --gray-950: #0b0a10;

  /* ── Primitives · alpha-white ── */
  --alpha-white-5: rgba(255, 255, 255, .05);
  --alpha-white-10: rgba(255, 255, 255, .1);
  --alpha-white-20: rgba(255, 255, 255, .2);

  /* ── Semantic · color ── */
  --color-bg-canvas: var(--gray-950);
  --color-bg-elevated: var(--gray-900);
  --color-surface-subtle: var(--alpha-white-5);
  --color-surface-default: var(--alpha-white-10);
  --color-surface-strong: var(--alpha-white-20);
  --color-surface-chip: var(--gray-700);
  --color-surface-inverse: var(--gray-100);
  --color-surface-knob: var(--gray-200);
  --color-surface-accent: var(--cherry-500);
  --color-text-primary: var(--gray-0);
  --color-text-emphasis: var(--gray-50);
  --color-text-placeholder: var(--gray-200);
  --color-text-secondary: var(--gray-300);
  --color-text-tertiary: var(--gray-500);
  --color-text-inverse: var(--gray-800);
  --color-text-accent: var(--cherry-300);
  --color-icon-default: var(--gray-300);
  --color-icon-active: var(--cherry-300);
  --color-border-default: var(--alpha-white-20);
  --color-border-divider: var(--gray-400);
  --color-accent-glow-start: var(--cherry-500);
  --color-accent-glow-end: var(--cherry-900);
  --color-status-notification: var(--cherry-400);
  /* 그라데이션은 로고·Deepie Original 배지에만 */
  --gradient-original: linear-gradient(90deg, var(--cherry-500), var(--cherry-900));

  /* ── Spacing ── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* ── Radius: 기본은 0(각진 모서리). xs·sm·md·full은 보관 시안용이라 새 컴포넌트에 연결하지 않음 ── */
  --radius-none: 0;
  --radius-full: 999px; /* 예외: 세이프 토글, 알림 점 */

  /* ── Typography ── */
  /* TODO(W4, common): Pretendard 웹폰트 파일 배치는 public/vendor/(W1) 요청 필요. 그 전에는 설치된 폰트 → Wanted Sans로 대체 */
  --font-sans: "Pretendard Variable", "Pretendard", "Wanted Sans Variable", "Wanted Sans", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --tracking-tight: -.03em; /* 제목·헤드라인 -3% */
  --tracking-base: -.02em;  /* 본문·작은 글자 -2% */

  /* ── Motion (DESIGN_GUIDE 8장) ── */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --dur-fast: .2s;   /* Rank Row 썸네일 */
  --dur-base: .25s;  /* Mobile 헤더 검색 */
  --dur-slow: .35s;  /* World Cast 슬라이드인, 토스트 */

  /* ── Layout (DESIGN_GUIDE 4장) ── */
  --header-h-pc: 80px;
  --header-h-mobile: 56px;
  --content-max: 1680px;
  --gutter-pc: 120px;
  --gutter-mobile: 16px;
}

/* ── 글자 스타일 (Figma Text Styles) ── */
.t-display-l, .t-display-m, .t-display-s,
.t-title-l, .t-title-l-regular, .t-title-m, .t-title-s, .t-headline,
.t-body, .t-body-strong, .t-body-s, .t-body-s-strong, .t-body-reading,
.t-caption, .t-micro, .t-micro-tab { font-family: var(--font-sans); margin: 0; }

.t-display-l { font-size: 60px; font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-tight); }
.t-display-m { font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-tight); }
.t-display-s { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-tight); }
.t-title-l { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: var(--tracking-tight); }
.t-title-l-regular { font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: var(--tracking-tight); }
.t-title-m { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: var(--tracking-tight); }
.t-title-s { font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: var(--tracking-tight); }
.t-headline { font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: var(--tracking-tight); }
.t-body { font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: var(--tracking-base); }
.t-body-strong { font-size: 15px; font-weight: 600; line-height: 1.6; letter-spacing: var(--tracking-base); }
.t-body-s { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: var(--tracking-base); }
.t-body-s-strong { font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: var(--tracking-base); }
.t-body-reading { font-size: 16px; font-weight: 400; line-height: 1.8; letter-spacing: var(--tracking-base); }
.t-caption { font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: var(--tracking-base); }
.t-micro { font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: var(--tracking-base); }
.t-micro-tab { font-size: 8px; font-weight: 500; line-height: 1.2; letter-spacing: var(--tracking-base); }
/* Mobile 페이지 제목은 Display/S를 쓴다(DESIGN_GUIDE 3장). 화면에서 클래스로 고른다 */