/* ========================================================================
   MAK.IT Design Tokens — D2 (2026-05-06) — Claude UI inspired palette
   Source of truth for colors, typography, spacing, radius, shadow, motion,
   breakpoints, and a11y baseline.

   Visual reference: Claude.ai chat UI (warm cream surface, dark warm sidebar,
   coral accent #c96442, generous whitespace, soft borders).

   Naming convention: --mk-{category}-{role}-{step}
   ======================================================================== */

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

@font-face {
  font-family: "PretendardFallback";
  src: local("Apple SD Gothic Neo"), local("Malgun Gothic"), local("Noto Sans KR");
  font-display: swap;
  unicode-range: U+0020-007F, U+AC00-D7AF, U+1100-11FF, U+3130-318F;
}

/* =============================
   1. Light theme tokens (default) — Claude warm cream palette
   ============================= */
:root {
  color-scheme: light dark;

  /* ----- Brand (Claude coral) ----- */
  --mk-color-brand-50:   #fdf4ee;
  --mk-color-brand-100:  #fae5d3;
  --mk-color-brand-400:  #d98a6c;
  --mk-color-brand-500:  #c96442;   /* Primary action, link, focus ring */
  --mk-color-brand-600:  #b85838;
  --mk-color-brand-700:  #9c4a2f;

  /* ----- Surface (warm cream) ----- */
  --mk-color-bg:         #faf9f5;   /* main app bg */
  --mk-color-bg-subtle:  #f5f4ec;   /* cards, sections */
  --mk-color-bg-muted:   #efede2;   /* hover, message bubbles */
  --mk-color-bg-overlay: rgba(38, 38, 36, 0.55);

  /* ----- Sidebar (warm dark) ----- */
  --mk-color-sidebar-bg:           #262624;
  --mk-color-sidebar-bg-hover:     #30302e;
  --mk-color-sidebar-bg-active:    #3a3937;
  --mk-color-sidebar-border:       #3a3937;
  --mk-color-sidebar-text:         #c2c0b6;
  --mk-color-sidebar-text-strong:  #faf9f5;
  --mk-color-sidebar-text-muted:   #a8a69c;  /* AA on #262624 (~5.0:1) */

  /* ----- Text (warm dark) ----- */
  --mk-color-text:        #3d3929;
  --mk-color-text-muted:  #6b6857;
  --mk-color-text-faint:  #97948a;
  --mk-color-text-on-brand: #ffffff;
  --mk-color-text-link:    var(--mk-color-brand-500);
  --mk-color-text-link-hover: var(--mk-color-brand-600);

  /* ----- Border (warm beige) ----- */
  --mk-color-border:        #e8e6dc;
  --mk-color-border-strong: #d6d3c4;
  --mk-color-border-focus:  var(--mk-color-brand-500);

  /* ----- Status ----- */
  --mk-color-success-bg:   #d7efdc;  --mk-color-success-text:  #0f7134;
  --mk-color-success-500:  #10b981;
  --mk-color-success-400:  #6ee7b7;
  --mk-color-info-bg:      #e0e9f4;  --mk-color-info-text:     #1f4789;
  --mk-color-warn-bg:      #fef3c7;  --mk-color-warn-text:     #92400e;
  --mk-color-error-bg:     #fee2e2;  --mk-color-error-text:    #991b1b;
  --mk-color-error-500:    #ef4444;
  --mk-color-error-400:    #f87171;

  /* ----- Shadow (soft, warm) ----- */
  --mk-shadow-xs: 0 1px 2px 0 rgb(60 50 30 / 0.04);
  --mk-shadow-sm: 0 2px 6px -1px rgb(60 50 30 / 0.06);
  --mk-shadow-md: 0 8px 24px -8px rgb(60 50 30 / 0.10);
  --mk-shadow-lg: 0 24px 48px -12px rgb(60 50 30 / 0.18);
  --mk-shadow-focus: 0 0 0 3px rgb(201 100 66 / 0.25);

  /* =============================
     2. Typography
     ============================= */
  --mk-font-sans: "Pretendard Variable", Pretendard, "PretendardFallback",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mk-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
                  "Liberation Mono", Menlo, monospace;

  --mk-font-size-xs:   0.75rem;
  --mk-font-size-sm:   0.875rem;
  --mk-font-size-base: 1rem;
  --mk-font-size-lg:   1.125rem;
  --mk-font-size-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --mk-font-size-2xl:  clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --mk-font-size-3xl:  clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);
  --mk-font-size-4xl:  clamp(2.25rem, 1.8rem + 2vw, 3.5rem);

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

  --mk-line-height-tight:   1.2;
  --mk-line-height-snug:    1.375;
  --mk-line-height-normal:  1.6;
  --mk-line-height-relaxed: 1.75;

  --mk-letter-spacing-tight:  -0.02em;
  --mk-letter-spacing-normal: 0;
  --mk-letter-spacing-wide:   0.05em;

  /* =============================
     3. Spacing (4px base grid)
     ============================= */
  --mk-space-0:  0;
  --mk-space-1:  0.25rem;
  --mk-space-2:  0.5rem;
  --mk-space-3:  0.75rem;
  --mk-space-4:  1rem;
  --mk-space-5:  1.25rem;
  --mk-space-6:  1.5rem;
  --mk-space-8:  2rem;
  --mk-space-10: 2.5rem;
  --mk-space-12: 3rem;
  --mk-space-16: 4rem;
  --mk-space-20: 5rem;
  --mk-space-24: 6rem;

  /* =============================
     4. Radius (Claude UI: more rounded)
     ============================= */
  --mk-radius-xs:   6px;
  --mk-radius-sm:   8px;
  --mk-radius-md:  12px;
  --mk-radius-lg:  16px;
  --mk-radius-xl:  24px;
  --mk-radius-pill: 9999px;

  /* =============================
     5. Motion / Animation tokens
     ============================= */
  --mk-motion-duration-fast: 120ms;
  --mk-motion-duration-base: 200ms;
  --mk-motion-duration-slow: 320ms;
  --mk-motion-duration-slower: 480ms;

  --mk-motion-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --mk-motion-ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --mk-motion-ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);
  --mk-motion-ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);

  --mk-duration-fast:  var(--mk-motion-duration-fast);
  --mk-duration-base:  var(--mk-motion-duration-base);
  --mk-duration-slow:  var(--mk-motion-duration-slow);
  --mk-easing-standard:   var(--mk-motion-ease-standard);
  --mk-easing-emphasized: var(--mk-motion-ease-emphasized);

  /* =============================
     6. Z-index scale
     ============================= */
  --mk-z-dropdown: 1000;
  --mk-z-sticky:   1100;
  --mk-z-modal:    1300;
  --mk-z-toast:    1500;
  --mk-z-tooltip:  1700;

  /* =============================
     7. Layout containers
     ============================= */
  --mk-container-sm:  640px;
  --mk-container-md:  768px;
  --mk-container-lg: 1024px;
  --mk-container-xl: 1280px;
  --mk-container-2xl: 1440px;
}

/* =============================
   8. Dark theme (warm dark, Claude dark mode)
   ============================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mk-color-bg:         #1f1e1d;
    --mk-color-bg-subtle:  #262624;
    --mk-color-bg-muted:   #2d2c2a;
    --mk-color-bg-overlay: rgba(0, 0, 0, 0.7);
    --mk-color-text:        #f0eee6;
    --mk-color-text-muted:  #c2c0b6;
    --mk-color-text-faint:  #87867b;
    --mk-color-border:        #3a3937;
    --mk-color-border-strong: #4a4946;
    --mk-color-sidebar-bg:           #181816;
    --mk-color-sidebar-bg-hover:     #232220;
    --mk-color-sidebar-bg-active:    #2d2c2a;
    --mk-color-sidebar-border:       #2d2c2a;
    --mk-color-sidebar-text-muted:   #a8a69c;
    --mk-color-success-bg:  #052e16;  --mk-color-success-text: #86efac;
    --mk-color-info-bg:     #172554;  --mk-color-info-text:    #93c5fd;
    --mk-color-warn-bg:     #451a03;  --mk-color-warn-text:    #fcd34d;
    --mk-color-error-bg:    #450a0a;  --mk-color-error-text:   #fca5a5;
    --mk-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --mk-shadow-sm: 0 2px 6px -1px rgb(0 0 0 / 0.5);
    --mk-shadow-md: 0 10px 30px -8px rgb(0 0 0 / 0.6);
    --mk-shadow-lg: 0 25px 50px -12px rgb(0 0 0 / 0.7);
  }
}
[data-theme="dark"] {
  --mk-color-bg:         #1f1e1d;
  --mk-color-bg-subtle:  #262624;
  --mk-color-bg-muted:   #2d2c2a;
  --mk-color-bg-overlay: rgba(0, 0, 0, 0.7);
  --mk-color-text:        #f0eee6;
  --mk-color-text-muted:  #c2c0b6;
  --mk-color-text-faint:  #87867b;
  --mk-color-border:        #3a3937;
  --mk-color-border-strong: #4a4946;
  --mk-color-sidebar-bg:           #181816;
  --mk-color-sidebar-bg-hover:     #232220;
  --mk-color-sidebar-bg-active:    #2d2c2a;
  --mk-color-sidebar-border:       #2d2c2a;
  --mk-color-success-bg:  #052e16;  --mk-color-success-text: #86efac;
  --mk-color-info-bg:     #172554;  --mk-color-info-text:    #93c5fd;
  --mk-color-warn-bg:     #451a03;  --mk-color-warn-text:    #fcd34d;
  --mk-color-error-bg:    #450a0a;  --mk-color-error-text:   #fca5a5;
  --mk-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --mk-shadow-sm: 0 2px 6px -1px rgb(0 0 0 / 0.5);
  --mk-shadow-md: 0 10px 30px -8px rgb(0 0 0 / 0.6);
  --mk-shadow-lg: 0 25px 50px -12px rgb(0 0 0 / 0.7);
}

/* =============================
   9. A11y baseline
   ============================= */
:focus-visible {
  outline: 2px solid var(--mk-color-border-focus);
  outline-offset: 2px;
  border-radius: var(--mk-radius-xs);
}
*:focus:not(:focus-visible) { outline: none; }

.mk-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mk-skip-link {
  position: absolute; top: -40px; left: 8px;
  padding: var(--mk-space-2) var(--mk-space-4);
  background: var(--mk-color-text);
  color: var(--mk-color-text-on-brand);
  border-radius: var(--mk-radius-sm);
  font-weight: var(--mk-font-weight-semibold);
  text-decoration: none;
  z-index: var(--mk-z-tooltip);
  transition: top var(--mk-duration-fast) var(--mk-easing-standard);
}
.mk-skip-link:focus-visible { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* =============================
   10. Body defaults
   ============================= */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--mk-font-sans);
  font-size: var(--mk-font-size-base);
  line-height: var(--mk-line-height-normal);
  color: var(--mk-color-text);
  background: var(--mk-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}