/*
 * Gruvbox Theme Override for github-style
 * Maps Gruvbox palette onto GitHub's CSS variables
 * Preserves GitHub layout identity, changes only colors
 *
 * Gruvbox palette reference:
 * Dark:  bg=#282828  fg=#ebdbb2  red=#cc241d  green=#98971a  yellow=#d79921
 *        blue=#458588  purple=#b16286  aqua=#689d6a  orange=#d65d0e
 * Light: bg=#fbf1c7  fg=#3c3836  red=#9d0006  green=#79740e  yellow=#b57614
 *        blue=#076678  purple=#8f3f71  aqua=#427b58  orange=#af3a03
 */

/* ============================================
   GRUVBOX LIGHT (default)
   ============================================ */
:root {
  /* Page backgrounds */
  --color-canvas-default: #fbf1c7;
  --color-canvas-default-transparent: rgba(251, 241, 199, 0);
  --color-bg-primary: #fbf1c7;
  --color-bg-secondary: #f2e5bc;
  --color-page-header-bg: #f2e5bc;

  /* Text */
  --color-fg-default: #3c3836;
  --color-text-primary: #3c3836;
  --color-text-secondary: #504945;
  --color-text-white: #fbf1c7;

  /* Borders */
  --color-border-primary: #d5c4a1;
  --color-border-secondary: #d5c4a1;
  --color-border-default: #d5c4a1;
  --color-border-muted: #ebdbb2;

  /* Accent (links, focus) */
  --color-accent-fg: #076678;
  --color-accent-emphasis: #076678;
  --color-accent-muted: rgba(7, 102, 120, 0.4);
  --color-accent-subtle: rgba(7, 102, 120, 0.1);

  /* Header */
  --color-header-bg: #3c3836;
  --color-header-text: rgba(235, 219, 178, 0.85);
  --color-header-logo: #ebdbb2;
  --color-header-search-bg: rgba(235, 219, 178, 0.1);
  --color-header-search-border: rgba(235, 219, 178, 0.2);

  /* Buttons */
  --color-btn-primary-bg: #79740e;
  --color-btn-primary-text: #fbf1c7;
  --color-btn-primary-hover-bg: #98971a;
  --color-btn-primary-border: rgba(60, 56, 54, 0.15);
  --color-btn-primary-shadow: 0 1px 0 rgba(60, 56, 54, 0.1);
  --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(251, 241, 199, 0.03);
  --color-btn-primary-focus-bg: #79740e;
  --color-btn-primary-focus-border: #98971a;
  --color-btn-primary-focus-shadow: 0 0 0 3px rgba(121, 116, 14, 0.4);
  --color-btn-primary-selected-bg: #79740e;
  --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(60, 56, 54, 0.2);
  --color-btn-primary-disabled-bg: #bdae93;
  --color-btn-primary-disabled-text: rgba(60, 56, 54, 0.5);
  --color-btn-primary-icon: #fbf1c7;
  --color-btn-primary-counter-bg: rgba(251, 241, 199, 0.2);

  /* Syntax highlighting */
  --color-prettylights-syntax-comment: #928374;
  --color-prettylights-syntax-constant: #076678;
  --color-prettylights-syntax-entity: #8f3f71;
  --color-prettylights-syntax-storage-modifier-import: #3c3836;
  --color-prettylights-syntax-entity-tag: #79740e;
  --color-prettylights-syntax-keyword: #9d0006;
  --color-prettylights-syntax-string: #79740e;
  --color-prettylights-syntax-variable: #af3a03;
  --color-prettylights-syntax-brackethighlighter-unmatched: #9d0006;
  --color-prettylights-syntax-string-regexp: #427b58;
  --color-prettylights-syntax-markup-list: #b57614;
  --color-prettylights-syntax-markup-heading: #076678;

  /* State */
  --color-state-focus-border: #076678;

  /* Calendar/contribution graph */
  --color-calendar-graph-day-bg: #ebdbb2;
  --color-calendar-graph-day-L1-bg: #d5c4a1;
  --color-calendar-graph-day-L2-bg: #b57614;
  --color-calendar-graph-day-L3-bg: #af3a03;
  --color-calendar-graph-day-L4-bg: #9d0006;

  /* Profile toggle */
  --color-profile-color-modes-toggle-thumb-bg: #fbf1c7;

  /* TOC */
  --color-bg-table-of-contents-container: #f2e5bc;
  --color-bg-table-of-contents-option-selected: rgba(7, 102, 120, 0.1);
  --color-fg-table-of-contents-option-selected: #076678;

  /* Code blocks */
  --color-codemirror-bg: #f9f5d7;
  --color-codemirror-text: #3c3836;
  --color-codemirror-gutters-bg: #f9f5d7;
  --color-codemirror-linenumber-text: #928374;

  /* Misc */
  --color-social-reaction-bg-hover: #f2e5bc;
  --color-social-reaction-bg-reacted-hover: rgba(7, 102, 120, 0.15);
}

/* ============================================
   GRUVBOX DARK
   ============================================ */
[data-color-mode=dark] {
  /* Page backgrounds */
  --color-canvas-default: #282828;
  --color-canvas-default-transparent: rgba(40, 40, 40, 0);
  --color-bg-primary: #282828;
  --color-bg-secondary: #1d2021;
  --color-page-header-bg: #1d2021;

  /* Text */
  --color-fg-default: #ebdbb2;
  --color-text-primary: #ebdbb2;
  --color-text-secondary: #a89984;
  --color-text-white: #ebdbb2;

  /* Borders */
  --color-border-primary: #3c3836;
  --color-border-secondary: #3c3836;
  --color-border-default: #3c3836;
  --color-border-muted: #504945;

  /* Accent (links, focus) */
  --color-accent-fg: #83a598;
  --color-accent-emphasis: #458588;
  --color-accent-muted: rgba(131, 165, 152, 0.4);
  --color-accent-subtle: rgba(131, 165, 152, 0.15);

  /* Header */
  --color-header-bg: #1d2021;
  --color-header-text: rgba(235, 219, 178, 0.85);
  --color-header-logo: #ebdbb2;
  --color-header-search-bg: rgba(235, 219, 178, 0.08);
  --color-header-search-border: rgba(235, 219, 178, 0.15);

  /* Buttons */
  --color-btn-primary-bg: #98971a;
  --color-btn-primary-text: #1d2021;
  --color-btn-primary-hover-bg: #b8bb26;
  --color-btn-primary-border: rgba(235, 219, 178, 0.1);
  --color-btn-primary-shadow: 0 0 transparent;
  --color-btn-primary-inset-shadow: 0 0 transparent;
  --color-btn-primary-focus-bg: #98971a;
  --color-btn-primary-focus-border: #b8bb26;
  --color-btn-primary-focus-shadow: 0 0 0 3px rgba(152, 151, 26, 0.4);
  --color-btn-primary-selected-bg: #98971a;
  --color-btn-primary-selected-shadow: 0 0 transparent;
  --color-btn-primary-disabled-bg: rgba(152, 151, 26, 0.6);
  --color-btn-primary-disabled-text: rgba(235, 219, 178, 0.5);
  --color-btn-primary-icon: #1d2021;
  --color-btn-primary-counter-bg: rgba(235, 219, 178, 0.2);

  /* Syntax highlighting */
  --color-prettylights-syntax-comment: #928374;
  --color-prettylights-syntax-constant: #83a598;
  --color-prettylights-syntax-entity: #d3869b;
  --color-prettylights-syntax-storage-modifier-import: #ebdbb2;
  --color-prettylights-syntax-entity-tag: #b8bb26;
  --color-prettylights-syntax-keyword: #fb4934;
  --color-prettylights-syntax-string: #b8bb26;
  --color-prettylights-syntax-variable: #fe8019;
  --color-prettylights-syntax-brackethighlighter-unmatched: #fb4934;
  --color-prettylights-syntax-string-regexp: #8ec07c;
  --color-prettylights-syntax-markup-list: #fabd2f;
  --color-prettylights-syntax-markup-heading: #83a598;

  /* State */
  --color-state-focus-border: #83a598;

  /* Calendar/contribution graph */
  --color-calendar-graph-day-bg: #3c3836;
  --color-calendar-graph-day-L1-bg: #504945;
  --color-calendar-graph-day-L2-bg: #d79921;
  --color-calendar-graph-day-L3-bg: #d65d0e;
  --color-calendar-graph-day-L4-bg: #cc241d;

  /* Profile toggle */
  --color-profile-color-modes-toggle-thumb-bg: #282828;

  /* TOC */
  --color-bg-table-of-contents-container: #1d2021;
  --color-bg-table-of-contents-option-selected: rgba(131, 165, 152, 0.15);
  --color-fg-table-of-contents-option-selected: #83a598;

  /* Code blocks */
  --color-codemirror-bg: #1d2021;
  --color-codemirror-text: #ebdbb2;
  --color-codemirror-gutters-bg: #1d2021;
  --color-codemirror-linenumber-text: #665c54;
  --color-codemirror-syntax-comment: #928374;
  --color-codemirror-syntax-constant: #83a598;
  --color-codemirror-syntax-entity: #d3869b;
  --color-codemirror-syntax-keyword: #fb4934;
  --color-codemirror-syntax-storage: #fb4934;
  --color-codemirror-syntax-string: #b8bb26;
  --color-codemirror-syntax-support: #83a598;
  --color-codemirror-syntax-variable: #fe8019;

  /* Misc */
  --color-social-reaction-bg-hover: #3c3836;
  --color-social-reaction-bg-reacted-hover: rgba(131, 165, 152, 0.15);
}

/* ============================================
   ELEMENT-LEVEL OVERRIDES
   ============================================ */

/* Markdown body within posts */
.markdown-body {
  color: var(--color-text-primary);
}

.markdown-body a {
  color: var(--color-accent-fg);
}

.markdown-body code {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-muted);
}

.markdown-body pre {
  background-color: var(--color-codemirror-bg);
  border: 1px solid var(--color-border-primary);
}

/* Avatar - focus ring and styling */
.avatar-user.border {
  border-color: var(--color-border-primary) !important;
}

.avatar-user.width-full {
  border-radius: 50% !important;
  box-shadow:
    0 0 0 3px var(--color-canvas-default),
    0 0 0 6px var(--color-accent-fg),
    0 4px 20px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.avatar-user.width-full:hover {
  box-shadow:
    0 0 0 3px var(--color-canvas-default),
    0 0 0 6px var(--color-accent-emphasis),
    0 8px 30px rgba(0, 0, 0, 0.25);
  transform: scale(1.02);
}

/* Small avatar in sticky header */
.avatar-user.rounded-1 {
  border-radius: 50% !important;
}

/* Search input focus */
.Header-search-input:focus {
  color: var(--color-text-primary);
}

/* Tag labels - Gruvbox accent colors */
.topic-tag {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent-fg);
  border: 1px solid transparent;
}

.topic-tag:hover {
  background-color: var(--color-accent-muted);
  color: var(--color-accent-fg);
}

/* Pinned item cards */
.pinned-item-desc {
  color: var(--color-text-secondary);
}

/* Year separator in contribution timeline */
.TimelineItem-badge {
  background-color: var(--color-bg-secondary);
}

/* Mobile menu */
.SelectMenu-item[aria-checked="true"] {
  color: var(--color-accent-fg);
}

/* Search results highlight */
mark {
  background-color: rgba(215, 153, 33, 0.3);
  color: inherit;
}

[data-color-mode=dark] mark {
  background-color: rgba(250, 189, 47, 0.3);
}