/* ============================================================
   Repia Search 5 Admin Tools — Sky & Slate Design System
   tokens · base · typography (light + dark)
   ============================================================ */

:root,
[data-md-color-scheme="default"] {
  /* surface */
  --rs-bg:            #ffffff;
  --rs-bg-soft:       #f8fafc;
  --rs-surface:       #ffffff;
  --rs-surface-2:     #f1f5f9;
  --rs-border:        #e2e8f0;
  --rs-border-strong: #cbd5e1;

  /* text */
  --rs-text:          #0f172a;
  --rs-text-muted:    #475569;
  --rs-text-subtle:   #64748b;

  /* accent (single) */
  --rs-accent:        #0ea5e9;
  --rs-accent-hover:  #0284c7;
  --rs-accent-soft:   #e0f2fe;
  --rs-accent-ring:   rgba(14, 165, 233, 0.32);

  /* status (admonition only) */
  --rs-success:       #10b981;
  --rs-warn:          #f59e0b;
  --rs-danger:        #ef4444;

  /* form */
  --rs-radius-sm: 8px;
  --rs-radius:    12px;
  --rs-radius-lg: 20px;

  --rs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --rs-shadow:    0 1px 0 var(--rs-border), 0 10px 30px -16px rgba(15, 23, 42, 0.10);
  --rs-shadow-lg: 0 1px 0 var(--rs-border), 0 24px 48px -24px rgba(15, 23, 42, 0.16);

  /* Material variable bridge */
  --md-primary-fg-color:        var(--rs-accent);
  --md-primary-fg-color--light: #38bdf8;
  --md-primary-fg-color--dark:  var(--rs-accent-hover);
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:         var(--rs-accent);
  --md-accent-fg-color--transparent: rgba(14, 165, 233, 0.10);
  --md-accent-bg-color:         #ffffff;
  --md-accent-bg-color--light:  rgba(255, 255, 255, 0.7);

  --md-default-bg-color:        var(--rs-bg);
  --md-default-fg-color:        var(--rs-text);
  --md-default-fg-color--light: var(--rs-text-muted);
  --md-default-fg-color--lighter: var(--rs-text-subtle);
  --md-default-fg-color--lightest: var(--rs-border);

  --md-typeset-color:           var(--rs-text);
  --md-typeset-a-color:         var(--rs-accent-hover);

  --md-code-bg-color:           var(--rs-surface-2);
  --md-code-fg-color:           var(--rs-text);

  --md-footer-bg-color:         var(--rs-bg-soft);
  --md-footer-bg-color--dark:   var(--rs-bg-soft);
  --md-footer-fg-color:         var(--rs-text-muted);

  /* 검색 하이라이트 + mark */
  --md-typeset-mark-color:      rgba(14, 165, 233, 0.2);
  --md-code-hl-color:           rgba(14, 165, 233, 0.15);

  --md-text-font:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --md-code-font:  "JetBrains Mono", "Pretendard Variable", Pretendard,
                   ui-monospace, SFMono-Regular, Consolas, monospace;
}

[data-md-color-scheme="slate"] {
  --rs-bg:            #0f172a;
  --rs-bg-soft:       #111827;
  --rs-surface:       #1e293b;
  --rs-surface-2:     #273345;
  --rs-border:        #334155;
  --rs-border-strong: #475569;

  --rs-text:          #f1f5f9;
  --rs-text-muted:    #94a3b8;
  --rs-text-subtle:   #64748b;

  --rs-accent:        #38bdf8;
  --rs-accent-hover:  #0ea5e9;
  --rs-accent-soft:   rgba(56, 189, 248, 0.14);
  --rs-accent-ring:   rgba(56, 189, 248, 0.40);

  --md-primary-fg-color:        var(--rs-accent);
  --md-primary-fg-color--light: #7dd3fc;
  --md-primary-fg-color--dark:  var(--rs-accent-hover);

  --md-accent-fg-color:         var(--rs-accent);
  --md-accent-fg-color--transparent: rgba(56, 189, 248, 0.12);

  --md-default-bg-color:        var(--rs-bg);
  --md-default-fg-color:        var(--rs-text);
  --md-default-fg-color--light: var(--rs-text-muted);
  --md-default-fg-color--lighter: var(--rs-text-subtle);
  --md-default-fg-color--lightest: var(--rs-border);

  --md-typeset-color:           var(--rs-text);
  --md-typeset-a-color:         #7dd3fc;

  --md-code-bg-color:           var(--rs-surface-2);
  --md-code-fg-color:           #e2e8f0;

  --md-footer-bg-color:         #0b1326;
  --md-footer-bg-color--dark:   #0b1326;
  --md-footer-fg-color:         var(--rs-text-muted);

  /* 검색 하이라이트 + mark (다크) */
  --md-typeset-mark-color:      rgba(56, 189, 248, 0.25);
  --md-code-hl-color:           rgba(56, 189, 248, 0.18);

  --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --rs-shadow:    0 1px 0 var(--rs-border), 0 12px 32px -16px rgba(0, 0, 0, 0.55);
  --rs-shadow-lg: 0 1px 0 var(--rs-border), 0 28px 56px -24px rgba(0, 0, 0, 0.65);
}

/* ============================================================
   base
   ============================================================ */

html { scroll-behavior: smooth; }

body,
.md-typeset {
  font-family: var(--md-text-font);
  font-feature-settings: "ss01", "ss02", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset {
  font-size: 0.825rem;
  line-height: 1.75;
  color: var(--rs-text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.md-main { background: var(--rs-bg); }

/* heading rhythm */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--rs-text);
  font-weight: 700;
  letter-spacing: -0.018em;
  word-break: keep-all;
}

.md-typeset h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rs-border);
}

.md-typeset h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 2.4rem 0 1rem;
}

.md-typeset h3 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 1.8rem 0 0.8rem;
  color: var(--rs-text);
}

.md-typeset h4 {
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--rs-text-muted);
}

.md-typeset h2::before,
.md-typeset h3::before {
  display: none;
}

/* paragraph + lists */
.md-typeset p,
.md-typeset li {
  color: var(--rs-text);
}

.md-typeset hr {
  border: 0;
  border-top: 1px solid var(--rs-border);
  margin: 2rem 0;
}

/* links */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.md-typeset a:hover {
  color: var(--rs-accent);
  border-bottom-color: currentColor;
}

/* heading anchor permalink */
.md-typeset .headerlink {
  color: var(--rs-text-subtle);
  opacity: 0;
  transition: opacity 0.15s ease;
  border-bottom: none;
}
.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink {
  opacity: 1;
}

/* selection */
::selection {
  background: var(--rs-accent-soft);
  color: var(--rs-text);
}

/* scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rs-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--rs-border-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--rs-text-subtle);
  background-clip: padding-box;
  border: 2px solid transparent;
}