/* ==========================================================================
   Design Tokens  ·  Brand #EC6A4E  ·  Light theme (white background)
   --------------------------------------------------------------------------
   Naming (BEM):  --{block}__{element}--{modifier}
     block     = 토큰 종류        (color, font, space, radius, shadow ...)
     element   = 대상/역할        (brand, text, bg, border, action ...)
     modifier  = 단계/상태/변형   (500, hover, subtle, primary ...)
   Layers:
     1. Primitive  : 원시 값 (팔레트, 스케일)
     2. Semantic   : 용도별 별칭. 컴포넌트에서는 이 레이어만 사용
   Contrast (vs #FFFFFF):  ★ = 텍스트 AA(4.5:1) 통과,  ◆ = UI/큰 글씨(3:1) 통과
   ========================================================================== */

@font-face {
  font-family: "Phetsarath";
  src: url("./public/fonts/Phetsarath/Phetsarath-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Phetsarath";
  src: url("./public/fonts/Phetsarath/Phetsarath-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ======================================================================
     1. PRIMITIVE · COLOR
     ====================================================================== */

  /* --- Brand (500 = #EC6A4E) --------------------------------------- */
  --color__brand--50:  #FDF3F1;
  --color__brand--100: #FCE4DF;
  --color__brand--200: #F8CBC1;
  --color__brand--300: #F5AD9E;
  --color__brand--400: #F08B75;
  --color__brand--500: #EC6A4E; /* 3.12 ◆  브랜드 원색 */
  --color__brand--600: #C8431F; /* 4.91 ★  흰 글씨 버튼 / 링크 */
  --color__brand--700: #9C3418; /* 7.20 ★ */
  --color__brand--800: #742712; /* 10.29 ★ */
  --color__brand--900: #4C190C; /* 14.47 ★ */

  /* --- Neutral (따뜻한 회색, 브랜드와 톤 맞춤) ---------------------- */
  --color__neutral--0:   #FFFFFF;
  --color__neutral--50:  #FAFAFA;
  --color__neutral--100: #F4F3F3;
  --color__neutral--200: #E9E8E7;
  --color__neutral--300: #D9D5D4;
  --color__neutral--400: #B2ACA9; /* 2.24 */
  --color__neutral--500: #857B77; /* 4.12 ◆  입력창 테두리 */
  --color__neutral--600: #726965; /* 5.35 ★ */
  --color__neutral--700: #514B48; /* 8.57 ★ */
  --color__neutral--800: #363230; /* 12.68 ★ */
  --color__neutral--900: #1E1B1A; /* 17.12 ★  본문 잉크 */

  /* --- Status (subtle = 배경, default = 아이콘/솔리드, strong = 텍스트) */
  --color__success--subtle:  #E9F6EE;
  --color__success--default: #177A41; /* 5.39 ★ */
  --color__success--strong:  #0F5F31; /* 7.77 ★ */

  --color__warning--subtle:  #FEF3E2;
  --color__warning--default: #B45309; /* 5.02 ★ */
  --color__warning--strong:  #8A3F07; /* 7.51 ★ */

  --color__error--subtle:    #FDEDEB;
  --color__error--default:   #D92D20; /* 4.83 ★  브랜드보다 차갑고 진한 빨강 */
  --color__error--strong:    #B42318; /* 6.57 ★  subtle 배경 위 텍스트는 strong 사용 */

  --color__info--subtle:     #EAF1FE;
  --color__info--default:    #2563EB; /* 5.17 ★ */
  --color__info--strong:     #1D4ED8; /* 6.70 ★ */

  /* ======================================================================
     1-B. PRIMITIVE · COLOR ALPHA (불투명도 토큰)
     ====================================================================== */

  /* Ink (#1E1B1A) — 테두리, 구분선, 그림자, 오버레이 */
  --color__ink-alpha--4:  rgba(30, 27, 26, 0.04);
  --color__ink-alpha--8:  rgba(30, 27, 26, 0.08);
  --color__ink-alpha--12: rgba(30, 27, 26, 0.12);
  --color__ink-alpha--16: rgba(30, 27, 26, 0.16);
  --color__ink-alpha--24: rgba(30, 27, 26, 0.24);
  --color__ink-alpha--48: rgba(30, 27, 26, 0.48);
  --color__ink-alpha--64: rgba(30, 27, 26, 0.64); /* 흰 배경 위 5.15 ★ */

  /* Brand (#EC6A4E) — hover/pressed 틴트, 선택 배경, 포커스 글로우 */
  --color__brand-alpha--8:  rgba(236, 106, 78, 0.08);
  --color__brand-alpha--12: rgba(236, 106, 78, 0.12);
  --color__brand-alpha--16: rgba(236, 106, 78, 0.16);
  --color__brand-alpha--24: rgba(236, 106, 78, 0.24);
  --color__brand-alpha--40: rgba(236, 106, 78, 0.40);

  /* White — 이미지/어두운 배경 위 요소 */
  --color__white-alpha--16: rgba(255, 255, 255, 0.16);
  --color__white-alpha--48: rgba(255, 255, 255, 0.48);
  --color__white-alpha--80: rgba(255, 255, 255, 0.80);

  /* ======================================================================
     2. SEMANTIC · COLOR
     ====================================================================== */

  /* --- Background -------------------------------------------------- */
  --color__bg--default:       var(--color__neutral--0);   /* 페이지 기본 흰색 */
  --color__bg--subtle:        var(--color__neutral--50);  /* 섹션 구분 */
  --color__bg--muted:         var(--color__neutral--100); /* 칩, 비활성 영역 */
  --color__bg--brand:         var(--color__brand--500);   /* 브랜드 면 (글씨는 text--on-brand) */
  --color__bg--brand-subtle:  var(--color__brand--50);    /* 브랜드 톤 배너/하이라이트 */
  --color__bg--inverse:       var(--color__neutral--900);
  --color__bg--hover:         var(--color__ink-alpha--4);
  --color__bg--pressed:       var(--color__ink-alpha--8);
  --color__bg--selected:      var(--color__brand-alpha--8);
  --color__bg--scrim:         var(--color__ink-alpha--48); /* 모달 뒤 딤 */

  /* --- Text -------------------------------------------------------- */
  --color__text--primary:     var(--color__neutral--900); /* 17.12 ★ */
  --color__text--secondary:   var(--color__neutral--700); /* 8.57 ★ */
  --color__text--tertiary:    var(--color__neutral--600); /* 5.35 ★ */
  --color__text--disabled:    var(--color__neutral--400);
  --color__text--placeholder: var(--color__neutral--500);
  --color__text--brand:       var(--color__brand--600);   /* 4.91 ★ 링크/강조 텍스트 */
  --color__text--brand-strong:var(--color__brand--700);   /* brand-50 배경 위에서도 ★ */
  --color__text--inverse:     var(--color__neutral--0);
  --color__text--on-brand:    var(--color__neutral--900); /* #EC6A4E 위 글씨 5.49 ★ (흰색은 ✕) */
  --color__text--on-action:   var(--color__neutral--0);   /* #C8431F 위 흰 글씨 4.91 ★ */
  --color__text--success:     var(--color__success--default);
  --color__text--warning:     var(--color__warning--default);
  --color__text--error:       var(--color__error--default);
  --color__text--info:        var(--color__info--default);

  /* --- Border ------------------------------------------------------ */
  --color__border--subtle:    var(--color__ink-alpha--8);  /* 카드 내부 구분선 */
  --color__border--default:   var(--color__ink-alpha--16); /* 카드, 표 */
  --color__border--strong:    var(--color__neutral--500);  /* 입력창 (4.12 ◆) */
  --color__border--brand:     var(--color__brand--500);
  --color__border--focus:     var(--color__brand--500);    /* 3.12 ◆ */
  --color__border--error:     var(--color__error--default);

  /* --- Action (버튼/링크/인터랙션 primary, 흰 글씨용) ---------------- */
  --color__action--default:   var(--color__brand--600);
  --color__action--hover:     var(--color__brand--700);
  --color__action--pressed:   var(--color__brand--800);
  --color__action--disabled:  var(--color__neutral--200);
  --color__action--subtle:    var(--color__brand--50);     /* 보조(ghost/tonal) 버튼 배경 */
  --color__action--subtle-hover: var(--color__brand--100);

  /* --- Icon -------------------------------------------------------- */
  --color__icon--default:     var(--color__neutral--700);
  --color__icon--muted:       var(--color__neutral--500);
  --color__icon--brand:       var(--color__brand--500);
  --color__icon--disabled:    var(--color__neutral--400);

  /* --- Feedback (배경 위 텍스트는 strong 사용) ----------------------- */
  --color__feedback--success-bg: var(--color__success--subtle);
  --color__feedback--success-fg: var(--color__success--strong);
  --color__feedback--warning-bg: var(--color__warning--subtle);
  --color__feedback--warning-fg: var(--color__warning--strong);
  --color__feedback--error-bg:   var(--color__error--subtle);
  --color__feedback--error-fg:   var(--color__error--strong);
  --color__feedback--info-bg:    var(--color__info--subtle);
  --color__feedback--info-fg:    var(--color__info--strong);

  /* ======================================================================
     OPACITY (상태 불투명도)
     ====================================================================== */
  --opacity__state--hover:    0.08;
  --opacity__state--pressed:  0.12;
  --opacity__state--disabled: 0.4;
  --opacity__overlay--scrim:  0.48;

  /* ======================================================================
     FOCUS
     ====================================================================== */
  --focus__ring--color:  var(--color__border--focus);
  --focus__ring--width:  2px;
  --focus__ring--offset: 2px;
  --focus__ring--glow:   0 0 0 4px var(--color__brand-alpha--24);

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  --font__family--sans: "Pretendard Variable", Pretendard, -apple-system,
                        BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
                        "Segoe UI", Roboto, sans-serif;
  --font__family--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font__size--xs:   0.75rem;   /* 12 */
  --font__size--sm:   0.875rem;  /* 14 */
  --font__size--md:   1rem;      /* 16 */
  --font__size--lg:   1.125rem;  /* 18 */
  --font__size--xl:   1.25rem;   /* 20 */
  --font__size--2xl:  1.5rem;    /* 24 */
  --font__size--3xl:  1.875rem;  /* 30 */
  --font__size--4xl:  2.25rem;   /* 36 */
  --font__size--5xl:  3rem;      /* 48 */

  --font__weight--regular:  400;
  --font__weight--medium:   500;
  --font__weight--semibold: 600;
  --font__weight--bold:     700;

  --font__leading--tight:   1.25;  /* 제목 */
  --font__leading--normal:  1.5;   /* UI 텍스트 */
  --font__leading--relaxed: 1.7;   /* 한글 본문 */

  --font__tracking--tight:  -0.02em;
  --font__tracking--normal: 0;

  /* ======================================================================
     SPACE  (4px 기준, 숫자 = px ÷ 4)
     ====================================================================== */
  --space--0:  0;
  --space--1:  0.25rem;  /*  4 */
  --space--2:  0.5rem;   /*  8 */
  --space--3:  0.75rem;  /* 12 */
  --space--4:  1rem;     /* 16 */
  --space--5:  1.25rem;  /* 20 */
  --space--6:  1.5rem;   /* 24 */
  --space--8:  2rem;     /* 32 */
  --space--10: 2.5rem;   /* 40 */
  --space--12: 3rem;     /* 48 */
  --space--16: 4rem;     /* 64 */
  --space--20: 5rem;     /* 80 */

  /* ======================================================================
     SIZE
     ====================================================================== */
  --size__control--sm: 2rem;    /* 32 */
  --size__control--md: 2.5rem;  /* 40 */
  --size__control--lg: 3rem;    /* 48 */
  --size__icon--sm:    1rem;
  --size__icon--md:    1.25rem;
  --size__icon--lg:    1.5rem;

  /* ======================================================================
     BORDER · RADIUS
     ====================================================================== */
  --border__width--thin:  1px;
  --border__width--thick: 2px;

  --radius--xs:   0.25rem;  /*  4 */
  --radius--sm:   0.375rem; /*  6 */
  --radius--md:   0.5rem;   /*  8 */
  --radius--lg:   0.75rem;  /* 12 */
  --radius--xl:   1rem;     /* 16 */
  --radius--full: 9999px;

  /* ======================================================================
     SHADOW  (ink alpha 기반)
     ====================================================================== */
  --shadow--xs: 0 1px 2px rgba(30, 27, 26, 0.06);
  --shadow--sm: 0 1px 3px rgba(30, 27, 26, 0.10), 0 1px 2px rgba(30, 27, 26, 0.06);
  --shadow--md: 0 4px 8px -2px rgba(30, 27, 26, 0.10), 0 2px 4px -2px rgba(30, 27, 26, 0.06);
  --shadow--lg: 0 12px 16px -4px rgba(30, 27, 26, 0.10), 0 4px 6px -2px rgba(30, 27, 26, 0.05);
  --shadow--xl: 0 24px 48px -12px rgba(30, 27, 26, 0.18);

  /* ======================================================================
     MOTION
     ====================================================================== */
  --motion__duration--fast: 120ms;
  --motion__duration--base: 200ms;
  --motion__duration--slow: 320ms;
  --motion__easing--standard:   cubic-bezier(0.2, 0, 0, 1);
  --motion__easing--decelerate: cubic-bezier(0, 0, 0, 1);
  --motion__easing--accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* ======================================================================
     Z-INDEX
     ====================================================================== */
  --z-index__layer--base:     0;
  --z-index__layer--dropdown: 1000;
  --z-index__layer--sticky:   1100;
  --z-index__layer--overlay:  1200;
  --z-index__layer--modal:    1300;
  --z-index__layer--toast:    1400;
}

/* i18n.js가 html lang="lo"로 바꾸면 sans 전체가 Phetsarath로 전환된다. */
html[lang="lo"] {
  --font__family--sans: "Phetsarath", "Pretendard Variable", Pretendard,
                        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                        sans-serif;
}

/* ==========================================================================
   사용 예시 (BEM 클래스 + 토큰)
   ========================================================================== */

.button {
  height: var(--size__control--md);
  padding: 0 var(--space--4);
  border: 0;
  border-radius: var(--radius--md);
  font: var(--font__weight--semibold) var(--font__size--sm) / 1 var(--font__family--sans);
  transition: background var(--motion__duration--fast) var(--motion__easing--standard);
  cursor: pointer;
}

/* 흰 글씨 primary — #C8431F */
.button--primary {
  background: var(--color__action--default);
  color: var(--color__text--on-action);
}
.button--primary:hover    { background: var(--color__action--hover); }
.button--primary:active   { background: var(--color__action--pressed); }

/* 브랜드 원색 #EC6A4E 그대로 쓰는 버튼 — 글씨는 어두운 색 */
.button--brand {
  background: var(--color__bg--brand);
  color: var(--color__text--on-brand);
}

.button--secondary {
  background: var(--color__action--subtle);
  color: var(--color__text--brand);
}
.button--secondary:hover { background: var(--color__action--subtle-hover); }

.button:disabled {
  background: var(--color__action--disabled);
  color: var(--color__text--disabled);
  cursor: not-allowed;
}

.button:focus-visible {
  outline: var(--focus__ring--width) solid var(--focus__ring--color);
  outline-offset: var(--focus__ring--offset);
}