/* ---------------------------------------------------------------------------
 * Timely brand overrides for MkDocs Material.
 * Source-of-truth tokens live in timely-gpt-integration/apps/frontend/app/themes/tokens.css.
 * Keep these in sync with the design system; do not introduce new hex values here.
 * ------------------------------------------------------------------------- */

:root {
  /* Brand palette (from tokens.css) */
  --timely-primary-50: #f8f5ff;
  --timely-primary-100: #e2d6ff;
  --timely-primary-300: #b48fff;
  --timely-primary-500: #5e0aff;
  --timely-primary-600: #4d00e0;
  --timely-black: #1b1d1f;
  --timely-gray-50: #f7f8f9;
  --timely-gray-100: #e8ebed;
  --timely-gray-200: #c9cdd2;
  --timely-gray-300: #56595d;
  --timely-gray-400: #8e959d;
  --timely-gray-500: #4d5053;
  --timely-gray-600: #34373a;
  --timely-info-500: #124cc0;
  --timely-success-500: #08875d;
  --timely-warning-500: #6b4e00;
  --timely-danger-500: #a11723;

  /* Map onto MkDocs Material variables --------------------------------- */
  --md-primary-fg-color: var(--timely-primary-500);
  --md-primary-fg-color--light: var(--timely-primary-300);
  --md-primary-fg-color--dark: var(--timely-primary-600);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: var(--timely-primary-500);
  --md-accent-fg-color--transparent: rgba(94, 10, 255, 0.1);
  --md-accent-bg-color: #ffffff;

  --md-typeset-a-color: var(--timely-primary-500);

  --md-default-fg-color: var(--timely-black);
  --md-default-fg-color--light: var(--timely-gray-500);
  --md-default-fg-color--lighter: var(--timely-gray-400);
  --md-default-fg-color--lightest: var(--timely-gray-200);

  --md-default-bg-color: #ffffff;

  --md-code-bg-color: var(--timely-gray-50);
  --md-code-fg-color: var(--timely-black);

  /* Typography */
  --md-text-font: "Pretendard", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --md-code-font: "JetBrains Mono", "Menlo", "Consolas", monospace;
}

/* Note: dark-mode (slate) overrides were intentionally removed —
 * the manual is light-only to match the Timely service. If a dark mode is
 * reintroduced, restore the [data-md-color-scheme="slate"] block here. */

/* ---------------------------------------------------------------------------
 * Global typography polish — Pretendard prefers tighter tracking.
 * ------------------------------------------------------------------------- */
body,
.md-typeset {
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  letter-spacing: -0.02em;
  font-weight: 700;
}

.md-typeset h1 {
  color: var(--md-default-fg-color);
}

/* ---------------------------------------------------------------------------
 * Header & navigation
 * ------------------------------------------------------------------------- */
.md-header {
  box-shadow: 0px 1px 2px 0px rgba(51, 51, 51, 0.06),
    0px 3px 3px 0px rgba(51, 51, 51, 0.05);
}

.md-header__title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Top tabs (어드민 가이드 / 유저 가이드 / FAQ ...) */
.md-tabs {
  background-color: var(--md-primary-fg-color);
}

.md-tabs__link {
  opacity: 0.85;
  font-weight: 500;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Content
 * ------------------------------------------------------------------------- */

/* Links: brand color, subtle underline on hover */
.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.md-typeset a:hover {
  border-bottom-color: currentColor;
}

/* Buttons (mkdocs-material .md-button) */
.md-typeset .md-button {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.5em 1.2em;
}
.md-typeset .md-button--primary {
  background-color: var(--timely-primary-500);
  border-color: var(--timely-primary-500);
  color: #ffffff;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--timely-primary-600);
  border-color: var(--timely-primary-600);
}

/* Admonitions: softer radius, brand-tinted */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border-left-width: 4px;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--timely-info-500);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(18, 76, 192, 0.08);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--timely-success-500);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(8, 135, 93, 0.08);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--timely-warning-500);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--timely-danger-500);
}

/* Tables: clean look matching design system */
.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--timely-gray-100);
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: var(--timely-gray-50);
  font-weight: 700;
}

/* Code blocks: subtle background */
.md-typeset pre > code {
  border-radius: 8px;
}

/* Images: rounded corners */
.md-typeset img {
  border-radius: 8px;
}

/* Footer: brand-colored link */
.md-footer-meta__inner a {
  color: rgba(255, 255, 255, 0.9);
}

/* Search: focus ring in brand color */
.md-search__input {
  border-radius: 8px;
}

/* ---------------------------------------------------------------------------
 * Sidebar — visually separate section headers from leaf links.
 *
 * mkdocs-material renders both kinds with class `.md-nav__link`, the only
 * difference being the tag (<label> for parent sections, <a> for actual links).
 * Without extra styling the hierarchy reads flat. We give the section labels
 * a smaller-but-bolder uppercase-feel treatment and keep leaf links clean.
 * ------------------------------------------------------------------------- */

/* Section label (e.g. "시작하기", "기능 더보기") — parent of a nested list */
.md-nav .md-nav__item--nested > label.md-nav__link,
.md-nav .md-nav__item--section > label.md-nav__link {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--timely-gray-400);
  text-transform: uppercase;       /* no-op for 한글; tightens English/숫자 if mixed */
  margin-top: 1.1em;
  opacity: 1;
}

/* The very first section label in a sidebar shouldn't have a top gap */
.md-sidebar--primary .md-nav__list > .md-nav__item:first-child > label.md-nav__link {
  margin-top: 0;
}

/* Top of sidebar — "어드민 가이드" / "유저 가이드" header
 * (rendered as .md-nav__title when navigation.tabs surfaces the section) */
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--timely-black);
  padding-top: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--timely-gray-100);
  margin-bottom: 0.4rem;
}

/* Leaf links — clean weight, normal text color */
.md-nav .md-nav__item:not(.md-nav__item--nested):not(.md-nav__item--section)
  > a.md-nav__link {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--md-default-fg-color);
  padding-top: 0.32em;
  padding-bottom: 0.32em;
}

/* Active leaf link — brand-tinted */
.md-nav .md-nav__link--active {
  color: var(--timely-primary-500) !important;
  font-weight: 600 !important;
}