/* =========================================================
   마이패스맵 MyPassMap — Design Tokens
   화면 CSS는 아래 "Semantic" 토큰만 사용한다. Primitive(--blue-600 등)는
   토큰 정의용이며 컴포넌트에서 직접 쓰지 않는다.
   테마: <html data-theme="light|dark">. 속성이 없으면 OS 설정을 따른다.
   ========================================================= */

:root {
  /* ---------- Primitive palette ---------- */
  --gray-0:   #FFFFFF;
  --gray-25:  #F8F9FB;
  --gray-50:  #F2F4F7;
  --gray-100: #E6E9EF;
  --gray-200: #D3D8E0;
  --gray-300: #B4BBC8;
  --gray-400: #8A93A5;
  --gray-500: #646D80;
  --gray-600: #4D5566;
  --gray-700: #363C4A;
  --gray-800: #232833;
  --gray-850: #1A1E27;
  --gray-900: #13161D;
  --gray-950: #0C0E13;

  --blue-50:  #EEF1FE;
  --blue-100: #DCE2FD;
  --blue-200: #B9C5FB;
  --blue-300: #8FA2F7;
  --blue-400: #6A80F0;
  --blue-500: #4762E8;
  --blue-600: #2F4BE0; /* brand */
  --blue-700: #253BB8;
  --blue-800: #1F3190;
  --blue-900: #0C1440;

  --amber-100: #FEF1D6;
  --amber-300: #FAD07A;
  --amber-400: #F5B83D; /* marker accent */
  --amber-700: #8A5208;
  --amber-950: #2A1A00;

  --green-50:  #E7F5ED;
  --green-400: #4CC38A;
  --green-700: #137A45;

  --red-50:  #FDECEC;
  --red-400: #FF8A8A;
  --red-700: #C02A2A;

  /* ---------- Typography ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕",
    system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;    /* 12 캡션, 광고 라벨 */
  --fs-sm:   0.875rem;   /* 14 메타, 배지, 보조 */
  --fs-base: 1rem;       /* 16 본문 */
  --fs-md:   1.125rem;   /* 18 리드, 카드 제목 */
  --fs-lg:   1.25rem;    /* 20 h4 */
  --fs-xl:   1.5rem;     /* 24 h3 */
  --fs-2xl:  clamp(1.625rem, 1.35rem + 1.2vw, 2rem);    /* 26→32 h2 */
  --fs-3xl:  clamp(2rem, 1.55rem + 2vw, 2.75rem);       /* 32→44 h1 */
  --fs-4xl:  clamp(2.5rem, 1.7rem + 3.6vw, 4rem);       /* 40→64 결과 수치 */
  --fs-display: clamp(2rem, 1.2rem + 3.6vw, 3.25rem);   /* 32→52 홈 히어로 제목 전용 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --lh-tight: 1.2;    /* 큰 숫자, 디스플레이 */
  --lh-snug: 1.35;    /* 제목 */
  --lh-normal: 1.55;  /* UI 텍스트 */
  --lh-relaxed: 1.75; /* 한국어 본문 */

  --ls-tight: -0.03em;  /* 32px 이상 */
  --ls-snug: -0.015em;  /* 18~28px */
  --ls-normal: 0;
  --ls-wide: 0.08em;    /* 영문 오버라인 */

  /* ---------- Spacing (4px grid) ---------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* 섹션 간 세로 리듬 (모바일 48 → 데스크톱 96) */
  --space-section: clamp(48px, 6vw + 24px, 96px);

  /* ---------- Radius ---------- */
  --radius-xs: 4px;    /* 체크박스, 인라인 코드 */
  --radius-sm: 6px;    /* 배지, 작은 버튼 */
  --radius-md: 10px;   /* 버튼, 입력 */
  --radius-lg: 14px;   /* 카드 */
  --radius-xl: 20px;   /* 히어로 패널 */
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --dur-instant: 80ms;   /* 누름 피드백 */
  --dur-fast: 140ms;     /* 색·테두리 변화 */
  --dur-base: 220ms;     /* 카드 리프트, 토스트 */
  --dur-slow: 360ms;     /* 화면 전환, 결과 등장 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- Layout ---------- */
  --container-max: 1120px;
  --container-prose: 680px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 60px;
  --tap-min: 44px;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;
  --z-toast: 300;

  /* ---------- Ad slots (고정 높이 = CLS 0) ---------- */
  --ad-banner-h: 100px;  /* 모바일 320x100 */
  --ad-rect-h: 280px;    /* 336x280 / 300x250 */
}

@media (min-width: 768px) {
  :root {
    --ad-banner-h: 90px; /* 728x90 */
    --header-h: 64px;
  }
}

/* =========================================================
   Semantic tokens — LIGHT (기본)
   ========================================================= */
:root {
  color-scheme: light;

  --color-bg: var(--gray-25);
  --color-surface: var(--gray-0);
  --color-surface-raised: var(--gray-0);
  --color-surface-sunken: var(--gray-50);
  --color-surface-inverse: var(--gray-900);
  --color-hover: rgb(19 22 29 / 0.05);     /* 투명 요소(고스트 버튼·메뉴·목록 행)의 hover 덧칠 */
  --color-header: rgb(248 249 251 / 0.82);

  --color-border: var(--gray-100);
  --color-border-strong: var(--gray-200);
  --color-border-hover: var(--gray-300);
  --color-border-input: var(--gray-400);   /* 입력 경계 3:1 이상 */

  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary: var(--gray-500);
  --color-text-disabled: var(--gray-300);
  --color-text-inverse: var(--gray-0);

  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-active: var(--blue-800);
  --color-primary-soft: var(--blue-50);
  --color-primary-soft-hover: var(--blue-100);
  --color-primary-text: var(--blue-700);   /* soft 배경 위 텍스트 */
  --color-on-primary: var(--gray-0);
  --color-link: var(--blue-600);

  --color-accent: var(--amber-400);        /* D-day, 신기록 등 '강조 한 점'에만 */
  --color-on-accent: var(--amber-950);
  --color-accent-soft: var(--amber-100);
  --color-accent-text: var(--amber-700);

  --color-success: var(--green-700);
  --color-success-soft: var(--green-50);
  --color-warning: var(--amber-700);
  --color-warning-soft: var(--amber-100);
  --color-danger: var(--red-700);
  --color-danger-soft: var(--red-50);
  --color-toast-success: var(--green-400); /* inverse(어두운) 표면 위 아이콘 */
  --color-toast-danger: var(--red-400);

  --color-focus: var(--blue-500);
  --color-overlay: rgb(12 14 19 / 0.48);
  --color-skeleton: var(--gray-100);
  --color-skeleton-shine: var(--gray-50);

  --shadow-xs: 0 1px 2px rgb(19 22 29 / 0.06);
  --shadow-sm: 0 1px 2px rgb(19 22 29 / 0.05), 0 2px 8px rgb(19 22 29 / 0.04);
  --shadow-md: 0 2px 4px rgb(19 22 29 / 0.04), 0 10px 28px rgb(19 22 29 / 0.08);
  --shadow-lg: 0 4px 10px rgb(19 22 29 / 0.06), 0 24px 56px rgb(19 22 29 / 0.14);
  --shadow-primary: 0 1px 2px rgb(47 75 224 / 0.25), 0 6px 18px rgb(47 75 224 / 0.22);

  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
}

/* =========================================================
   Semantic tokens — DARK
   (명시적 dark + OS dark이면서 light 강제가 아닐 때. 두 블록은 동일하게 유지)
   ========================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--gray-950);
  --color-surface: var(--gray-900);
  --color-surface-raised: var(--gray-850);
  --color-surface-sunken: #090B0F;
  --color-surface-inverse: var(--gray-50);
  --color-hover: rgb(255 255 255 / 0.07);
  --color-header: rgb(12 14 19 / 0.78);

  --color-border: var(--gray-800);
  --color-border-strong: var(--gray-700);
  --color-border-hover: #4A5162;
  --color-border-input: #626A7D;

  --color-text: #EEF0F4;
  --color-text-secondary: #A7AFBE;
  --color-text-tertiary: #8E97A9;
  --color-text-disabled: #4A5162;
  --color-text-inverse: var(--gray-900);

  --color-primary: var(--blue-300);
  --color-primary-hover: var(--blue-200);
  --color-primary-active: var(--blue-100);
  --color-primary-soft: rgb(143 162 247 / 0.14);
  --color-primary-soft-hover: rgb(143 162 247 / 0.22);
  --color-primary-text: var(--blue-200);
  --color-on-primary: var(--blue-900);
  --color-link: var(--blue-300);

  --color-accent: var(--amber-400);
  --color-on-accent: var(--amber-950);
  --color-accent-soft: rgb(245 184 61 / 0.14);
  --color-accent-text: var(--amber-300);

  --color-success: var(--green-400);
  --color-success-soft: rgb(76 195 138 / 0.14);
  --color-warning: var(--amber-300);
  --color-warning-soft: rgb(245 184 61 / 0.14);
  --color-danger: var(--red-400);
  --color-danger-soft: rgb(255 138 138 / 0.14);
  --color-toast-success: var(--green-700); /* inverse(밝은) 표면 위 아이콘 */
  --color-toast-danger: var(--red-700);

  --color-focus: var(--blue-300);
  --color-overlay: rgb(0 0 0 / 0.6);
  --color-skeleton: var(--gray-800);
  --color-skeleton-shine: var(--gray-700);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.02);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 4px 12px rgb(0 0 0 / 0.4), 0 28px 64px rgb(0 0 0 / 0.6);
  --shadow-primary: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(143 162 247 / 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: var(--gray-950);
    --color-surface: var(--gray-900);
    --color-surface-raised: var(--gray-850);
    --color-surface-sunken: #090B0F;
    --color-surface-inverse: var(--gray-50);
    --color-hover: rgb(255 255 255 / 0.07);
    --color-header: rgb(12 14 19 / 0.78);

    --color-border: var(--gray-800);
    --color-border-strong: var(--gray-700);
    --color-border-hover: #4A5162;
    --color-border-input: #626A7D;

    --color-text: #EEF0F4;
    --color-text-secondary: #A7AFBE;
    --color-text-tertiary: #8E97A9;
    --color-text-disabled: #4A5162;
    --color-text-inverse: var(--gray-900);

    --color-primary: var(--blue-300);
    --color-primary-hover: var(--blue-200);
    --color-primary-active: var(--blue-100);
    --color-primary-soft: rgb(143 162 247 / 0.14);
    --color-primary-soft-hover: rgb(143 162 247 / 0.22);
    --color-primary-text: var(--blue-200);
    --color-on-primary: var(--blue-900);
    --color-link: var(--blue-300);

    --color-accent: var(--amber-400);
    --color-on-accent: var(--amber-950);
    --color-accent-soft: rgb(245 184 61 / 0.14);
    --color-accent-text: var(--amber-300);

    --color-success: var(--green-400);
    --color-success-soft: rgb(76 195 138 / 0.14);
    --color-warning: var(--amber-300);
    --color-warning-soft: rgb(245 184 61 / 0.14);
    --color-danger: var(--red-400);
    --color-danger-soft: rgb(255 138 138 / 0.14);
    --color-toast-success: var(--green-700);
    --color-toast-danger: var(--red-700);

    --color-focus: var(--blue-300);
    --color-overlay: rgb(0 0 0 / 0.6);
    --color-skeleton: var(--gray-800);
    --color-skeleton-shine: var(--gray-700);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.02);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 4px 12px rgb(0 0 0 / 0.4), 0 28px 64px rgb(0 0 0 / 0.6);
    --shadow-primary: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(143 162 247 / 0.18);
  }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}