/* ==========================================================================
   Fonts — Space Grotesk (headings/body) + JetBrains Mono (code)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ==========================================================================
   🌙 Catppuccin Mocha (dark mode)
   ========================================================================== */
[data-md-color-scheme="catppuccin-mocha"] {
  --md-primary-fg-color:             #cba6f7; /* mauve */
  --md-primary-fg-color--light:      #cba6f7;
  --md-primary-fg-color--dark:       #b4befe; /* lavender */
  --md-primary-bg-color:             #cdd6f4; /* text — used as header/tabs text color */
  --md-primary-bg-color--light:      #cdd6f4;

  --md-accent-fg-color:              #f5c2e7; /* pink */
  --md-accent-fg-color--transparent: #f5c2e71a;
  --md-accent-bg-color:              #1e1e2e;

  --md-default-bg-color:             #1e1e2e; /* base */
  --md-default-fg-color:             #cdd6f4; /* text */
  --md-default-fg-color--light:      #bac2de; /* subtext1 */
  --md-default-fg-color--lighter:    #a6adc8; /* subtext0 */
  --md-default-fg-color--lightest:   #585b70; /* surface2 */

  --md-code-bg-color:                #181825; /* mantle */
  --md-code-fg-color:                #a6e3a1; /* green */
  --md-code-hl-color:                #f5c2e766;

  --md-typeset-a-color:              #89b4fa; /* blue */

  /* admonitions */
  --md-admonition-fg-color:          #cdd6f4;
  --md-admonition-bg-color:          #313244; /* surface0 */

  --catppuccin-surface0: #313244;
  --catppuccin-surface1: #45475a;
  --catppuccin-mantle:   #181825;
  --catppuccin-crust:    #11111b;
  --catppuccin-green:    #a6e3a1;
  --catppuccin-red:      #f38ba8;
  --catppuccin-yellow:   #f9e2af;
  --catppuccin-peach:    #fab387;
  --catppuccin-teal:     #94e2d5;
  --catppuccin-mauve:    #cba6f7;
  --catppuccin-pink:     #f5c2e7;
  --catppuccin-lavender: #b4befe;
}

[data-md-color-scheme="catppuccin-mocha"] .md-header,
[data-md-color-scheme="catppuccin-mocha"] .md-tabs {
  background: linear-gradient(120deg, #181825 0%, #1e1e2e 55%, #302b3f 100%);
}

[data-md-color-scheme="catppuccin-mocha"] .md-nav__link--active,
[data-md-color-scheme="catppuccin-mocha"] .md-nav__link:focus,
[data-md-color-scheme="catppuccin-mocha"] .md-nav__link:hover {
  color: var(--catppuccin-pink);
}

/* ==========================================================================
   🌤️ Catppuccin Latte (light mode)
   ========================================================================== */
[data-md-color-scheme="catppuccin-latte"] {
  --md-primary-fg-color:             #8839ef; /* mauve */
  --md-primary-fg-color--light:      #8839ef;
  --md-primary-fg-color--dark:       #7287fd; /* lavender */
  --md-primary-bg-color:             #4c4f69; /* text — used as header/tabs text color */
  --md-primary-bg-color--light:      #4c4f69;

  --md-accent-fg-color:              #ea76cb; /* pink */
  --md-accent-fg-color--transparent: #ea76cb1a;
  --md-accent-bg-color:              #eff1f5;

  --md-default-bg-color:             #eff1f5; /* base */
  --md-default-fg-color:             #4c4f69; /* text */
  --md-default-fg-color--light:      #5c5f77; /* subtext1 */
  --md-default-fg-color--lighter:    #6c6f85; /* subtext0 */
  --md-default-fg-color--lightest:   #acb0be; /* surface2 */

  --md-code-bg-color:                #e6e9ef; /* mantle */
  --md-code-fg-color:                #40a02b; /* green */
  --md-code-hl-color:                #ea76cb33;

  --md-typeset-a-color:              #1e66f5; /* blue */

  --md-admonition-fg-color:          #4c4f69;
  --md-admonition-bg-color:          #e6e9ef; /* mantle */

  --catppuccin-surface0: #ccd0da;
  --catppuccin-surface1: #bcc0cc;
  --catppuccin-mantle:   #e6e9ef;
  --catppuccin-crust:    #dce0e8;
  --catppuccin-green:    #40a02b;
  --catppuccin-red:      #d20f39;
  --catppuccin-yellow:   #df8e1d;
  --catppuccin-peach:    #fe640b;
  --catppuccin-teal:     #179299;
  --catppuccin-mauve:    #8839ef;
  --catppuccin-pink:     #ea76cb;
  --catppuccin-lavender: #7287fd;
}

[data-md-color-scheme="catppuccin-latte"] .md-header,
[data-md-color-scheme="catppuccin-latte"] .md-tabs {
  background: linear-gradient(120deg, #dce0e8 0%, #eff1f5 55%, #ede4fb 100%);
}

/* ==========================================================================
   Typography — funky but readable
   ========================================================================== */
body,
input {
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
}

.md-typeset code,
.md-typeset kbd,
.md-typeset pre {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

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

.md-typeset h1 {
  background: linear-gradient(90deg, var(--catppuccin-mauve), var(--catppuccin-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Rounded, "funky" component treatment
   ========================================================================== */
.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.md-typeset table:not([class]) th {
  background: var(--catppuccin-surface0);
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border-width: 0;
  border-left: 4px solid var(--catppuccin-mauve);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: var(--catppuccin-teal);
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--catppuccin-lavender);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--catppuccin-peach);
}

.md-typeset code {
  border-radius: 6px;
  padding: 0.1em 0.4em;
}

/* nav pill hover glow */
.md-nav__link {
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.md-nav__link:hover {
  background-color: var(--catppuccin-surface0);
}

/* tabs — rounded pill style */
.md-tabs__link {
  border-radius: 999px;
  padding: 0.4em 1em;
  transition: background-color 0.15s ease;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  background-color: rgba(255, 255, 255, 0.12);
}

/* search result highlight glow */
.md-typeset mark {
  background-color: var(--catppuccin-yellow);
  color: var(--catppuccin-crust);
  border-radius: 4px;
  padding: 0 0.2em;
}

/* buttons / links get a little pop */
.md-typeset a {
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

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