@layer base.theme {
  /* 토큰을 어디에 둘지, 반응형·겹침 순서·고정 요소를 어떻게 쓸지는 rule/css-guide.md가
     정한다. 아래 주석은 각 값이 왜 그 값인지만 담는다(규약은 저쪽, 근거는 여기). */

  /* 고객 공통(base) 디자인 토큰 — 무난한 중립 기본값.
     특정 브랜드(옛 노랑)는 사이트/대시보드 토큰으로 분리됨(US-026). 변수명은 고정,
     값만 중립. 본격 base 디자인은 이후 별도. */
  :root {
    /* ── 색상 ── */
    --color-primary: #2563eb;
    /* primary를 글자로 쓸 때 전용(color: 속성). 채움과 글자는 배경이 달라 같은 값이
       한쪽에서 AA 대비를 잃으므로 짝을 나눈다(EN-049 조각 5, rule/css-guide.md 1절).
       base는 흰 배경(#ffffff)·연회색(#f9fafb) 위라 primary가 이미 5.17:1·4.95:1로
       통과하므로 값이 같다 — 짝을 만드는 것은 base가 부족해서가 아니라, base CSS를
       함께 읽는 사이트가 자기 배경에 맞는 값으로 덮을 자리를 두기 위해서다.
       배경이 밝은 유채색인 사이트는 이 토큰을 반드시 덮는다(덮지 않으면 사이트의
       채움 색이 그대로 글자가 되어 미달이 난다). */
    --color-primary-text: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #eff6ff;
    --color-accent: #1f2937;
    --color-accent-light: #374151;

    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-text-on-primary: #ffffff;
    --color-text-inverse: #ffffff;

    --color-bg: #ffffff;
    --color-bg-subtle: #f9fafb;
    --color-bg-dark: #1f2937;
    --color-border: #e5e7eb;
    --color-border-focus: #2563eb;

    --color-error: #dc2626;
    --color-success: #16a34a;

    /* ── 타이포그래피 ── */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* rem 표기 — px로 지정한 글꼴은 브라우저의 기본 글꼴 크기 설정에 반응하지 않아,
       그 설정에 의존하는 사용자에게 확대가 먹지 않는다. 루트 글꼴은 건드리지 않으므로
       기본 설정(16px)에서는 계산값이 아래 주석의 px와 동일하다 — 표기만 바뀐다. */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-2xl: 2rem;      /* 32px */
    --font-size-3xl: 2.5rem;    /* 40px */
    /* 폼 컨트롤 전용 — iOS Safari는 포커스된 입력의 글꼴이 16px 미만이면 화면을 자동
       확대한다. 사이트가 본문 밀도를 낮춰도 이 값만은 1rem 아래로 내리지 않는다. */
    --font-size-control: 1rem;  /* 16px */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --line-height-tight: 1.3;
    --line-height-normal: 1.6;

    /* ── 간격 ── rem 표기: 글자가 커지면 여백도 함께 커져야 읽힌다.
       모서리·그림자·테두리 두께는 글자 크기와 무관한 표면 속성이라 px로 남긴다. */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ── 모서리 ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* ── 테두리 두께 ── */
    --border-width: 1px;
    --border-width-control: 1.5px;

    /* ── 도형 치수 ── px 유지: 원·타일·점 등 너비=높이인 도형의 크기다. 글자 크기와
       무관한 기하 치수라 모서리·그림자처럼 px로 둔다. 도형이 갈 축이 없어 원 지름이
       리터럴로 흩어지거나 간격 스케일에 잘못 태워지던 것을 전용 축으로 모은다(EN-042). */
    --size-4: 4px;
    --size-8: 8px;
    --size-16: 16px;
    --size-20: 20px;
    --size-24: 24px;
    --size-36: 36px;
    --size-40: 40px;
    --size-48: 48px;
    --size-52: 52px;
    --size-60: 60px;
    --size-92: 92px;

    /* ── 그림자 ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.25);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.2);

    /* ── 전환 ── */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* ── z-index 스케일 ── 100 단위로 벌려 사이에 새 층을 끼울 여지를 남긴다(EN-049).
       색·폰트와 달리 "모달이 토스트보다 위"는 사이트를 가리지 않는 플랫폼 공통 구조라
       base에 둔다 — 대시보드 CSS(src/presentation/static/css/ 이하)의 z-index는 이번
       범위가 아니고, 다음에 손댈 때 이 스케일로 옮긴다.
       토큰화 경계: 부모 밖으로 나가 다른 컴포넌트와 겹칠 수 있는 요소만 토큰을 쓴다
       (드롭다운처럼 absolute라도 대상). 한 컴포넌트 안에서 배경 위에 본문을 얹는
       정도(카드 배경 위 본문 등)는 여기 태우지 않고 0·1 지역 값으로 남긴다.
       스케일 밖 리터럴을 쓸 일이 생기면 반드시 근거 주석을 단다 — "주석 없는
       리터럴 0건"을 기계적 검사선으로 삼는다. */
    --z-dropdown: 50;   /* 부모 밖으로 펼쳐지는 팝오버(공유 드롭다운 등) */
    --z-sticky: 100;    /* 스크롤에 붙어 상주하는 헤더·고정 구매 바 */
    --z-overlay: 200;   /* 페이지 위에 항상 떠 있는 런처류 — 문의 FAB, 채팅 런처 */
    --z-toast: 300;     /* 일시 알림. 현재 모달 열림 중 토스트가 뜨는 경로가 없어
                            모달보다 아래 순서를 유지 — 필요해지면 뒤집는다 */
    --z-modal: 400;     /* 화면을 덮는 모달·딤·채팅 패널. 본체를 딤 위에 얹을 때는
                            calc(var(--z-modal) + 1)로 한 칸만 올린다(별도 층 아님) */

    /* ── 하단 정박 ── 화면 바닥을 점유하는 고정 요소의 높이(EN-049).
       바닥에 사는 요소가 여럿이라(고정 구매 바·문의 FAB·채팅 런처) 서로 가리지 않으려면
       위치를 조율해야 하는데, 종전에는 각 요소의 최종 좌표를 페이지가 손으로 계산해
       박아 뒀다(상품 페이지: 바 74 → kakao 86 → mail 144). 그러면 요소가 하나 늘 때마다
       모든 좌표를 다시 계산해야 하고, 실제로 어긋나 있었다 — FAB 사이 간격이 기본
       페이지 12px, 상품 페이지 6px로 갈렸다.
       선언 단위를 "어디에 놓이는가"에서 "무엇을 점유하는가"로 바꾼다. 바닥을 차지하는
       요소가 이 값만 올리면 나머지는 그 위에 스스로 쌓인다.
       safe-area는 각 요소가 env()로 따로 더한다 — 이 값은 순수한 점유 높이다. */
    --anchor-bottom: 0px;

    /* 떠 있는 진입점(FAB)이 화면 바닥에서 띄우는 최소 거리. 페이지마다 바닥 사정이
       달라도(고정 바가 있는 페이지·없는 페이지) 진입점은 같은 자리에 있어야 찾기 쉽다.
       그래서 위치를 max()의 하한으로 두고, 바닥 점유분이 이보다 클 때만 더 올라가게 한다
       — 평상시 전 페이지가 같은 높이, 바가 예상보다 커지면 그 페이지만 비켜난다.
       rem으로 두는 이유는 간격 토큰과 같다: 글자가 커지면 여백도 함께 커져야 한다. */
    --fab-inset-bottom: 6rem;   /* 96px */

    /* FAB이 오른쪽에서 차지하는 폭(원 지름 --size-52 + right 오프셋 20px + 터치 여유).
       좌표계에 세로 정박(위 --anchor-bottom·--fab-inset-bottom)만 있고 가로 정박이
       없어 우측 끝까지 붙는 콘텐츠가 FAB과 겹치는 사고가 반복됐다(EN-051 3번, EN-049
       세로 정박 변수 미정의와 같은 종류). 같은 "점유량" 모델을 가로에도 적용한다. */
    --fab-inset-right: 4.5rem;  /* 72px */

    /* ── 폭 ── 값을 통일하지 않고 이름만 부여한다(EN-049) — 서로 다른 컴포넌트가
       우연히 같은 숫자를 쓰더라도 개념이 다르면 각자의 값을 유지한 채 별도 토큰으로 둔다.
       한 곳에서만 쓰는 치수(카드 이미지 폭 등)는 이름이 정보를 더하지 않아 토큰화하지 않고
       그 자리에 리터럴로 남겨 둔다. */
    --width-wide: 1080px;    /* 사이트 크롬·카탈로그·내 공간처럼 넓은 셸의 상한 */
    --width-content: 720px;  /* 상품 상세·주문·체크아웃처럼 한 흐름을 담는 본문 상한 */
    --width-compact: 420px;  /* 인증·프로필처럼 짧은 단일 열 폼 카드의 상한 */
    --measure-text: 640px;   /* 글 가독 폭(measure) — 본문 문단이 한 줄에 담는 폭.
                                 --width-form과 값이 같은 640이지만 우연이다 — 문단
                                 가독성 기준과 카드 폭 기준은 서로 다른 결정이라 묶지 않는다 */
    --width-form: 640px;     /* 복합 폼·주문 요약 카드 폭 — compact 폼과 다른 역할.
                                 --measure-text와 값만 같을 뿐 별개 개념(위 참조) */
  }
}