/* ==========================================================================
   XERKONIX Weave · Design Tokens v1.3
   이 파일이 토큰의 원본이며, HTML 카탈로그는 여기를 읽어 렌더링합니다.
   ========================================================================== */

:root {
  /* Fonts */
  --font-sans: 'IBM Plex Sans KR', 'IBM Plex Sans', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Surfaces / Text */
  --canvas: #f5f5f5;
  --surface: #ffffff;
  --surface-soft: #f2efe9;
  --surface-deep: #ebe6dd;

  --text: #2d2d2d;
  --text-body: #6f6b63;
  --text-soft: #9d9990;
  --text-faint: #c8c5bf;

  /* Identity (Brand Gold) */
  --color-identity: #c0a062;
  --color-identity-deep: #a88844;
  --color-identity-soft: #d4bc8a;
  --color-identity-wash: rgba(192, 160, 98, 0.12);

  /* Action (Primary CTA) · v1.3에서 골드 대체 */
  --color-action: #3b434f;
  --color-action-deep: #2f3742;
  --color-action-soft: #e7ebf0;
  --color-action-wash: rgba(59, 67, 79, 0.14);
  --color-action-text: #ffffff;

  /* Accent / Support */
  --color-accent: #c05a2a;
  --color-accent-deep: #9f461e;
  --color-accent-soft: #f3dfd6;
  --color-accent-wash: rgba(192, 90, 42, 0.14);

  --color-support: #8a9e3a;
  --color-support-deep: #6f8128;
  --color-support-soft: #e6edc9;
  --color-support-wash: rgba(138, 158, 58, 0.16);

  /* Signal/Status */
  --color-signal: #b84040;
  --color-signal-wash: rgba(184, 64, 64, 0.14);
  --color-success: #5b8c73;
  --color-warning: #f0a43a;
  --color-warning-deep: #a56700;
  --color-warning-wash: rgba(240, 164, 58, 0.18);
  --color-error: #b84040;
  --color-info: #6e7fa3;

  /* Motion */
  --motion-fast: 0.16s;
  --motion-base: 2.5s;
  --motion-slow: 3.5s;

  --wave-speed: var(--motion-base);
  --wave-speed-slow: var(--motion-slow);
  --wave-amp: 12px;
  --wave-stroke: 2px;

  /* Borders / Radius / Shadows */
  --border-soft: rgba(45, 45, 45, 0.08);
  --border-mid: rgba(45, 45, 45, 0.16);
  --border-strong: rgba(45, 45, 45, 0.24);

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-full: 999px;

  --shadow-sm: 0 1px 3px rgba(20, 20, 20, 0.05), 0 0 0 1px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 10px 26px rgba(20, 20, 20, 0.08), 0 0 0 1px rgba(20, 20, 20, 0.05);
  --shadow-lg: 0 18px 48px rgba(20, 20, 20, 0.14), 0 0 0 1px rgba(20, 20, 20, 0.08);

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --spring: cubic-bezier(0.34, 1.35, 0.64, 1);

  --grid-max: 1400px;
  --sidebar-w: 220px;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */
html[data-theme='dark'] {
  --canvas: #1d1d1d;
  --surface: #262626;
  --surface-soft: #2c2a27;
  --surface-deep: #34312d;

  --text: #f5f5f5;
  --text-body: #cdc9be;
  --text-soft: #a8a399;
  --text-faint: #858076;

  --color-identity: #d4bc8a;
  --color-identity-deep: #c0a062;
  --color-identity-soft: #e2cb9e;
  --color-identity-wash: rgba(212, 188, 138, 0.2);

  --color-action: #c2cad5;
  --color-action-deep: #d0d7e1;
  --color-action-soft: rgba(194, 202, 213, 0.18);
  --color-action-wash: rgba(194, 202, 213, 0.18);
  --color-action-text: #18202a;

  --color-accent: #d8794d;
  --color-accent-deep: #eba07c;
  --color-accent-soft: rgba(216, 121, 77, 0.18);
  --color-accent-wash: rgba(216, 121, 77, 0.2);

  --color-support: #a3b857;
  --color-support-deep: #c0d476;
  --color-support-soft: rgba(163, 184, 87, 0.18);
  --color-support-wash: rgba(163, 184, 87, 0.2);

  --color-signal: #d56767;
  --color-signal-wash: rgba(213, 103, 103, 0.2);
  --color-success: #7ea48f;
  --color-warning: #ffc457;
  --color-warning-deep: #ffd27b;
  --color-warning-wash: rgba(255, 196, 87, 0.24);
  --color-error: #d56767;
  --color-info: #8ca0c8;

  --border-soft: rgba(245, 245, 245, 0.1);
  --border-mid: rgba(245, 245, 245, 0.18);
  --border-strong: rgba(245, 245, 245, 0.32);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(255, 255, 255, 0.09);
}