@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;400;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@3.3.0/css/SpoqaHanSansNeo.css");

/*
 * Conalog documentation theme
 * Source of truth: Conalog design-system / conalog/common
 * Latin, numbers, and symbols use Plus Jakarta Sans. Hangul falls through to
 * Spoqa Han Sans Neo per glyph. The remaining faces are failure fallbacks.
 * Keep this file declarative. Branding Settings in the UI are not persisted.
 */

:root {
  --font-latin: "Plus Jakarta Sans";
  --font-korean: "Spoqa Han Sans Neo";
  --font-sans:
    var(--font-latin), var(--font-korean), "Apple SD Gothic Neo",
    "Noto Sans KR", sans-serif;

  /* Conalog brand primitives. */
  --color-conalog-green-light: #b6efd5;
  --color-conalog-green: #4bc691;
  --color-conalog-green-dark: #08443b;
  --color-white: #ffffff;
  --color-black: #030712;
  --color-gray: #e5e7eb;

  --color-conalog-green-50: #e3fcf1;
  --color-conalog-green-100: #c6f7e2;
  --color-conalog-green-200: #b6efd5;
  --color-conalog-green-300: #8eddbb;
  --color-conalog-green-400: #4bc691;
  --color-conalog-green-500: #12b27d;
  --color-conalog-green-600: #168966;
  --color-conalog-green-700: #0f6d54;
  --color-conalog-green-800: #0b5144;
  --color-conalog-green-900: #08443b;
  --color-conalog-green-950: #022622;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #99a1af;
  --color-gray-500: #6a7282;
  --color-gray-600: #4a5565;
  --color-gray-700: #364153;
  --color-gray-800: #1e2939;
  --color-gray-900: #101828;
  --color-gray-950: #030712;

  /* Type scale. The 4xl/5xl display sizes remain available as tokens, but the
     documentation hierarchy intentionally stops below the homepage hero size. */
  --conalog-text-xs: 0.75rem;
  --conalog-text-sm: 0.875rem;
  --conalog-text-base: 1rem;
  --conalog-text-lg: 1.25rem;
  --conalog-text-xl: 1.5rem;
  --conalog-text-2xl: 1.75rem;
  --conalog-text-3xl: 2.25rem;
  --conalog-text-4xl: 3rem;
  --conalog-text-5xl: 4.5rem;
  --conalog-leading-tight: 1.2;
  --conalog-leading-snug: 1.25;
  --conalog-leading-normal: 1.4;
  --conalog-leading-loose: 1.5;
  --conalog-tracking-tighter: -0.01em;
  --conalog-tracking-tight: -0.008em;
  --conalog-tracking-normal: 0;

  /* Four-point spacing scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-13: 3.25rem;
  --space-14: 3.5rem;
  --space-15: 3.75rem;
  --space-16: 4rem;
  --space-17: 4.25rem;
  --space-18: 4.5rem;
  --space-19: 4.75rem;
  --space-20: 5rem;
  --space-21: 5.25rem;
  --space-22: 5.5rem;
  --space-23: 5.75rem;
  --space-24: 6rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --radius: var(--radius-md);

  --shadow-sm:
    rgb(0 0 0 / 10%) 0 0.0625rem 0.1875rem,
    rgb(0 0 0 / 10%) 0 0.0625rem 0.125rem -0.0625rem;
  --shadow-card: rgb(166 175 195 / 40%) 0 0.0625rem 0.1875rem;
  --shadow-md:
    rgb(0 0 0 / 10%) 0 0.25rem 0.375rem -0.0625rem,
    rgb(0 0 0 / 10%) 0 0.125rem 0.25rem -0.125rem;
  --shadow-none: none;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* LeafWiki semantic channels mapped to Conalog primitives. */
  --background: 0 0% 100%;
  --foreground: 224 71.429% 4.118%;
  --card: 0 0% 100%;
  --card-foreground: 224 71.429% 4.118%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 71.429% 4.118%;
  --primary: 154.146 51.899% 53.529%;
  --primary-foreground: 224 71.429% 4.118%;
  --secondary: 153.6 80.645% 93.922%;
  --secondary-foreground: 173.333 90% 7.843%;
  --muted: 220 14.286% 95.882%;
  --muted-foreground: 220 10.169% 46.275%;
  --accent: 220 14.286% 95.882%;
  --accent-foreground: 224 71.429% 4.118%;
  --border: 220 13.043% 90.98%;
  --input: 220 13.043% 90.98%;
  --ring: 164.043 75.806% 24.314%;

  --page-surface: 0 0% 100%;
  --brand: 164.043 75.806% 24.314%;
  --brand-dark: 171 78.947% 14.902%;
  --brand-light: 152.632 64.045% 82.549%;
  --surface: 210 20% 98.039%;
  --surface-alt: 220 14.286% 95.882%;
  --surface-border: 220 13.043% 90.98%;
  --interface-text: 215.556 31.034% 17.059%;
  --tree-node-hover: 220 14.286% 95.882%;
  --tooltip: 220 14.286% 95.882%;
  --tooltip-border: 216 12.195% 83.922%;
  --markdown-toolbar: 210 20% 98.039%;
  --markdown-toolbar-border: 220 13.043% 90.98%;
  --markdown-toolbar-text: 215.556 31.034% 17.059%;
  --headline-anchor-icon: 218.182 12.088% 64.314%;
  --headline-anchor-icon-hover: 154.146 51.899% 53.529%;
  --avatar-bg: 153.6 80.645% 93.922%;
  --avatar-foreground: 171 78.947% 14.902%;
  --scrollbar-thumb: 216 12.195% 83.922%;
  --scrollbar-thumb-hover: 218.182 12.088% 64.314%;
  --table-header-bg: 210 20% 98.039%;
  --success: 154.146 51.899% 53.529%;
  --success-foreground: 173.333 90% 7.843%;

  /* Header surface follows the active theme instead of staying fixed navy. */
  --header-background: 0 0% 100%;
  --header-foreground: 224 71.429% 4.118%;
  --header-control: 0 0% 100%;
  --header-control-hover: 220 14.286% 95.882%;
  --header-border: 220 13.043% 90.98%;
  --header-muted: 220 10.169% 46.275%;
  --header-primary: 154.146 51.899% 53.529%;
  --header-primary-foreground: 224 71.429% 4.118%;
  --header-primary-hover: 171 78.947% 14.902%;
  --header-primary-hover-foreground: 0 0% 100%;
  --header-ring: 164.043 75.806% 24.314%;
}

.dark {
  --background: 224 71.429% 4.118%;
  --foreground: 210 20% 98.039%;
  --card: 220 42.857% 10.98%;
  --card-foreground: 210 20% 98.039%;
  --popover: 220 42.857% 10.98%;
  --popover-foreground: 210 20% 98.039%;
  --primary: 154.146 51.899% 53.529%;
  --primary-foreground: 224 71.429% 4.118%;
  --secondary: 215.556 31.034% 17.059%;
  --secondary-foreground: 210 20% 98.039%;
  --muted: 215.556 31.034% 17.059%;
  --muted-foreground: 218.182 12.088% 64.314%;
  --accent: 215.556 31.034% 17.059%;
  --accent-foreground: 210 20% 98.039%;
  --border: 217.241 21.168% 26.863%;
  --input: 215.556 31.034% 17.059%;
  --ring: 154.146 51.899% 53.529%;

  --page-surface: 224 71.429% 4.118%;
  --brand: 154.177 53.741% 71.176%;
  --brand-dark: 154.146 51.899% 53.529%;
  --brand-light: 152.632 64.045% 82.549%;
  --surface: 220 42.857% 10.98%;
  --surface-alt: 215.556 31.034% 17.059%;
  --surface-border: 217.241 21.168% 26.863%;
  --interface-text: 220 13.043% 90.98%;
  --tree-node-hover: 215.556 31.034% 17.059%;
  --tooltip: 215.556 31.034% 17.059%;
  --tooltip-border: 217.241 21.168% 26.863%;
  --markdown-toolbar: 220 42.857% 10.98%;
  --markdown-toolbar-border: 217.241 21.168% 26.863%;
  --markdown-toolbar-text: 220 13.043% 90.98%;
  --headline-anchor-icon: 218.182 12.088% 64.314%;
  --avatar-bg: 215.556 31.034% 17.059%;
  --avatar-foreground: 154.177 53.741% 71.176%;
  --scrollbar-thumb: 217.241 21.168% 26.863%;
  --scrollbar-thumb-hover: 218.182 12.088% 64.314%;
  --table-header-bg: 220 42.857% 10.98%;
  --success: 154.146 51.899% 53.529%;
  --success-foreground: 224 71.429% 4.118%;

  --header-background: 220 42.857% 10.98%;
  --header-foreground: 210 20% 98.039%;
  --header-control: 215.556 31.034% 17.059%;
  --header-control-hover: 217.241 21.168% 26.863%;
  --header-border: 217.241 21.168% 26.863%;
  --header-muted: 218.182 12.088% 64.314%;
  --header-primary: 154.146 51.899% 53.529%;
  --header-primary-foreground: 224 71.429% 4.118%;
  --header-primary-hover: 171 78.947% 14.902%;
  --header-primary-hover-foreground: 0 0% 100%;
  --header-ring: 154.146 51.899% 53.529%;
  --shadow-card: var(--shadow-none);
  --shadow-md: var(--shadow-none);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
  font-kerning: normal;
  font-synthesis: style;
  font-variant-numeric: lining-nums proportional-nums;
}

button,
input,
textarea,
select {
  border-radius: var(--radius-md);
}

.app-layout__header button,
.page-viewer__content a,
.markdown-editor__preview a,
.page-history__preview-body a,
.markdown-toolbar__button,
.markdown-editor__tab-button,
.page-history__tab-button {
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

:where(button, [role="button"]):active:not(:disabled) {
  opacity: 0.9;
}

:where(button, input, textarea, select):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.app-layout__header {
  --background: var(--header-control);
  --foreground: var(--header-foreground);
  --surface: var(--header-background);
  --surface-border: var(--header-border);
  --interface-text: var(--header-foreground);
  --muted: var(--header-control-hover);
  --muted-foreground: var(--header-muted);
  --accent: var(--header-control-hover);
  --accent-foreground: var(--header-foreground);
  --border: var(--header-border);
  --input: var(--header-border);
  --ring: var(--header-ring);
  --primary: var(--header-primary);
  --primary-foreground: var(--header-primary-foreground);
  color: hsl(var(--header-foreground));
  background: hsl(var(--header-background));
  border-color: hsl(var(--header-border));
  border-bottom-width: 1px;
}

.app-layout__header .app-layout__site-name {
  color: hsl(var(--header-foreground));
  font-weight: 700;
  letter-spacing: var(--conalog-tracking-tighter);
}

.app-layout__header button {
  box-shadow: var(--shadow-none);
}

.app-layout__header button.bg-primary {
  color: hsl(var(--header-primary-foreground));
  background-color: hsl(var(--header-primary));
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

.app-layout__header button.bg-primary:hover {
  color: hsl(var(--header-primary-hover-foreground));
  background-color: hsl(var(--header-primary-hover));
}

.app-layout__header button:not(.bg-primary) {
  color: hsl(var(--header-foreground));
  background-color: hsl(var(--header-control));
  border-color: hsl(var(--header-border));
}

.app-layout__header button:not(.bg-primary):hover {
  color: hsl(var(--header-foreground));
  background-color: hsl(var(--header-control-hover));
}

.app-layout__header :where(a, button, input, select):focus-visible {
  outline-color: hsl(var(--header-ring));
}

.app-layout__header .app-layout__logo-image {
  max-height: 2rem;
}

.sidebar,
.app-layout__sidebar-panel,
.app-layout__toc-pane,
.page-viewer__toc-panel {
  background: hsl(var(--surface));
}

.breadcrumbs-nav {
  color: hsl(var(--muted-foreground));
  font-size: var(--conalog-text-sm);
}

.breadcrumbs-nav__link:hover,
.breadcrumbs-nav__current {
  color: hsl(var(--foreground));
}

.page-viewer__content,
.markdown-editor__preview,
.page-history__preview-body {
  color: hsl(var(--foreground));
  font-size: var(--conalog-text-base);
  line-height: var(--conalog-leading-loose);
  letter-spacing: var(--conalog-tracking-normal);
}

.page-viewer__content :where(h1, h2, h3, h4),
.markdown-editor__preview :where(h1, h2, h3, h4),
.page-history__preview-body :where(h1, h2, h3, h4) {
  color: var(--color-gray-900);
  font-weight: 700;
  letter-spacing: var(--conalog-tracking-tighter);
  text-wrap: balance;
}

.dark .page-viewer__content :where(h1, h2, h3, h4),
.dark .markdown-editor__preview :where(h1, h2, h3, h4),
.dark .page-history__preview-body :where(h1, h2, h3, h4) {
  color: hsl(var(--foreground));
}

.page-viewer__content :where(h1),
.markdown-editor__preview :where(h1),
.page-history__preview-body :where(h1) {
  font-size: clamp(
    var(--conalog-text-3xl),
    1.95rem + 0.8vw,
    var(--conalog-text-4xl)
  );
  line-height: var(--conalog-leading-snug);
}

.page-viewer__content :where(h2),
.markdown-editor__preview :where(h2),
.page-history__preview-body :where(h2) {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid hsl(var(--surface-border));
  font-size: var(--conalog-text-2xl);
  line-height: var(--conalog-leading-tight);
}

.page-viewer__content :where(h3),
.markdown-editor__preview :where(h3),
.page-history__preview-body :where(h3) {
  font-size: var(--conalog-text-xl);
  line-height: var(--conalog-leading-tight);
}

.page-viewer__content :where(h4),
.markdown-editor__preview :where(h4),
.page-history__preview-body :where(h4) {
  font-size: var(--conalog-text-lg);
  line-height: var(--conalog-leading-tight);
  letter-spacing: var(--conalog-tracking-tight);
}

.page-viewer__content :where(p, li),
.markdown-editor__preview :where(p, li),
.page-history__preview-body :where(p, li) {
  line-height: var(--conalog-leading-loose);
}

.page-viewer__content :where(a),
.markdown-editor__preview :where(a),
.page-history__preview-body :where(a) {
  color: hsl(var(--brand));
  text-decoration-color: hsl(var(--brand-light));
  text-underline-offset: 0.18em;
}

.page-viewer__content :where(a:hover),
.markdown-editor__preview :where(a:hover),
.page-history__preview-body :where(a:hover) {
  color: hsl(var(--brand-dark));
  text-decoration-color: currentColor;
}

.dark .page-viewer__content :where(a:hover),
.dark .markdown-editor__preview :where(a:hover),
.dark .page-history__preview-body :where(a:hover) {
  color: hsl(var(--brand-light));
}

.page-viewer__content :where(blockquote),
.markdown-editor__preview :where(blockquote),
.page-history__preview-body :where(blockquote) {
  padding-block: var(--space-3);
  padding-right: var(--space-4);
  border-left-color: var(--color-conalog-green);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: hsl(var(--surface));
}

.page-viewer__content :where(code):not(:where(pre *)),
.markdown-editor__preview :where(code):not(:where(pre *)),
.page-history__preview-body :where(code):not(:where(pre *)) {
  padding: 0.15em 0.38em;
  border-radius: var(--radius-sm);
  background: hsl(var(--surface-alt));
  color: hsl(var(--brand-dark));
  font-size: 0.9em;
  font-variant-ligatures: none;
}

.dark .page-viewer__content :where(code):not(:where(pre *)),
.dark .markdown-editor__preview :where(code):not(:where(pre *)),
.dark .page-history__preview-body :where(code):not(:where(pre *)) {
  color: hsl(var(--brand-light));
}

.page-viewer__content :where(.markdown-code-block),
.markdown-editor__preview :where(.markdown-code-block),
.page-history__preview-body :where(.markdown-code-block) {
  overflow: auto;
  border: 1px solid hsl(var(--surface-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-none);
}

.page-viewer__content :where(table),
.markdown-editor__preview :where(table),
.page-history__preview-body :where(table) {
  font-variant-numeric: tabular-nums;
}

.page-viewer__content :where(th),
.markdown-editor__preview :where(th),
.page-history__preview-body :where(th) {
  background: hsl(var(--table-header-bg));
  color: hsl(var(--interface-text));
  font-size: var(--conalog-text-sm);
  font-weight: 600;
}

.page-viewer__content :where(th, td),
.markdown-editor__preview :where(th, td),
.page-history__preview-body :where(th, td) {
  border-color: hsl(var(--surface-border));
}

.page-viewer__content :where(figcaption),
.markdown-editor__preview :where(figcaption),
.page-history__preview-body :where(figcaption) {
  color: hsl(var(--muted-foreground));
  font-size: var(--conalog-text-sm);
  line-height: var(--conalog-leading-normal);
}

.page-viewer__content :where(hr),
.markdown-editor__preview :where(hr),
.page-history__preview-body :where(hr) {
  border-color: hsl(var(--surface-border));
}

.markdown-toolbar,
.markdown-editor__tabs {
  border-color: hsl(var(--markdown-toolbar-border));
  background: hsl(var(--markdown-toolbar));
}

.markdown-toolbar__button,
.markdown-editor__tab-button,
.page-history__tab-button {
  border-radius: var(--radius-md);
}

.bg-popover,
[role="dialog"],
.asset-manager-dialog__content {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.bg-tooltip,
.asset-preview-tooltip__content {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.importer__info-card,
.importer__summary-card,
.page-history__panel,
.page-history__summary-stat {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

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

@media (max-width: 640px) {
  .app-layout__header .app-layout__site-name {
    font-size: var(--conalog-text-sm);
  }

  .page-viewer__content :where(h1),
  .markdown-editor__preview :where(h1),
  .page-history__preview-body :where(h1) {
    font-size: var(--conalog-text-3xl);
  }
}