/*
 * label.kr renewal design-system adapter
 *
 * Final design-system values should be connected here. Keep page and component
 * selectors in site-v5.css so a token update does not change markup or behavior.
 */

@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://img.label.kr/asset/fonts/spoqa/SpoqaHanSansNeo-Regular.woff2") format("woff2");
}

:root {
  /* Brand and semantic colors */
  --ds-color-brand-primary: var(--il-primary-500);
  /* 아래 -rgb 값은 CSS가 var()에서 RGB를 만들 수 없어 원본 hex의 숫자를 그대로 둔다. 원본 값이 바뀌면 함께 갱신한다. */
  --ds-color-brand-primary-rgb: 175, 46, 42; /* --il-primary-500 #AF2E2A */
  --ds-color-brand-hover: var(--il-primary-600);
  --ds-color-brand-active: var(--il-primary-700);
  --ds-color-brand-subtle: var(--il-primary-50);
  --ds-color-on-brand: var(--il-white);
  --ds-color-focus: var(--ds-color-brand-primary);
  /* Status colors are not aliases of the brand/action color. */
  --ds-color-status-danger: var(--il-danger-500);
  --ds-color-status-danger-rgb: 209, 36, 59; /* --il-danger-500 #D1243B */
  --ds-color-status-danger-hover: var(--il-danger-600);
  --ds-color-status-danger-active: var(--il-danger-700);
  --ds-color-on-danger: var(--il-white);
  /* 흰 글자를 올리는 solid 배경이므로 대비 4.5:1 이상인 600 단계를 사용한다. */
  --ds-color-status-success: var(--il-success-600);
  --ds-color-status-success-rgb: 38, 135, 42; /* --il-success-600 #26872A */
  --ds-color-status-warning: var(--il-warning-300);
  --ds-color-status-warning-rgb: 244, 184, 0; /* --il-warning-300 #F4B800 */
  --ds-color-status-info: var(--il-information-500);
  --ds-color-status-info-rgb: 36, 123, 189; /* --il-information-500 #247BBD */
  /* Promotional/notification badges must not imply an error. */
  --ds-color-badge-highlight: #b02a37;
  --ds-color-badge-highlight-text: #fff;
  --ds-color-badge-notification: var(--ds-color-brand-primary);
  --ds-color-badge-notification-text: var(--ds-color-on-brand);
  --ds-color-badge-notice: var(--ds-color-brand-subtle);
  --ds-color-badge-notice-text: var(--ds-color-brand-primary);
  --ds-color-badge-news: var(--ds-color-brand-primary);
  --ds-color-badge-news-text: var(--ds-color-on-brand);
  --ds-color-text-strong: var(--il-text-primary);
  --ds-color-text-default: var(--il-text-secondary);
  --ds-color-text-muted: var(--il-text-tertiary);
  --ds-color-border-default: var(--il-gray-200);
  --ds-color-surface-page: var(--il-gray-50);
  --ds-color-surface-default: var(--il-white);
  --ds-color-overlay: rgba(17, 17, 17, .45);

  /* Typography */
  --ds-font-family-sans: var(--il-font-family);
  --ds-font-size-caption: var(--il-text-size1);
  --ds-font-size-meta: var(--il-text-size2);
  --ds-font-size-body: var(--il-text-size3);
  --ds-font-size-title: var(--il-text-size4);
  --ds-font-size-title-lg: var(--il-text-size5);
  --ds-font-size-heading: var(--il-text-size6);
  --ds-font-size-heading-lg: var(--il-text-size7);
  --ds-font-size-display: var(--il-text-size8);
  --ds-font-size-hero: var(--il-text-size9);
  --ds-font-weight-light: 300;
  --ds-font-weight-regular: var(--il-fw-regular);
  --ds-font-weight-medium: var(--il-fw-medium);
  --ds-font-weight-semibold: var(--il-fw-semibold);
  --ds-font-weight-bold: var(--il-fw-bold);
  --ds-font-weight-extrabold: 800;
  --ds-font-weight-black: 900;
  --ds-line-height-body: var(--il-lh-normal-plus);

  /* Shape, elevation and focus */
  --ds-radius-sm: var(--il-r-md);
  --ds-radius-md: var(--il-r-lg);
  --ds-radius-lg: var(--il-r-xl);
  --ds-shadow-sm: 0 6px 18px rgba(15, 23, 42, .10);
  --ds-shadow-md: 0 14px 36px rgba(15, 23, 42, .14);
  --ds-focus-ring: 0 0 0 .2rem rgba(var(--ds-color-brand-primary-rgb), .25);
  --ds-focus-ring-dark: 0 0 0 .2rem rgba(17, 17, 17, .18);
  --ds-content-max-width: 1280px;

  /* Compatibility aliases. Existing V5 components consume these names. */
  --brand-primary: var(--ds-color-brand-primary);
  --brand-hover: var(--ds-color-brand-hover);
  --brand-light: var(--ds-color-brand-subtle);
  --brand-dark: var(--ds-color-text-strong);
  --brand-slate: var(--ds-color-text-default);
  --brand-muted: var(--ds-color-text-muted);
  --brand-border: var(--ds-color-border-default);
  --brand-bg: var(--ds-color-surface-page);
}

body.label-v5 {
  --bs-primary: var(--ds-color-brand-primary);
  --bs-primary-rgb: var(--ds-color-brand-primary-rgb);
  --bs-primary-text-emphasis: var(--ds-color-brand-hover);
  --bs-primary-bg-subtle: var(--ds-color-brand-subtle);
  --bs-primary-border-subtle: var(--ds-color-brand-primary);
  --bs-danger: var(--ds-color-status-danger);
  --bs-danger-rgb: var(--ds-color-status-danger-rgb);
  --bs-success: var(--ds-color-status-success);
  --bs-success-rgb: var(--ds-color-status-success-rgb);
  --bs-warning: var(--ds-color-status-warning);
  --bs-warning-rgb: var(--ds-color-status-warning-rgb);
  --bs-info: var(--ds-color-status-info);
  --bs-info-rgb: var(--ds-color-status-info-rgb);
  --bs-body-font-family: var(--ds-font-family-sans);
  --bs-body-color: var(--ds-color-text-default);
  --bs-body-bg: var(--ds-color-surface-page);
  --bs-border-color: var(--ds-color-border-default);
  /* Bootstrap 보조 글자색(text-secondary 등)을 흰 바탕·연회색 바탕에서 4.5:1 이상이 되게 진하게 한다. */
  --bs-secondary: #5a626a;
  --bs-secondary-rgb: 90, 98, 106;
  --bs-secondary-color: #5a626a;
  --bs-link-color: var(--ds-color-brand-primary);
  --bs-link-hover-color: var(--ds-color-brand-hover);
  /* Bootstrap 5.3의 a 태그는 -rgb 변수를 읽으므로 같은 색을 함께 지정한다(기본 파란 링크 방지). */
  --bs-link-color-rgb: var(--ds-color-brand-primary-rgb);
  --bs-link-hover-color-rgb: 142, 36, 33; /* --il-primary-600 #8E2421 */
  --bs-focus-ring-color: rgba(var(--ds-color-brand-primary-rgb), .25);
}