/* ==========================================================================
   SHOP THEME COLORS
   - Public / Customer theme
   - Tailwind 색상 유틸리티 사용 금지
   - 색상은 이 파일의 토큰과 유틸리티만 사용
   - spacing / size / typography / radius / shadow / layout 등은 Tailwind 사용
   - HEX / rgb / hsl 등의 임의 색상 하드코딩 금지
========================================================================== */


/* ==========================================================================
   1. COLOR TOKENS
========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Brand
     - Minimal / Social / Commerce
  -------------------------------------------------------------------------- */

  --color-primary-rgb: 24 24 27;
  --color-secondary-rgb: 113 113 122;
  --color-accent-rgb: 244 63 94;


  /* --------------------------------------------------------------------------
     On Brand
     - 색상 배경 위에 올라가는 텍스트 / 아이콘
  -------------------------------------------------------------------------- */

  --color-on-primary-rgb: 255 255 255;
  --color-on-secondary-rgb: 255 255 255;
  --color-on-accent-rgb: 255 255 255;


  /* --------------------------------------------------------------------------
     Background / Surface
     - 상품 이미지와 콘텐츠가 중심이 되도록 거의 무채색 사용
  -------------------------------------------------------------------------- */

  --color-bg-base-rgb: 255 255 255;
  --color-bg-surface-rgb: 250 250 250;
  --color-bg-muted-rgb: 244 244 245;
  --color-bg-strong-rgb: 228 228 231;
  --color-bg-card-rgb: 255 255 255;


  /* --------------------------------------------------------------------------
     Text
  -------------------------------------------------------------------------- */

  --color-text-main-rgb: 24 24 27;
  --color-text-muted-rgb: 113 113 122;
  --color-text-subtle-rgb: 161 161 170;
  --color-text-disabled-rgb: 212 212 216;
  --color-text-inverse-rgb: 255 255 255;


  /* --------------------------------------------------------------------------
     Border
  -------------------------------------------------------------------------- */

  --color-border-muted-rgb: 244 244 245;
  --color-border-default-rgb: 228 228 231;
  --color-border-divider-rgb: 244 244 245;
  --color-border-strong-rgb: 212 212 216;


  /* --------------------------------------------------------------------------
     Semantic
  -------------------------------------------------------------------------- */

  --color-success-rgb: 22 163 74;
  --color-warning-rgb: 217 119 6;
  --color-danger-rgb: 220 38 38;
  --color-info-rgb: 14 116 144;


  /* --------------------------------------------------------------------------
     On Semantic
  -------------------------------------------------------------------------- */

  --color-on-success-rgb: 255 255 255;
  --color-on-warning-rgb: 255 255 255;
  --color-on-danger-rgb: 255 255 255;
  --color-on-info-rgb: 255 255 255;


  /* --------------------------------------------------------------------------
     Commerce
  -------------------------------------------------------------------------- */

  --color-price-rgb: 24 24 27;

  /* 할인 / 세일은 브랜드 Accent와 약간 구분된 Red */
  --color-sale-rgb: 225 29 72;
  --color-discount-rgb: 225 29 72;

  --color-stock-in-rgb: 22 163 74;
  --color-stock-low-rgb: 217 119 6;
  --color-stock-out-rgb: 161 161 170;


  /* --------------------------------------------------------------------------
     Interactive
     - 일반 링크도 파란색 대신 브랜드 차콜 사용
     - 선택 / 포커스는 Accent 사용
  -------------------------------------------------------------------------- */

  --color-link-rgb: 24 24 27;
  --color-focus-rgb: 244 63 94;
  --color-selection-rgb: 244 63 94;


  /* --------------------------------------------------------------------------
     Effects
  -------------------------------------------------------------------------- */

  --color-overlay-rgb: 24 24 27;
  --color-shadow-rgb: 24 24 27;
}


/* ==========================================================================
   2. TEXT COLOR UTILITIES
========================================================================== */

.c-main {
  color: rgb(var(--color-text-main-rgb));
}

.c-muted {
  color: rgb(var(--color-text-muted-rgb));
}

.c-subtle {
  color: rgb(var(--color-text-subtle-rgb));
}

.c-disabled {
  color: rgb(var(--color-text-disabled-rgb));
}

.c-inverse {
  color: rgb(var(--color-text-inverse-rgb));
}


.c-primary {
  color: rgb(var(--color-primary-rgb));
}

.c-secondary {
  color: rgb(var(--color-secondary-rgb));
}

.c-accent {
  color: rgb(var(--color-accent-rgb));
}


.c-success {
  color: rgb(var(--color-success-rgb));
}

.c-warning {
  color: rgb(var(--color-warning-rgb));
}

.c-danger {
  color: rgb(var(--color-danger-rgb));
}

.c-info {
  color: rgb(var(--color-info-rgb));
}


.c-on-primary {
  color: rgb(var(--color-on-primary-rgb));
}

.c-on-secondary {
  color: rgb(var(--color-on-secondary-rgb));
}

.c-on-accent {
  color: rgb(var(--color-on-accent-rgb));
}

.c-on-success {
  color: rgb(var(--color-on-success-rgb));
}

.c-on-warning {
  color: rgb(var(--color-on-warning-rgb));
}

.c-on-danger {
  color: rgb(var(--color-on-danger-rgb));
}

.c-on-info {
  color: rgb(var(--color-on-info-rgb));
}


/* Commerce */

.c-price {
  color: rgb(var(--color-price-rgb));
}

.c-sale {
  color: rgb(var(--color-sale-rgb));
}

.c-discount {
  color: rgb(var(--color-discount-rgb));
}

.c-stock-in {
  color: rgb(var(--color-stock-in-rgb));
}

.c-stock-low {
  color: rgb(var(--color-stock-low-rgb));
}

.c-stock-out {
  color: rgb(var(--color-stock-out-rgb));
}


/* Link */

.c-link {
  color: rgb(var(--color-link-rgb));
}


/* ==========================================================================
   3. BACKGROUND COLOR UTILITIES
========================================================================== */

.bg-base {
  background-color: rgb(var(--color-bg-base-rgb));
}

.bg-surface {
  background-color: rgb(var(--color-bg-surface-rgb));
}

.bg-muted {
  background-color: rgb(var(--color-bg-muted-rgb));
}

.bg-strong {
  background-color: rgb(var(--color-bg-strong-rgb));
}

.bg-card {
  background-color: rgb(var(--color-bg-card-rgb));
}


/* Brand */

.bg-primary {
  background-color: rgb(var(--color-primary-rgb));
}

.bg-secondary {
  background-color: rgb(var(--color-secondary-rgb));
}

.bg-accent {
  background-color: rgb(var(--color-accent-rgb));
}


/* Semantic */

.bg-success {
  background-color: rgb(var(--color-success-rgb));
}

.bg-warning {
  background-color: rgb(var(--color-warning-rgb));
}

.bg-danger {
  background-color: rgb(var(--color-danger-rgb));
}

.bg-info {
  background-color: rgb(var(--color-info-rgb));
}


/* Soft Brand */

.bg-primary-soft {
  background-color: rgb(var(--color-primary-rgb) / 0.06);
}

.bg-secondary-soft {
  background-color: rgb(var(--color-secondary-rgb) / 0.08);
}

.bg-accent-soft {
  background-color: rgb(var(--color-accent-rgb) / 0.08);
}


/* Soft Semantic */

.bg-success-soft {
  background-color: rgb(var(--color-success-rgb) / 0.08);
}

.bg-warning-soft {
  background-color: rgb(var(--color-warning-rgb) / 0.10);
}

.bg-danger-soft {
  background-color: rgb(var(--color-danger-rgb) / 0.08);
}

.bg-info-soft {
  background-color: rgb(var(--color-info-rgb) / 0.08);
}


/* Commerce */

.bg-sale-soft {
  background-color: rgb(var(--color-sale-rgb) / 0.08);
}

.bg-stock-in-soft {
  background-color: rgb(var(--color-stock-in-rgb) / 0.08);
}

.bg-stock-low-soft {
  background-color: rgb(var(--color-stock-low-rgb) / 0.10);
}

.bg-stock-out-soft {
  background-color: rgb(var(--color-stock-out-rgb) / 0.10);
}


/* ==========================================================================
   4. BORDER COLOR UTILITIES
========================================================================== */

.border-muted {
  border-color: rgb(var(--color-border-muted-rgb));
}

.border-default {
  border-color: rgb(var(--color-border-default-rgb));
}

.border-divider {
  border-color: rgb(var(--color-border-divider-rgb));
}

.border-strong {
  border-color: rgb(var(--color-border-strong-rgb));
}


.border-primary {
  border-color: rgb(var(--color-primary-rgb));
}

.border-secondary {
  border-color: rgb(var(--color-secondary-rgb));
}

.border-accent {
  border-color: rgb(var(--color-accent-rgb));
}


.border-success {
  border-color: rgb(var(--color-success-rgb));
}

.border-warning {
  border-color: rgb(var(--color-warning-rgb));
}

.border-danger {
  border-color: rgb(var(--color-danger-rgb));
}

.border-info {
  border-color: rgb(var(--color-info-rgb));
}


/* Soft Borders */

.border-primary-soft {
  border-color: rgb(var(--color-primary-rgb) / 0.16);
}

.border-secondary-soft {
  border-color: rgb(var(--color-secondary-rgb) / 0.18);
}

.border-accent-soft {
  border-color: rgb(var(--color-accent-rgb) / 0.20);
}

.border-success-soft {
  border-color: rgb(var(--color-success-rgb) / 0.20);
}

.border-warning-soft {
  border-color: rgb(var(--color-warning-rgb) / 0.24);
}

.border-danger-soft {
  border-color: rgb(var(--color-danger-rgb) / 0.20);
}

.border-info-soft {
  border-color: rgb(var(--color-info-rgb) / 0.20);
}


/* ==========================================================================
   5. HOVER TEXT UTILITIES
========================================================================== */

.hover-c-main:hover {
  color: rgb(var(--color-text-main-rgb));
}

.hover-c-muted:hover {
  color: rgb(var(--color-text-muted-rgb));
}

.hover-c-primary:hover {
  color: rgb(var(--color-primary-rgb));
}

.hover-c-secondary:hover {
  color: rgb(var(--color-secondary-rgb));
}

.hover-c-accent:hover {
  color: rgb(var(--color-accent-rgb));
}

.hover-c-danger:hover {
  color: rgb(var(--color-danger-rgb));
}

.hover-c-link:hover {
  color: rgb(var(--color-link-rgb));
}


/* ==========================================================================
   6. HOVER BACKGROUND UTILITIES
========================================================================== */

.hover-bg-surface:hover {
  background-color: rgb(var(--color-bg-surface-rgb));
}

.hover-bg-muted:hover {
  background-color: rgb(var(--color-bg-muted-rgb));
}

.hover-bg-strong:hover {
  background-color: rgb(var(--color-bg-strong-rgb));
}


.hover-bg-primary:hover {
  background-color: rgb(var(--color-primary-rgb));
}

.hover-bg-primary-soft:hover {
  background-color: rgb(var(--color-primary-rgb) / 0.06);
}

.hover-bg-secondary-soft:hover {
  background-color: rgb(var(--color-secondary-rgb) / 0.08);
}

.hover-bg-accent-soft:hover {
  background-color: rgb(var(--color-accent-rgb) / 0.08);
}

.hover-bg-success-soft:hover {
  background-color: rgb(var(--color-success-rgb) / 0.08);
}

.hover-bg-warning-soft:hover {
  background-color: rgb(var(--color-warning-rgb) / 0.10);
}

.hover-bg-danger-soft:hover {
  background-color: rgb(var(--color-danger-rgb) / 0.08);
}

.hover-bg-info-soft:hover {
  background-color: rgb(var(--color-info-rgb) / 0.08);
}


/* ==========================================================================
   7. HOVER BORDER UTILITIES
========================================================================== */

.hover-border-default:hover {
  border-color: rgb(var(--color-border-default-rgb));
}

.hover-border-strong:hover {
  border-color: rgb(var(--color-border-strong-rgb));
}

.hover-border-primary:hover {
  border-color: rgb(var(--color-primary-rgb));
}

.hover-border-accent:hover {
  border-color: rgb(var(--color-accent-rgb));
}

.hover-border-danger:hover {
  border-color: rgb(var(--color-danger-rgb));
}


/* ==========================================================================
   8. FOCUS UTILITIES
========================================================================== */

.focus-border-primary:focus,
.focus-border-primary:focus-visible {
  border-color: rgb(var(--color-primary-rgb));
}

.focus-border-accent:focus,
.focus-border-accent:focus-visible {
  border-color: rgb(var(--color-accent-rgb));
}

.focus-border-danger:focus,
.focus-border-danger:focus-visible {
  border-color: rgb(var(--color-danger-rgb));
}


.focus-ring-primary:focus,
.focus-ring-primary:focus-visible {
  box-shadow: 0 0 0 4px rgb(var(--color-focus-rgb) / 0.12);
}

.focus-ring-accent:focus,
.focus-ring-accent:focus-visible {
  box-shadow: 0 0 0 4px rgb(var(--color-accent-rgb) / 0.12);
}

.focus-ring-danger:focus,
.focus-ring-danger:focus-visible {
  box-shadow: 0 0 0 4px rgb(var(--color-danger-rgb) / 0.12);
}


/* ==========================================================================
   9. RING COLOR UTILITIES
   - Tailwind ring-* 두께와 함께 사용 가능
========================================================================== */

.ring-primary {
  --tw-ring-color: rgb(var(--color-primary-rgb));
}

.ring-primary-soft {
  --tw-ring-color: rgb(var(--color-primary-rgb) / 0.12);
}

.ring-secondary {
  --tw-ring-color: rgb(var(--color-secondary-rgb));
}

.ring-accent {
  --tw-ring-color: rgb(var(--color-accent-rgb));
}

.ring-accent-soft {
  --tw-ring-color: rgb(var(--color-accent-rgb) / 0.12);
}

.ring-success {
  --tw-ring-color: rgb(var(--color-success-rgb));
}

.ring-warning {
  --tw-ring-color: rgb(var(--color-warning-rgb));
}

.ring-danger {
  --tw-ring-color: rgb(var(--color-danger-rgb));
}

.ring-info {
  --tw-ring-color: rgb(var(--color-info-rgb));
}


/* ==========================================================================
   10. PLACEHOLDER
========================================================================== */

.placeholder-subtle::placeholder {
  color: rgb(var(--color-text-subtle-rgb));
}

.placeholder-muted::placeholder {
  color: rgb(var(--color-text-muted-rgb));
}


/* ==========================================================================
   11. SELECTION
========================================================================== */

::selection {
  background-color: rgb(var(--color-selection-rgb) / 0.16);
  color: rgb(var(--color-text-main-rgb));
}


/* ==========================================================================
   12. OVERLAY
========================================================================== */

.bg-overlay {
  background-color: rgb(var(--color-overlay-rgb) / 0.52);
}

.bg-overlay-soft {
  background-color: rgb(var(--color-overlay-rgb) / 0.30);
}

.bg-overlay-strong {
  background-color: rgb(var(--color-overlay-rgb) / 0.70);
}


/* ==========================================================================
   13. GROUP HOVER
========================================================================== */

.group:hover .group-hover-c-main {
  color: rgb(var(--color-text-main-rgb));
}

.group:hover .group-hover-c-primary {
  color: rgb(var(--color-primary-rgb));
}

.group:hover .group-hover-c-accent {
  color: rgb(var(--color-accent-rgb));
}

.group:hover .group-hover-c-danger {
  color: rgb(var(--color-danger-rgb));
}

.group:hover .group-hover-bg-surface {
  background-color: rgb(var(--color-bg-surface-rgb));
}

.group:hover .group-hover-bg-primary-soft {
  background-color: rgb(var(--color-primary-rgb) / 0.06);
}

.group:hover .group-hover-bg-accent-soft {
  background-color: rgb(var(--color-accent-rgb) / 0.08);
}


/* ==========================================================================
   14. SVG / ICON COLOR
   - currentColor 기반 SVG 사용 권장
========================================================================== */

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}


/* ==========================================================================
   15. GRADIENTS
   - 기본 UI에서는 사용 최소화
   - Tailwind from-* / to-* 색상 금지
========================================================================== */

.bg-brand-gradient {
  background:
    linear-gradient(
      135deg,
      rgb(var(--color-primary-rgb)),
      rgb(var(--color-accent-rgb))
    );
}

.bg-primary-gradient {
  background:
    linear-gradient(
      135deg,
      rgb(var(--color-primary-rgb)),
      rgb(var(--color-primary-rgb) / 0.82)
    );
}

.bg-accent-gradient {
  background:
    linear-gradient(
      135deg,
      rgb(var(--color-accent-rgb)),
      rgb(var(--color-accent-rgb) / 0.78)
    );
}


/* ==========================================================================
   16. LINK DEFAULT
   - SNS / Commerce 특성상 기본 링크는 차콜
   - hover 시 opacity 변화
========================================================================== */

.link {
  color: rgb(var(--color-link-rgb));
}

.link:hover {
  color: rgb(var(--color-link-rgb) / 0.68);
}


/* ==========================================================================
   17. DISABLED
========================================================================== */

.is-disabled,
[aria-disabled="true"] {
  color: rgb(var(--color-text-disabled-rgb));
}


/* ==========================================================================
   18. CHECKED CONTROL STATES
========================================================================== */

.checked-bg-primary:checked {
  background-color: rgb(var(--color-primary-rgb));
}

.checked-border-primary:checked {
  border-color: rgb(var(--color-primary-rgb));
}

.checked-bg-accent:checked {
  background-color: rgb(var(--color-accent-rgb));
}

.checked-border-accent:checked {
  border-color: rgb(var(--color-accent-rgb));
}


/* Checkbox check mark */

.checkbox-check:checked {
  background-color: rgb(var(--color-primary-rgb));
  border-color: rgb(var(--color-primary-rgb));

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m5 10 3 3 7-7'/%3E%3C/svg%3E");

  background-position: center;
  background-repeat: no-repeat;
  background-size: 75%;
}


/* Radio inner dot */

.radio-dot:checked {
  background-color: rgb(var(--color-primary-rgb));
  border-color: rgb(var(--color-primary-rgb));

  background-image:
    radial-gradient(
      circle,
      rgb(var(--color-on-primary-rgb)) 0 30%,
      transparent 32%
    );
}

.shop-radio-card {
  position: relative;
}

.shop-radio-card:hover .shop-radio-card__card {
  border-color: rgb(var(--color-primary-rgb) / 0.36);
}

.shop-radio-card:focus-within .shop-radio-card__card {
  border-color: rgb(var(--color-primary-rgb));
  box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb) / 0.18);
}

.shop-radio-card__input:checked + .shop-radio-card__card {
  border-color: rgb(var(--color-primary-rgb));
  border-width: 2px;
}

.shop-radio-card__input:checked + .shop-radio-card__card .shop-radio-card__radio {
  border-color: rgb(var(--color-primary-rgb));
  background-color: rgb(var(--color-primary-rgb));
}

.shop-radio-card__input:checked + .shop-radio-card__card .shop-radio-card__dot {
  opacity: 1;
}

.divide-y > :not(:last-child),
.divide-x > :not(:last-child) {
  border-color: rgb(var(--color-border-divider-rgb));
}


/* Switch */

.peer:checked ~ .peer-checked-bg-primary {
  background-color: rgb(var(--color-primary-rgb));
}

.peer:checked ~ .peer-checked-bg-accent {
  background-color: rgb(var(--color-accent-rgb));
}