/* ============================================================
   LIVESYMPO — Design Tokens
   variables.css  |  v1.0  |  2026-05-02
   모든 페이지에서 @import 하여 사용
   ============================================================ */

:root {

  /* --------------------------------------------------
     Color — Brand
  -------------------------------------------------- */
  --ls-blue:          #3d5af1;
  --ls-blue-hover:    #2e4add;
  --ls-blue-active:   #2040c8;
  --ls-blue-light:    #eef1fe;
  --ls-blue-mid:      #c7d0fb;

  /* --------------------------------------------------
     Color — Hero Gradient (다크 헤더)
  -------------------------------------------------- */
  --ls-hero-start:    #111827;
  --ls-hero-mid:      #1e3a5f;
  --ls-hero-end:      #1a2d4a;

  /* --------------------------------------------------
     Color — System (Apple HIG 기반)
  -------------------------------------------------- */
  --ls-bg:            #f2f2f7;   /* iOS 시스템 배경 */
  --ls-bg-grouped:    #e5e5ea;   /* grouped 섹션 배경 */
  --ls-card:          #ffffff;   /* 카드/셀 배경 */
  --ls-card-alt:      #f9f9fb;   /* 보조 카드 */

  /* --------------------------------------------------
     Color — Label (텍스트)
  -------------------------------------------------- */
  --ls-label:         #000000;          /* Primary label */
  --ls-label-2:       rgba(60,60,67,.78);  /* Secondary */
  --ls-label-3:       rgba(60,60,67,.50);  /* Tertiary */
  --ls-label-4:       rgba(60,60,67,.26);  /* Quaternary */
  --ls-label-inv:     #ffffff;          /* 다크배경 위 텍스트 */
  --ls-label-inv-2:   rgba(255,255,255,.70);
  --ls-label-inv-3:   rgba(255,255,255,.45);

  /* --------------------------------------------------
     Color — Separator
  -------------------------------------------------- */
  --ls-sep:           rgba(60,60,67,.12);
  --ls-sep-strong:    rgba(60,60,67,.22);

  /* --------------------------------------------------
     Color — Status
  -------------------------------------------------- */
  --ls-red:           #ff3b30;
  --ls-red-light:     #fff1f0;
  --ls-orange:        #ff9500;
  --ls-orange-light:  #fff7ed;
  --ls-green:         #34c759;
  --ls-green-light:   #edfaf1;
  --ls-yellow:        #ffcc00;
  --ls-yellow-light:  #fffbeb;

  /* --------------------------------------------------
     Typography — Font Stack
  -------------------------------------------------- */
  --ls-font:          -apple-system, 'SF Pro Display', 'Helvetica Neue',
                      'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --ls-font-mono:     'SF Mono', 'Menlo', 'Consolas', monospace;

  /* --------------------------------------------------
     Typography — Size Scale
  -------------------------------------------------- */
  --ls-text-xs:       11px;   /* 캡션, 배지, 라벨 */
  --ls-text-sm:       13px;   /* 부제목, 메타 */
  --ls-text-md:       15px;   /* 리스트 셀 제목 (iOS 기본) */
  --ls-text-base:     17px;   /* 본문 */
  --ls-text-lg:       20px;   /* 섹션 제목 */
  --ls-text-xl:       24px;   /* 통계 숫자 */
  --ls-text-2xl:      28px;   /* 페이지 타이틀 */
  --ls-text-hero:     34px;   /* 히어로 대제목 */

  /* --------------------------------------------------
     Typography — Weight
  -------------------------------------------------- */
  --ls-weight-regular:  400;
  --ls-weight-medium:   500;
  --ls-weight-semibold: 600;
  --ls-weight-bold:     700;

  /* --------------------------------------------------
     Typography — Line Height
  -------------------------------------------------- */
  --ls-lh-tight:   1.2;
  --ls-lh-normal:  1.5;
  --ls-lh-relaxed: 1.7;

  /* --------------------------------------------------
     Typography — Letter Spacing
  -------------------------------------------------- */
  --ls-track-tight:  -0.4px;  /* 대제목 */
  --ls-track-normal: -0.2px;  /* 본문 */
  --ls-track-wide:    0.04em; /* 캡션 라벨 (UPPERCASE) */
  --ls-track-wider:   0.08em; /* 배지 */

  /* --------------------------------------------------
     Spacing
  -------------------------------------------------- */
  --ls-space-1:   4px;
  --ls-space-2:   8px;
  --ls-space-3:   12px;
  --ls-space-4:   16px;
  --ls-space-5:   20px;
  --ls-space-6:   24px;
  --ls-space-8:   32px;
  --ls-space-10:  40px;

  /* --------------------------------------------------
     Border Radius
  -------------------------------------------------- */
  --ls-radius-xs:   6px;   /* 뱃지, 칩 내부 */
  --ls-radius-sm:   10px;  /* 버튼, 인풋 */
  --ls-radius-md:   14px;  /* 카드 (iOS 표준) */
  --ls-radius-lg:   20px;  /* 모달, 큰 카드 */
  --ls-radius-full: 9999px; /* 알약형 */

  /* --------------------------------------------------
     Shadow
  -------------------------------------------------- */
  --ls-shadow-xs:   0 1px 3px rgba(0,0,0,.06);
  --ls-shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --ls-shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --ls-shadow-lg:   0 8px 32px rgba(0,0,0,.12);

  /* --------------------------------------------------
     Layout
  -------------------------------------------------- */
  --ls-max-width:   430px;   /* 모바일 참석자 화면 최대 폭 */
  --ls-max-width-cms: 1200px; /* CMS 관리자 화면 최대 폭 */
  --ls-page-px:     16px;    /* 페이지 좌우 패딩 */

  /* --------------------------------------------------
     Motion
  -------------------------------------------------- */
  --ls-ease:        cubic-bezier(.25,.46,.45,.94);  /* ease-out-quart */
  --ls-ease-spring: cubic-bezier(.34,1.56,.64,1);   /* spring */
  --ls-duration-fast:   150ms;
  --ls-duration-base:   250ms;
  --ls-duration-slow:   400ms;

  /* --------------------------------------------------
     Z-index
  -------------------------------------------------- */
  --ls-z-base:      1;
  --ls-z-dropdown:  100;
  --ls-z-sticky:    200;
  --ls-z-modal:     300;
  --ls-z-toast:     400;
}