/*
 * Conalog documentation theme
 * Brand reference: https://www.conalog.com/
 * Keep this file declarative. Branding Settings in the UI are not persisted.
 */

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/assets/theme/SpoqaHanSansNeo-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/assets/theme/SpoqaHanSansNeo-Bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  --font-sans: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Noto Sans KR",
    sans-serif;

  /* Conalog: navy structure, emerald actions, green-tinted neutrals. */
  --background: 150 14% 99%;
  --foreground: 220 43% 11%;
  --card: 150 18% 98%;
  --card-foreground: 220 43% 11%;
  --popover: 150 14% 99%;
  --popover-foreground: 220 43% 11%;
  --primary: 160 82% 31%;
  --primary-foreground: 150 20% 98%;
  --secondary: 155 22% 95%;
  --secondary-foreground: 173 90% 8%;
  --accent: 155 26% 93%;
  --accent-foreground: 173 90% 8%;
  --border: 158 16% 87%;
  --input: 158 16% 87%;
  --ring: 154 52% 54%;

  --page-surface: 150 14% 99%;
  --brand: 160 82% 31%;
  --brand-dark: 173 90% 8%;
  --brand-light: 156 55% 82%;
  --surface: 150 18% 97%;
  --surface-alt: 155 22% 94%;
  --surface-border: 158 16% 87%;
  --interface-text: 218 32% 20%;
  --tree-node-hover: 155 30% 91%;
  --tooltip: 155 30% 94%;
  --tooltip-border: 156 25% 78%;
  --markdown-toolbar: 155 22% 95%;
  --markdown-toolbar-border: 158 16% 87%;
  --markdown-toolbar-text: 218 32% 20%;
  --headline-anchor-icon-hover: 160 82% 31%;
}

.dark {
  --background: 220 33% 7%;
  --foreground: 150 15% 94%;
  --card: 216 31% 12%;
  --card-foreground: 150 15% 94%;
  --popover: 216 31% 12%;
  --popover-foreground: 150 15% 94%;
  --primary: 154 52% 54%;
  --primary-foreground: 173 90% 8%;
  --secondary: 169 21% 15%;
  --secondary-foreground: 150 15% 94%;
  --accent: 169 21% 18%;
  --accent-foreground: 150 15% 94%;
  --border: 169 16% 24%;
  --input: 169 16% 21%;
  --ring: 154 52% 54%;

  --page-surface: 220 33% 7%;
  --brand: 154 52% 54%;
  --brand-dark: 155 55% 42%;
  --brand-light: 155 32% 66%;
  --surface: 216 31% 10%;
  --surface-alt: 169 21% 15%;
  --surface-border: 169 16% 24%;
  --interface-text: 150 12% 84%;
  --tree-node-hover: 169 21% 18%;
  --tooltip: 169 21% 16%;
  --tooltip-border: 169 16% 28%;
  --markdown-toolbar: 216 31% 11%;
  --markdown-toolbar-border: 169 16% 24%;
  --markdown-toolbar-text: 150 12% 84%;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
  font-kerning: normal;
}

.app-layout__header {
  --surface: 220 43% 11%;
  --surface-border: 218 35% 16%;
  --interface-text: 150 20% 96%;
  --muted: 157 12% 72%;
  --muted-foreground: 157 12% 72%;
  --accent: 218 32% 17%;
  --accent-foreground: 150 20% 96%;
  background: #101828;
  border-color: #1a2535;
}

.app-layout__header .app-layout__site-name {
  color: #f6faf8;
  font-weight: 700;
  letter-spacing: -0.015em;
}

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

.sidebar {
  background: hsl(var(--surface));
}

.page-viewer__content,
.markdown-editor__preview,
.page-history__preview-body {
  color: hsl(var(--foreground));
  font-size: 1rem;
  line-height: 1.75;
}

.page-viewer__content :where(h1, h2, h3),
.markdown-editor__preview :where(h1, h2, h3),
.page-history__preview-body :where(h1, h2, h3) {
  color: #101828;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.dark .page-viewer__content :where(h1, h2, h3),
.dark .markdown-editor__preview :where(h1, h2, h3),
.dark .page-history__preview-body :where(h1, h2, h3) {
  color: hsl(150 15% 94%);
}

.page-viewer__content :where(h1),
.markdown-editor__preview :where(h1),
.page-history__preview-body :where(h1) {
  font-size: clamp(2rem, 1.65rem + 1.1vw, 2.75rem);
  line-height: 1.18;
}

.page-viewer__content :where(h2),
.markdown-editor__preview :where(h2),
.page-history__preview-body :where(h2) {
  border-bottom: 1px solid hsl(var(--surface-border));
  padding-bottom: 0.55rem;
}

.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) {
  border-left-color: #4bc691;
  background: hsl(var(--surface));
  border-radius: 0 0.5rem 0.5rem 0;
  padding-block: 0.75rem;
  padding-right: 1rem;
}

.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 *)) {
  background: hsl(var(--surface-alt));
  color: hsl(var(--brand-dark));
  border-radius: 0.3rem;
  padding: 0.15em 0.38em;
  font-size: 0.9em;
}

.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));
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid #4bc691;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .app-layout__header .app-layout__site-name {
    font-size: 0.925rem;
  }

  .page-viewer__content,
  .markdown-editor__preview,
  .page-history__preview-body {
    line-height: 1.68;
  }
}