/* ======================================================
 * Design Tokens — token.css
 * ====================================================== */

/* ======================================================
   기본 토큰 (라이트 모드)
   ====================================================== */
:root {
   /* ===============================
      * Layout
      * =============================== */
   --header-h: 70px;
   --container-max: 1800px;
   --container-padding: 2rem;
   --gutter: 24px;
   --container-content: calc(
      var(--container-max) - (var(--container-padding) * 2)
   );

   /* ===============================
      * Spacing
      * =============================== */
   --sp-4: 4px;
   --sp-8: 8px;
   --sp-12: 12px;
   --sp-16: 16px;
   --sp-24: 24px;
   --sp-32: 32px;
   --sp-48: 48px;

   /* ===============================
      * Font Size
      * =============================== */
   --fz-12: clamp(12px, 1.2vw, 13px);
   --fz-14: clamp(13px, 1.3vw, 14px);
   --fz-16: clamp(15px, 1.4vw, 16px);
   --fz-18: clamp(16px, 1.6vw, 18px);
   --fz-24: clamp(20px, 2.2vw, 24px);
   --fz-32: clamp(26px, 3vw, 32px);

   /* ===============================
      * Typography Alias
      * =============================== */
   --fz-body: var(--fz-16);
   --fz-caption: var(--fz-14);
   --fz-heading-sm: var(--fz-18);
   --fz-heading-md: var(--fz-24);
   --fz-heading-lg: var(--fz-32);

   /* ===============================
      * Line Height
      * =============================== */
   --lh-tight: 1.2;
   --lh-base: 1.5;
   --lh-loose: 1.7;

   /* ===============================
      * Font Weight
      * =============================== */
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;

   /* ===============================
      * Color — Light
      * =============================== */
   --c-text: #1c1c1c;
   --c-text-sub: #666666;
   --c-bg: #ffffff;
   --c-surface: #f7f7f7;
   --c-border: #e5e5e5;
   --c-primary: #006241;
   --c-primary-hover: #004f34;

   /* ===============================
      * Interaction
      * =============================== */
   --c-hover-bg: rgba(0, 0, 0, 0.04);
   --c-active-bg: rgba(0, 0, 0, 0.08);
   --c-disabled: #bdbdbd;
   --c-focus: #4d90fe;

   /* ===============================
      * Border / Radius
      * =============================== */
   --bw-thin: 1px;
   --bw-thick: 2px;
   --r-sm: 6px;
   --r-md: 12px;
   --r-lg: 20px;

   /* ===============================
      * Shadow
      * =============================== */
   --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);

   /* ===============================
      * Motion
      * =============================== */
   --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
   --dur-fast: 150ms;
   --dur-base: 300ms;
   --dur-slow: 600ms;

   /* ===============================
      * Z-Index
      * =============================== */
   --z-header: 100;
   --z-overlay: 900;
   --z-modal: 1000;
}

/* ======================================================
    명시적 다크 모드 (토글 최우선)
    ====================================================== */
[data-theme='dark'] {
   --c-text: #f1f1f1;
   --c-text-sub: #aaaaaa;
   --c-bg: #121212;
   --c-surface: #1e1e1e;
   --c-border: #2c2c2c;

   --c-primary: #1dbf73;
   --c-primary-hover: #17a864;

   --c-hover-bg: rgba(255, 255, 255, 0.06);
   --c-active-bg: rgba(255, 255, 255, 0.12);
   --c-disabled: #555555;
   --c-focus: #8ab4f8;

   --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
}