/* =========================================================
   원팡 2026 — 디자인 토큰
   모든 색·글자·간격·모서리·그림자는 여기서만 정한다.
   컴포넌트와 화면은 이 변수만 쓴다(값 하드코딩 금지).
   ========================================================= */
/* 글꼴: Pretendard Variable(SIL OFL 1.1). 화면마다 쓰는 글자 조각만 받는 공식 나눔 파일을 템플릿에서 부른다(<load> pretendardvariable-dynamic-subset). */

:root {
  /* 브랜드 원색 — 지금 원팡에서 가져온 값 */
  --op-pink: #FD4C97;          /* 상단 띠·로고 핑크 */
  --op-pink-strong: #E8337F;   /* 큰 글자·가격 */
  --op-pink-text: #D6206F;     /* 작은 글자(흰 바탕 대비 4.5:1 이상) */
  --op-cream: #FFFEE0;         /* 좌우 크림 바탕 */
  --op-lilac: #C3AEEB;         /* 메인 배너 보라 원 */
  --op-mint: #9EE2CF;          /* 메인 배너 민트 원 */
  --op-sky: #CFEAFF;           /* 공지 말풍선 하늘색 */
  --op-lemon: #FFE27A;
  --op-naver: #03C75A;

  /* 의미 토큰(라이트) */
  --op-bg: #FFFDF6;
  --op-surface: #FFFFFF;
  --op-surface-2: #F8F6F9;
  --op-surface-3: #F1EEF3;
  --op-line: #EEEAF1;
  --op-line-strong: #DED8E3;
  --op-text: #1E1B24;
  --op-text-2: #57525F;
  --op-text-3: #6F6A79;
  --op-text-inverse: #FFFFFF;

  --op-brand: var(--op-pink);
  --op-brand-hover: #F43D8A;
  --op-brand-text: var(--op-pink-text);
  --op-brand-soft: #FFF0F6;
  --op-brand-soft-2: #FFE1EE;
  --op-price: var(--op-pink-strong);
  --op-success: #08805F;
  --op-success-soft: #E5F7F1;
  --op-lilac-soft: #F2EDFC;
  --op-mint-soft: #E7F8F3;
  --op-sky-soft: #EAF6FF;
  --op-cream-soft: #FFFCE6;
  --op-warning: #B45309;
  --op-warning-soft: #FFF4DB;
  --op-focus: 0 0 0 3px rgba(253, 76, 151, .28);

  /* 글자 */
  --op-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --op-t-2xs: 11px;
  --op-t-xs: 12px;
  --op-t-sm: 13px;
  --op-t-md: 14px;
  --op-t-base: 15px;
  --op-t-lg: 17px;
  --op-t-xl: 20px;
  --op-t-2xl: 24px;
  --op-t-3xl: 30px;
  --op-t-4xl: 38px;
  --op-w-regular: 400;
  --op-w-medium: 500;
  --op-w-semibold: 600;
  --op-w-bold: 700;
  --op-w-black: 800;
  --op-tracking-tight: -0.02em;

  /* 간격 */
  --op-s-1: 4px;
  --op-s-2: 8px;
  --op-s-3: 12px;
  --op-s-4: 16px;
  --op-s-5: 20px;
  --op-s-6: 24px;
  --op-s-8: 32px;
  --op-s-10: 40px;
  --op-s-12: 48px;

  /* 모서리 */
  --op-r-xs: 6px;
  --op-r-sm: 10px;
  --op-r-md: 14px;
  --op-r-lg: 20px;
  --op-r-xl: 28px;
  --op-r-pill: 999px;

  /* 그림자 */
  --op-shadow-1: 0 1px 2px rgba(30, 27, 36, .05);
  --op-shadow-2: 0 10px 30px -12px rgba(30, 27, 36, .18), 0 2px 6px -2px rgba(30, 27, 36, .06);
  --op-shadow-3: 0 24px 60px -20px rgba(30, 27, 36, .32);
  --op-shadow-brand: 0 10px 24px -10px rgba(253, 76, 151, .65);

  /* 움직임 */
  --op-ease: cubic-bezier(.2, .8, .2, 1);
  --op-dur: .18s;

  /* 배치 */
  --op-container: 1280px;
  --op-gutter: 24px;
  --op-aside: 320px;
  --op-sticky-top: 0px;
  --op-safe-top: env(safe-area-inset-top, 0px);
  --op-vh: 100dvh;

  /* 쇼핑몰 표시 색 */
  --op-store-coupang: #E52528;
  --op-store-ali: #FF5A1F;
  --op-store-naver: #03C75A;
  --op-store-gmarket: #00A84F;
  --op-store-11st: #FF0038;
  --op-store-auction: #E41E2B;
  --op-store-lotteon: #E60012;
  --op-store-homeplus: #E5003E;
  --op-store-cj: #7A3FF2;
  --op-store-etc: #8F8A99;

  color-scheme: light;
}

/* 다크 모드 — 의미 토큰만 바꾼다 */
:root[data-theme="dark"] {
  --op-bg: #121015;
  --op-surface: #1B1920;
  --op-surface-2: #222028;
  --op-surface-3: #2A2731;
  --op-line: #2E2B35;
  --op-line-strong: #3B3743;
  --op-text: #F4F1F7;
  --op-text-2: #C2BCCB;
  --op-text-3: #9C96A6;

  --op-brand-hover: #FF63A5;
  --op-brand-text: #FF7DB5;
  --op-brand-soft: #2C1823;
  --op-brand-soft-2: #3A1C2C;
  --op-price: #FF6FAA;
  --op-success: #45D3A8;
  --op-success-soft: #13302A;
  --op-lilac-soft: #241F33;
  --op-mint-soft: #142B27;
  --op-sky-soft: #15232F;
  --op-cream-soft: #26241A;
  --op-warning: #F6B54C;
  --op-warning-soft: #2E2414;

  --op-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --op-shadow-2: 0 10px 30px -12px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .35);
  --op-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .75);

  color-scheme: dark;
}