/**
 * 톡대리 Design Tokens
 * Based on @openhow/ds-tokens — Kakao theme
 *
 * Usage: <link rel="stylesheet" href="/css/tokens.css">
 * 기존 변수명(--brown, --yellow 등)은 호환 alias로 유지.
 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ── Brand ── */
  --max-color-brand-primary: #3C1E1E;
  --max-color-brand-primary-hover: #4D2A2A;
  --max-color-brand-primary-pressed: #2D1616;
  --max-color-brand-secondary: #FFF8E7;
  --max-color-brand-secondary-hover: #FEE500;

  /* ── Surface & Background ── */
  --max-color-bg: #F7F7F5;
  --max-color-bg-elevated: #FFFFFF;
  --max-color-surface: #FCFBF9;
  --max-color-overlay: rgba(0, 0, 0, 0.4);

  /* ── Grayscale (warm yellow tint) ── */
  --max-color-gray-50: #FAF9F7;
  --max-color-gray-100: #F3F2EE;
  --max-color-gray-200: #E8E8E4;
  --max-color-gray-300: #D3D0CA;
  --max-color-gray-400: #B5B2AB;
  --max-color-gray-500: #8C8C8C;
  --max-color-gray-600: #706D67;
  --max-color-gray-700: #53514C;
  --max-color-gray-800: #373532;
  --max-color-gray-900: #1A1A1A;

  /* ── Semantic ── */
  --max-color-success: #22C55E;
  --max-color-warning: #F59E0B;
  --max-color-error: #EF4444;
  --max-color-info: #3B82F6;

  /* ── Accent ── */
  --max-color-accent-blue: #3B82F6;
  --max-color-accent-blue-weak: #EFF6FF;
  --max-color-accent-green: #15803D;
  --max-color-accent-green-weak: #DCFCE7;
  --max-color-accent-yellow: #A16207;
  --max-color-accent-yellow-weak: #FEE500;
  --max-color-accent-red: #DC2626;
  --max-color-accent-red-weak: #FEE2E2;
  --max-color-accent-orange: #EA580C;
  --max-color-accent-orange-weak: #FFF7ED;

  /* ── Typography ── */
  --max-font-sans: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --max-font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;

  --max-text-xs: 0.75rem;
  --max-text-sm: 0.875rem;
  --max-text-md: 1rem;
  --max-text-lg: 1.125rem;
  --max-text-xl: 1.25rem;
  --max-text-2xl: 1.5rem;
  --max-text-3xl: 1.75rem;
  --max-text-4xl: 2rem;
  --max-text-5xl: 2.5rem;

  /* ── Spacing ── */
  --max-space-1: 0.25rem;
  --max-space-2: 0.5rem;
  --max-space-3: 0.75rem;
  --max-space-4: 1rem;
  --max-space-5: 1.25rem;
  --max-space-6: 1.5rem;
  --max-space-8: 2rem;
  --max-space-10: 2.5rem;
  --max-space-12: 3rem;
  --max-space-16: 4rem;

  /* ── Border Radius ── */
  --max-radius-sm: 0.375rem;
  --max-radius-md: 0.5rem;
  --max-radius-lg: 0.75rem;
  --max-radius-xl: 1rem;
  --max-radius-2xl: 1.5rem;
  --max-radius-full: 9999px;

  /* ── Shadows ── */
  --max-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --max-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --max-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --max-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* ── Motion ── */
  --max-duration-instant: 100ms;
  --max-duration-fast: 200ms;
  --max-duration-normal: 300ms;
  --max-duration-slow: 500ms;
  --max-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --max-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --max-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index ── */
  --max-z-dropdown: 1000;
  --max-z-sticky: 1020;
  --max-z-modal: 1040;
  --max-z-popover: 1060;
  --max-z-tooltip: 1080;
  --max-z-toast: 1100;

  /* ═══════════════════════════════════════════
     Legacy Aliases (기존 코드 호환)
     점진적으로 --max-* 토큰으로 마이그레이션
     ═══════════════════════════════════════════ */
  --brown: var(--max-color-brand-primary);
  --brown-light: var(--max-color-brand-primary-hover);
  --yellow: var(--max-color-brand-secondary-hover);
  --bg: var(--max-color-bg);
  --bg-alt: var(--max-color-brand-secondary);
  --card: var(--max-color-bg-elevated);
  --border: var(--max-color-gray-200);
  --text: var(--max-color-gray-900);
  --text-sub: var(--max-color-gray-500);
  --green: var(--max-color-success);
  --red: var(--max-color-error);
  --blue: var(--max-color-info);
  --orange: var(--max-color-warning);
  --accent: var(--max-color-accent-orange);
  --shadow: var(--max-shadow-md);
  --shadow-lg: var(--max-shadow-xl);
  --radius: var(--max-radius-lg);
  --radius-sm: var(--max-radius-md);
}

body {
  font-family: var(--max-font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}