/* =============================================
   tokens.css — 디자인 토큰
   비주얼을 바꾸고 싶으면 이 파일만 수정하세요.
   ============================================= */

:root {
  /* ===== 색상: 브랜드 ===== */
  --c-primary:      #1d9bf0;    /* 메인 파랑 (헤더, 링크, 매물좌석, 오늘) */
  --c-primary-light:#f0f8ff;    /* 선택된 셀 배경 */
  --c-primary-fade: rgba(29,155,240,0.25); /* 선택 그림자 */
  --c-primary-dark: #1a8cd8;    /* 버튼 active */

  /* ===== 색상: 시맨틱 ===== */
  --c-danger:       #e0245e;    /* 빨강 (일요일, 삭제, 수요라벨) */
  --c-warning:      #f4900c;    /* 주황 (수요좌석, 미확정, 로딩) */
  --c-success:      #16a34a;    /* 초록 (성공, 매물라벨, 파싱OK) */
  --c-accent:       #7c3aed;    /* 보라 (수요뱃지, 할인, 수정모드) */

  /* ===== 색상: 시간대 ===== */
  --c-day:          #b58900;    /* 낮 텍스트 */
  --c-day-bg:       #fff8e1;    /* 낮 배경 */
  --c-day-border:   #f0e0a0;    /* 낮 테두리 */
  --c-day-slot-bg:  #fffef5;    /* 낮 회차카드 배경 */
  --c-day-slot-bd:  #f4900c;    /* 낮 회차카드 왼쪽선 */
  --c-day-tag-bg:   #fff3cd;    /* 낮 태그 배경 */

  --c-night:        #4a6fa5;    /* 밤 텍스트 */
  --c-night-bg:     #e8f0fe;    /* 밤 배경 */
  --c-night-border: #c0d4f0;    /* 밤 테두리 */
  --c-night-slot-bg:#f5f8ff;    /* 밤 회차카드 배경 */
  --c-night-slot-bd:#4a6fa5;    /* 밤 회차카드 왼쪽선 */
  --c-night-tag-bg: #dce8f7;    /* 밤 태그 배경 */

  /* ===== 색상: 매물/수요 ===== */
  --c-item:         #1d9bf0;    /* 매물 좌석 색 */
  --c-item-bg:      #f0fdf4;    /* 매물 항목 배경 */
  --c-item-border:  #d1fae5;    /* 매물 항목 테두리 */
  --c-item-label:   #0f7a3f;    /* 매물 섹션 라벨 */

  --c-price:        #e67e00;    /* 수요 좌석 색 */
  --c-price-bg:     #fff8f0;    /* 수요 항목 배경 */
  --c-price-border: #fde0b0;    /* 수요 항목 테두리 */

  --c-unconf-bg:    #fff8e1;    /* 미확정 배경 */
  --c-unconf-border:#fbd38d;    /* 미확정 테두리 */

  /* ===== 색상: 텍스트 ===== */
  --c-text:         #333;       /* 기본 텍스트 */
  --c-text-muted:   #536471;    /* 보조 텍스트 */
  --c-text-light:   #888;       /* 연한 텍스트 */
  --c-text-faint:   #999;       /* 아주 연한 */
  --c-text-hint:    #ccc;       /* 힌트/비활성 */
  --c-text-disabled:#bbb;       /* 비활성 */

  /* ===== 색상: 배경/테두리 ===== */
  --c-bg:           #f7f9fa;    /* 페이지 배경 */
  --c-bg-card:      white;      /* 카드 배경 */
  --c-bg-inset:     #f9fafb;    /* 인셋 배경 (트윗 원문 등) */
  --c-border:       #e1e8ed;    /* 기본 테두리 */
  --c-border-light: #f0f0f0;    /* 연한 테두리 */
  --c-border-cell:  #eee;       /* 셀/행 테두리 */

  /* ===== 색상: 그리드 ===== */
  --c-grid-side:    #e0e8f0;    /* 사/오블 셀 */
  --c-grid-center:  #f0f0f0;    /* 중블 셀 */

  /* ===== 폰트 크기 ===== */
  --fs-title:       22px;       /* 날짜 상세 큰 글씨 */
  --fs-heading:     15px;       /* 헤더, 빈상태 제목 */
  --fs-subheading:  14px;       /* 설정 제목, 그리드 헤더 */
  --fs-body:        13px;       /* 본문, 캐스팅, 좌석 */
  --fs-secondary:   12px;       /* 항목행, 원문, 링크 */
  --fs-caption:     11px;       /* 섹션라벨, 시간태그, 유저 */
  --fs-small:       10px;       /* 탭라벨, 뱃지, 힌트 */
  --fs-mini:        8px;        /* 달력 미니뱃지, 그리드 열라벨 */
  --fs-micro:       5px;        /* 그리드 좌석번호 */

  /* ===== 폰트 굵기 ===== */
  --fw-normal:      400;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-heavy:       800;

  /* ===== 간격 ===== */
  --sp-xs:          4px;
  --sp-sm:          8px;
  --sp-md:          12px;
  --sp-lg:          16px;
  --sp-xl:          24px;

  /* ===== 모서리 ===== */
  --r-sm:           4px;        /* 태그, 뱃지 */
  --r-md:           6px;        /* 항목행, 인셋 */
  --r-lg:           8px;        /* 버튼, 입력, 카드 */
  --r-xl:           10px;       /* 큰 카드, 회차카드 */
  --r-full:         50%;        /* 원형 */
  --r-sheet:        16px;       /* 바텀시트 상단 */
}