/**
 * Design Tokens — 프레임워크 전역 디자인 토큰
 *
 * 2계층 구조:
 *   1) Primitive — 원시 팔레트 (--color-blue-500 등)
 *      · 컴포넌트에서 직접 참조하지 말 것
 *   2) Semantic  — 의미 단위 (--color-primary, --color-text 등)
 *      · 컴포넌트 스타일은 이것만 참조
 *
 * 오버라이드 우선순위:
 *   tokens.css → block.css → skin/common.css → skin/front.css → 도메인 <style>
 */

/* ============================================================
 * 1) PRIMITIVE TOKENS
 * ============================================================ */
:root {
    /* 시스템 테마 대응 — 라이트 모드 강제 (스크롤바/폼 기본 스타일이 다크 OS 에서도 라이트) */
    color-scheme: light;

    /* Neutral (Zinc) — Admin common.css 와 공유 */
    --color-zinc-50:  #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #a1a1aa;
    --color-zinc-500: #71717a;
    --color-zinc-600: #52525b;
    --color-zinc-700: #3f3f46;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;

    /* Brand (Blue) — 현재 사용 중인 #2563eb (500) 기준 확장 */
    --color-blue-50:  #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #2563eb;
    --color-blue-600: #1d4ed8;
    --color-blue-700: #1e40af;
    --color-blue-800: #1e3a8a;
    --color-blue-900: #172554;

    /* Status palette */
    --color-green-500: #10b981;
    --color-amber-500: #f59e0b;
    --color-red-500:   #ef4444;
    --color-sky-500:   #0ea5e9;

    /* ============================================================
     * 2) SEMANTIC TOKENS
     * ============================================================ */

    /* Brand */
    --color-primary:        var(--color-blue-500);
    --color-primary-hover:  var(--color-blue-600);
    --color-primary-active: var(--color-blue-700);
    --color-primary-subtle: var(--color-blue-50);

    /* Text */
    --color-text:         var(--color-zinc-900);
    --color-text-muted:   var(--color-zinc-500);
    --color-text-subtle:  var(--color-zinc-400);
    --color-text-inverse: #ffffff;
    --color-text-link:    var(--color-primary);

    /* Background */
    --color-bg:         #ffffff;
    --color-bg-subtle:  var(--color-zinc-50);
    --color-bg-muted:   var(--color-zinc-100);
    --color-bg-inverse: var(--color-zinc-900);

    /* Border */
    --color-border:        var(--color-zinc-200);
    --color-border-subtle: var(--color-zinc-100);
    --color-border-strong: var(--color-zinc-300);

    /* Status */
    --color-success: var(--color-green-500);
    --color-warning: var(--color-amber-500);
    --color-danger:  var(--color-red-500);
    --color-info:    var(--color-sky-500);

    /* Dark variant — 푸터/다크 섹션용 인버스 surface
       Tailwind gray 계열로 별도 스케일 유지 (zinc 와 톤이 살짝 다름) */
    --color-surface-dark:           #111827;
    --color-text-on-dark:           #f1f5f9;
    --color-text-on-dark-muted:     #9ca3af;
    --color-text-on-dark-subtle:    #6b7280;
    --color-text-on-dark-disabled:  #4b5563;
    --color-border-on-dark:         rgba(255, 255, 255, 0.07);
    --color-bg-on-dark-subtle:      rgba(255, 255, 255, 0.06);

    /* ============================================================
     * Typography
     * ============================================================ */
    --font-sans:  'Plus Jakarta Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Noto Serif KR', Georgia, serif;
    --font-mono:  'JetBrains Mono', Consolas, Menlo, monospace;

    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.125rem;   /* 18px */
    --font-size-xl:   1.25rem;    /* 20px */
    --font-size-2xl:  1.5rem;     /* 24px */
    --font-size-3xl:  1.875rem;   /* 30px */
    --font-size-4xl:  2.25rem;    /* 36px */

    --line-height-tight:   1.25;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* ============================================================
     * Spacing — 4pt 기반
     * ============================================================ */
    --space-1:  0.25rem;  /*  4px */
    --space-2:  0.5rem;   /*  8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */

    /* ============================================================
     * Radius
     * ============================================================ */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    /* ============================================================
     * Shadow
     * ============================================================ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    /* ============================================================
     * Layout — 도메인별 <style> 에서 오버라이드 가능
     * ============================================================ */
    --site-max-width:      1280px;
    --content-max-width:   1024px;
    --header-height:       80px;
    --sidebar-left-width:  250px;
    --sidebar-right-width: 250px;

    /* ============================================================
     * z-index scale
     * ============================================================ */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-popover:  500;
    --z-toast:    600;

    /* ============================================================
     * Transition
     * ============================================================ */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}