/* Design tokens -- single source of truth.
   Page CSS (landing.css) references these variables only. */

:root {
    /* --- Color (core 5) --- */
    --bg: #FFFFFF;
    --fg: #111827;
    --muted: #5B6573;
    --border: #E5E7EB;
    --accent: #2563EB; /* workcheck 제품색(블루). 제품 main.css --accent 와 동일 */

    /* --- Color (landing extensions) --- */
    --surface: #F7F8FA;
    --surface-2: #EEF1F5;
    --section-alt: #F5F7FB; /* 섹션 교차 배경 (연한 블루그레이) */
    --muted-2: #9AA3B2;
    --border-2: #EFEFEF;
    --accent-h: #1D4ED8;
    --accent-soft: #EFF6FF;
    --warn: #B45309;
    --warn-soft: #FFF7ED;

    /* --- Font (single family for body/headings) --- */
    --font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;

    /* Monospace for numbers, code, step counters. Use sparingly. */
    --font-mono: 'JetBrains Mono', 'D2Coding', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;

    /* Legacy alias kept for compatibility (some inline styles use --font-family) */
    --font-family: var(--font);

    /* --- Weight (two only) --- */
    --fw-regular: 400;
    --fw-bold: 700;

    /* --- Typographic scale (8 steps) --- */
    --fs-display: 56px;
    --fs-h1: 40px;
    --fs-h2: 28px;
    --fs-h3: 20px;
    --fs-lead: 18px;
    --fs-body: 15px;
    --fs-caption: 13px;
    --fs-micro: 11px;

    /* Legacy aliases -- kept so existing page CSS keeps compiling.
       Do NOT use these in new code. Use role tokens above. */
    --fs-3xl: var(--fs-display);
    --fs-2xl: var(--fs-h1);
    --fs-xl: var(--fs-h2);
    --fs-lg: var(--fs-h3);
    --fs-md: var(--fs-lead);
    --fs-base: var(--fs-body);
    --fs-sm: var(--fs-caption);
    --fs-xs: var(--fs-caption);

    /* --- Spacing --- */
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 180px;
    --sp-10: 220px;
    --sp-gap-head: 96px;

    /* --- Radius --- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    /* --- Motion (단일 easing, 3단 duration) --- */
    --motion-fast: 150ms;   /* 호버·포커스·미세 인터랙션 */
    --motion-base: 220ms;   /* 기본 reveal·트랜지션 */
    --motion-slow: 360ms;   /* 큰 영역 전환·모달 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* Apple-style ease-out */
}