/*
================================================================================
| JENTIC DOCS THEME — Single Source of Truth                                   |
|------------------------------------------------------------------------------|
| All colors defined as CSS custom properties in :root.                        |
| Component styles reference these variables — never hardcode colors below.    |
================================================================================
*/

/* ============================================================================
   GOOGLE FONTS
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;1,6..12,400;1,6..12,500&family=Roboto+Mono:wght@400;500;700&display=swap');

/* ============================================================================
   DESIGN TOKENS — Jentic Designer Palette
   ============================================================================
   Primary Scale:
     --primary-300: #0E1A1D (darkest)
     --primary-350: #162629 (card bg)
     --primary-400: #193238
     --primary-500: #305256
     --primary-700: #689296
     --primary-800: #A3CACC (brand primary)
     --primary-900: #E4EAEB
     --primary-950: #F5F7F7

   Accent Colors:
     --accent-orange: #FDBD79
     --accent-yellow: #F1E38B
     --accent-green:  #5EDEB9
     --accent-pink:   #EDADAF
     --accent-blue:   #68BAEC
   ============================================================================ */

:root {
  /* -- Fonts ---------------------------------------------------------------- */
  --md-text-font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --md-code-font: "Roboto Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* -- Primary Color Scale -------------------------------------------------- */
  --primary-300: #0E1A1D;
  --primary-350: #162629;
  --primary-400: #193238;
  --primary-500: #305256;
  --primary-700: #689296;
  --primary-800: #A3CACC;
  --primary-900: #E4EAEB;
  --primary-950: #F5F7F7;

  /* -- Accent Colors -------------------------------------------------------- */
  --accent-orange: #FDBD79;
  --accent-yellow: #F1E38B;
  --accent-green: #5EDEB9;
  --accent-pink: #EDADAF;
  --accent-blue: #68BAEC;

  /* -- Semantic Mappings ---------------------------------------------------- */
  --background: var(--primary-300);
  --background-elevated: var(--primary-350);
  --surface: var(--primary-400);
  --border: var(--primary-500);
  --border-hover: var(--primary-700);
  --text-primary: #FFFFFF;
  --text-secondary: var(--primary-900);
  --text-muted: var(--primary-700);
  --text-subtle: var(--primary-500);
  --link: var(--primary-800);
  --link-hover: var(--accent-green);
  --accent: var(--accent-green);
  --accent-transparent: rgba(94, 222, 185, 0.12);
  --accent-highlight: rgba(94, 222, 185, 0.2);

  /* -- MkDocs Material Overrides -------------------------------------------- */
  --md-primary-fg-color: var(--primary-800);
  --md-primary-fg-color--light: var(--primary-900);
  --md-primary-fg-color--dark: var(--primary-700);
  --md-primary-bg-color: var(--background);
  --md-primary-bg-color--light: var(--surface);
  --md-accent-fg-color: var(--accent);
  --md-accent-fg-color--transparent: var(--accent-transparent);
  --md-accent-bg-color: var(--surface);
  --md-accent-bg-color--light: var(--border);
  --md-default-bg-color: var(--background);
  --md-default-bg-color--light: var(--background-elevated);
  --md-default-fg-color: var(--text-secondary);
  --md-default-fg-color--light: var(--primary-800);
  --md-default-fg-color--lighter: var(--text-muted);
  --md-default-fg-color--lightest: var(--text-subtle);
  --md-typeset-color: var(--text-secondary);
  --md-typeset-a-color: var(--link);
  --md-code-bg-color: var(--background-elevated);
  --md-code-fg-color: var(--text-secondary);
  --md-code-hl-color: var(--accent-transparent);
  --md-header-bg-color: var(--background);
  --md-header-fg-color: var(--text-primary);
  --md-footer-bg-color: var(--background);
  --md-footer-fg-color: var(--text-secondary);
  --md-footer-fg-color--light: var(--text-muted);
  --md-footer-fg-color--lighter: var(--text-subtle);
  --md-sidebar-bg-color: var(--background);
  --md-admonition-bg-color: var(--surface);
  --md-search-result-bg-color: var(--background-elevated);
}

/* Duplicate for [data-md-color-scheme="slate"] to ensure Material picks it up */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--primary-800);
  --md-primary-fg-color--light: var(--primary-900);
  --md-primary-fg-color--dark: var(--primary-700);
  --md-primary-bg-color: var(--background);
  --md-primary-bg-color--light: var(--surface);
  --md-accent-fg-color: var(--accent);
  --md-accent-fg-color--transparent: var(--accent-transparent);
  --md-accent-bg-color: var(--surface);
  --md-accent-bg-color--light: var(--border);
  --md-default-bg-color: var(--background);
  --md-default-bg-color--light: var(--background-elevated);
  --md-default-fg-color: var(--text-secondary);
  --md-default-fg-color--light: var(--primary-800);
  --md-default-fg-color--lighter: var(--text-muted);
  --md-default-fg-color--lightest: var(--text-subtle);
  --md-typeset-color: var(--text-secondary);
  --md-typeset-a-color: var(--link);
  --md-code-bg-color: var(--background-elevated);
  --md-code-fg-color: var(--text-secondary);
  --md-code-hl-color: var(--accent-transparent);
  --md-header-bg-color: var(--background);
  --md-header-fg-color: var(--text-primary);
  --md-footer-bg-color: var(--background);
  --md-footer-fg-color: var(--text-secondary);
  --md-footer-fg-color--light: var(--text-muted);
  --md-footer-fg-color--lighter: var(--text-subtle);
  --md-sidebar-bg-color: var(--background);
  --md-admonition-bg-color: var(--surface);
  --md-search-result-bg-color: var(--background-elevated);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

/* -- Headings: Sora --------------------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Sora", var(--md-text-font);
  font-weight: 700;
}
.md-typeset h1,
.md-typeset h2 {
  font-weight: 800;
}

/* -- Header site title: Sora ------------------------------------------------ */
.md-header__title,
.md-header__topic {
  font-family: "Sora", var(--md-text-font);
  font-weight: 600;
}

/* ============================================================================
   HEADER
   ============================================================================ */
.md-header {
  background-color: var(--background);
  color: var(--text-primary);
  border-bottom: 1px solid var(--accent-transparent);
}

.md-tabs {
  background-color: var(--background);
}

/* ============================================================================
   SEARCH
   ============================================================================ */

/* -- Search bar ------------------------------------------------------------- */
.md-search__input {
  background-color: var(--surface);
  color: var(--text-secondary);
  border-radius: 0;
}
.md-search__input::placeholder {
  color: var(--text-muted);
}
.md-search__input:hover {
  background-color: var(--background-elevated);
}
.md-search__input:focus {
  background-color: var(--surface);
  border-color: var(--border-hover);
}

/* -- Search icons ----------------------------------------------------------- */
.md-search__icon {
  color: var(--text-muted);
}
.md-search__icon:hover {
  color: var(--link);
}

/* -- Search dropdown -------------------------------------------------------- */
.md-search__output {
  background-color: var(--background);
  border-radius: 0;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.md-search__scrollwrap {
  background-color: var(--background-elevated);
}

.md-search-result__list {
  background-color: var(--background-elevated);
}

.md-search-result__item {
  border-bottom: 1px solid var(--border);
}

.md-search-result__link {
  background-color: transparent;
}
.md-search-result__link:hover,
.md-search-result__link[data-md-state="active"] {
  background-color: var(--surface);
}

.md-search-result__title {
  color: var(--text-secondary);
  font-family: "Sora", var(--md-text-font);
  font-weight: 600;
  font-size: 0.82rem;
}

.md-search-result__teaser {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.md-search-result__meta {
  background-color: var(--surface);
  color: var(--text-muted);
}

/* -- Search highlights ------------------------------------------------------ */
.md-search-result mark,
.md-search-result__teaser mark {
  background-color: var(--accent-highlight);
  color: var(--accent);
}
.md-search-result__title mark {
  color: var(--accent);
}

.md-search-result__more summary {
  color: var(--link);
  font-size: 0.78rem;
}
.md-search-result__more summary:hover {
  color: var(--text-secondary);
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

.md-nav__link--active,
.md-nav__link:is([aria-current]) {
  color: var(--accent);
  font-weight: 600;
}

.md-nav__link:hover {
  color: var(--link-hover);
}

.md-typeset a:hover {
  color: var(--link-hover);
}

.md-sidebar {
  background-color: var(--md-sidebar-bg-color);
}

/* ============================================================================
   CODE
   ============================================================================ */

.md-typeset code {
  border-radius: 4px;
}
.md-typeset pre > code {
  border-radius: 6px;
  border: 1px solid var(--border);
}

.md-typeset code:not(pre code) {
  background-color: var(--surface);
  color: var(--link);
}

/* ============================================================================
   ADMONITIONS
   ============================================================================ */
.md-typeset .admonition,
.md-typeset details {
  border-left-width: 3px;
  border-radius: 6px;
  background-color: var(--surface);
  border-color: var(--border-hover);
}

/* ============================================================================
   TABLES
   ============================================================================ */
.md-typeset table:not([class]) th {
  background-color: var(--border);
  color: var(--text-primary);
}
.md-typeset table:not([class]) td {
  border-color: var(--border);
}

/* ============================================================================
   CONTENT TABS
   ============================================================================ */
.md-typeset .tabbed-labels > label.tabbed-alternate:checked,
.md-typeset .tabbed-set > input:checked + label {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.md-footer {
  background-color: var(--background);
  border-top: 1px solid var(--accent-transparent);
}

/* ============================================================================
   BUTTONS & MISC
   ============================================================================ */

.md-clipboard {
  color: var(--text-muted);
}
.md-clipboard:hover {
  color: var(--link);
}

/* -- Scrollbar -------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--background);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* -- Selection -------------------------------------------------------------- */
::selection {
  background-color: var(--accent-highlight);
  color: inherit;
}

/* -- Focus ring ------------------------------------------------------------- */
:focus-visible {
  outline-color: var(--link);
}