/* ==========================================================================
   GRUVBOX COLOR THEME
   extra.css

   Colors only — no layout, sizing, or structural overrides.
   Default Zensical/Material responsive layout is preserved.

   STRUCTURE:
     Section 1 — Base palette (named color tokens, shared across schemes)
     Section 2 — Per-scheme variables (dark/light set --theme-* and --md-*)
     Section 3 — Component color overrides (reference --theme-* only)

   SCHEMES:
     Dark  → Gruvbox Dark  (Hard Contrast)  [data-md-color-scheme="slate"]
     Light → Gruvbox Light (Hard Contrast)  [data-md-color-scheme="default"]

   TO RETHEME: swap the hex values in Sections 1 and 2. All component
   colors in Section 3 resolve through --theme-* variables automatically.
   ========================================================================== */


/* ==========================================================================
   SECTION 1 — BASE PALETTE
   Named color tokens. Both schemes reference these.
   ========================================================================== */
:root {

  /* -- Dark variant (saturated, for dark backgrounds) -- */
  --color-dark-red:         #fb4934;
  --color-dark-orange:      #fe8019;
  --color-dark-yellow:      #fabd2f;
  --color-dark-green:       #b8bb26;
  --color-dark-aqua:        #8ec07c;
  --color-dark-blue:        #83a598;
  --color-dark-purple:      #d3869b;

  /* -- Light variant (muted, for light backgrounds) -- */
  --color-light-red:        #9d0006;
  --color-light-orange:     #af3a03;
  --color-light-yellow:     #b57614;
  --color-light-green:      #79740e;
  --color-light-aqua:       #427b58;
  --color-light-blue:       #076678;
  --color-light-purple:     #8f3f71;

  /* -- Fonts -- */
  --md-text-font:           "Inter";
  --md-code-font:           "JetBrains Mono";
}


/* ==========================================================================
   SECTION 2A — DARK SCHEME (Gruvbox Dark Hard)
   ========================================================================== */
[data-md-color-scheme="slate"] {

  /* -- Backgrounds -- */
  --theme-bg-base:          #1d2021;
  --theme-bg-surface:       #282828;
  --theme-bg-highlight:     #3c3836;
  --theme-bg-border:        #504945;

  /* -- Text -- */
  --theme-text-main:        #ebdbb2;
  --theme-text-bold:        #fbf1c7;
  --theme-text-muted:       #d5c4a1;
  --theme-text-dim:         #928374;

  /* -- Headings (h1–h6) -- */
  --h1-color:               var(--color-dark-red);
  --h2-color:               var(--color-dark-orange);
  --h3-color:               var(--color-dark-yellow);
  --h4-color:               var(--color-dark-green);
  --h5-color:               var(--color-dark-blue);
  --h6-color:               var(--color-dark-purple);

  /* -- Accents and links -- */
  --theme-accent-main:      #fe8019;
  --theme-accent-hover:     #fabd2f;
  --theme-link:             #83a598;
  --theme-link-active:      #fe8019;
  --theme-nav-title:        var(--color-dark-red);

  /* -- Admonition border colors -- */
  --status-info:            #83a598;
  --status-success:         #b8bb26;
  --status-warning:         #fabd2f;
  --status-danger:          #fb4934;
  --status-special:         #d3869b;

  /* -- Code syntax highlighting -- */
  --code-keyword:           #fb4934;
  --code-function:          #fabd2f;
  --code-string:            #b8bb26;
  --code-number:            #d3869b;
  --code-comment:           #928374;
  --code-class:             #8ec07c;
  --code-variable:          #83a598;
  --code-operator:          #ebdbb2;
  --code-punctuation:       #d5c4a1;

  /* -- Zensical/Material variable mappings --
     NOTE: --light/--lighter/--lightest variants MUST use alpha transparency,
     not opaque colors. The theme uses these for the glassmorphism header,
     sidebar overlay, and separator lines. Opaque values break layout. */

  /* Page background (opaque base) and transparent variants */
  --md-default-bg-color:              var(--theme-bg-base);
  --md-default-bg-color--light:       rgba(29, 32, 33, 0.54);
  --md-default-bg-color--lighter:     rgba(29, 32, 33, 0.26);
  --md-default-bg-color--lightest:    rgba(29, 32, 33, 0.07);

  /* Page foreground (text) and transparent variants */
  --md-default-fg-color:              var(--theme-text-main);
  --md-default-fg-color--light:       rgba(235, 219, 178, 0.56);
  --md-default-fg-color--lighter:     rgba(235, 219, 178, 0.32);
  --md-default-fg-color--lightest:    rgba(235, 219, 178, 0.12);

  /* Header/brand bar colors */
  --md-primary-fg-color:              var(--theme-accent-main);
  --md-primary-fg-color--light:       var(--theme-accent-hover);
  --md-primary-fg-color--dark:        #d65d0e;
  --md-primary-bg-color:              var(--theme-text-main);
  --md-primary-bg-color--light:       rgba(235, 219, 178, 0.7);

  /* Accent color for interactive elements */
  --md-accent-fg-color:               var(--theme-accent-main);
  --md-accent-fg-color--transparent:  rgba(254, 128, 25, 0.1);
  --md-accent-bg-color:               var(--theme-bg-surface);
  --md-accent-bg-color--light:        rgba(40, 40, 40, 0.7);

  /* Link color */
  --md-typeset-a-color:               var(--theme-link);

  /* Footer */
  --md-footer-bg-color:               rgba(29, 32, 33, 0.87);
  --md-footer-bg-color--dark:         var(--theme-bg-base);

  /* Table stripe */
  --md-typeset-table-color:           rgba(235, 219, 178, 0.12);
  --md-typeset-table-color--light:    rgba(235, 219, 178, 0.035);

  /* Admonitions */
  --md-admonition-bg-color:           var(--theme-bg-surface);
  --md-admonition-fg-color:           var(--theme-text-main);

  /* Code blocks */
  --md-code-bg-color:                 var(--theme-bg-surface);
  --md-code-fg-color:                 var(--theme-text-main);
  --md-code-hl-color:                 #2977ff;
  --md-code-hl-color--light:          rgba(41, 119, 255, 0.1);
  --md-code-hl-keyword-color:         var(--code-keyword);
  --md-code-hl-function-color:        var(--code-function);
  --md-code-hl-string-color:          var(--code-string);
  --md-code-hl-number-color:          var(--code-number);
  --md-code-hl-special-color:         var(--status-special);
  --md-code-hl-comment-color:         var(--code-comment);
  --md-code-hl-variable-color:        var(--code-variable);
  --md-code-hl-name-color:            var(--code-class);
  --md-code-hl-operator-color:        var(--code-operator);
  --md-code-hl-punctuation-color:     var(--code-punctuation);
  --md-code-hl-generic-color:         var(--theme-text-muted);

  /* Shadows */
  --md-shadow-z1: 0 0.2rem 0.5rem rgba(0,0,0,0.05), 0 0 0.05rem rgba(255,255,255,0.1);
  --md-shadow-z2: 0 0.2rem 0.5rem rgba(0,0,0,0.25), 0 0 0.05rem rgba(255,255,255,0.35);
  --md-shadow-z3: 0 0.5rem 2rem rgba(0,0,0,0.4), 0 0 0.05rem rgba(0,0,0,0.35);
}


/* ==========================================================================
   SECTION 2B — LIGHT SCHEME (Gruvbox Light Hard)
   ========================================================================== */
[data-md-color-scheme="default"] {

  /* -- Backgrounds -- */
  --theme-bg-base:          #f9f5d7;
  --theme-bg-surface:       #ebdbb2;
  --theme-bg-highlight:     #d5c4a1;
  --theme-bg-border:        #bdae93;

  /* -- Text -- */
  --theme-text-main:        #3c3836;
  --theme-text-bold:        #282828;
  --theme-text-muted:       #504945;
  --theme-text-dim:         #7c6f64;

  /* -- Headings (h1–h6) -- */
  --h1-color:               var(--color-light-red);
  --h2-color:               var(--color-light-orange);
  --h3-color:               var(--color-light-yellow);
  --h4-color:               var(--color-light-green);
  --h5-color:               var(--color-light-blue);
  --h6-color:               var(--color-light-purple);

  /* -- Accents and links -- */
  --theme-accent-main:      #af3a03;
  --theme-accent-hover:     #b57614;
  --theme-link:             #076678;
  --theme-link-active:      #af3a03;
  --theme-nav-title:        var(--color-light-red);

  /* -- Admonition border colors -- */
  --status-info:            #076678;
  --status-success:         #79740e;
  --status-warning:         #b57614;
  --status-danger:          #9d0006;
  --status-special:         #8f3f71;

  /* -- Code syntax highlighting -- */
  --code-keyword:           #9d0006;
  --code-function:          #b57614;
  --code-string:            #79740e;
  --code-number:            #8f3f71;
  --code-comment:           #7c6f64;
  --code-class:             #427b58;
  --code-variable:          #076678;
  --code-operator:          #3c3836;
  --code-punctuation:       #504945;

  /* -- Zensical/Material variable mappings --
     NOTE: --light/--lighter/--lightest variants MUST use alpha transparency.
     See dark scheme note above. */

  /* Page background (opaque base) and transparent variants */
  --md-default-bg-color:              var(--theme-bg-base);
  --md-default-bg-color--light:       rgba(249, 245, 215, 0.7);
  --md-default-bg-color--lighter:     rgba(249, 245, 215, 0.3);
  --md-default-bg-color--lightest:    rgba(249, 245, 215, 0.12);

  /* Page foreground (text) and transparent variants */
  --md-default-fg-color:              var(--theme-text-main);
  --md-default-fg-color--light:       rgba(60, 56, 54, 0.56);
  --md-default-fg-color--lighter:     rgba(60, 56, 54, 0.32);
  --md-default-fg-color--lightest:    rgba(60, 56, 54, 0.12);

  /* Header/brand bar colors */
  --md-primary-fg-color:              var(--theme-accent-main);
  --md-primary-fg-color--light:       var(--theme-accent-hover);
  --md-primary-fg-color--dark:        #8a3000;
  --md-primary-bg-color:              var(--theme-bg-base);
  --md-primary-bg-color--light:       rgba(249, 245, 215, 0.7);

  /* Accent color for interactive elements */
  --md-accent-fg-color:               var(--theme-accent-main);
  --md-accent-fg-color--transparent:  rgba(175, 58, 3, 0.1);
  --md-accent-bg-color:               var(--theme-bg-base);
  --md-accent-bg-color--light:        rgba(249, 245, 215, 0.7);

  /* Link color */
  --md-typeset-a-color:               var(--theme-link);

  /* Footer */
  --md-footer-bg-color:               rgba(60, 56, 54, 0.87);
  --md-footer-bg-color--dark:         var(--theme-text-bold);

  /* Table stripe */
  --md-typeset-table-color:           rgba(60, 56, 54, 0.12);
  --md-typeset-table-color--light:    rgba(60, 56, 54, 0.035);

  /* Admonitions */
  --md-admonition-bg-color:           var(--theme-bg-surface);
  --md-admonition-fg-color:           var(--theme-text-main);

  /* Code blocks */
  --md-code-bg-color:                 var(--theme-bg-surface);
  --md-code-fg-color:                 var(--theme-text-main);
  --md-code-hl-color:                 #4287ff;
  --md-code-hl-color--light:          rgba(66, 135, 255, 0.1);
  --md-code-hl-keyword-color:         var(--code-keyword);
  --md-code-hl-function-color:        var(--code-function);
  --md-code-hl-string-color:          var(--code-string);
  --md-code-hl-number-color:          var(--code-number);
  --md-code-hl-special-color:         var(--status-special);
  --md-code-hl-comment-color:         var(--code-comment);
  --md-code-hl-variable-color:        var(--code-variable);
  --md-code-hl-name-color:            var(--code-class);
  --md-code-hl-operator-color:        var(--code-operator);
  --md-code-hl-punctuation-color:     var(--code-punctuation);
  --md-code-hl-generic-color:         var(--theme-text-muted);

  /* Shadows */
  --md-shadow-z1: 0 0.2rem 0.5rem rgba(0,0,0,0.05), 0 0 0.05rem rgba(0,0,0,0.1);
  --md-shadow-z2: 0 0.2rem 0.5rem rgba(0,0,0,0.1), 0 0 0.05rem rgba(0,0,0,0.25);
  --md-shadow-z3: 0 0.2rem 0.5rem rgba(0,0,0,0.2), 0 0 0.05rem rgba(0,0,0,0.35);
}


/* ==========================================================================
   SECTION 3 — COMPONENT COLOR OVERRIDES
   Colors only. No sizing, spacing, or structural changes.
   All values resolve via --theme-* so both schemes work automatically.
   ========================================================================== */

/* -- Bold text color -- */
strong { color: var(--theme-text-bold); }

/* -- Heading colors and weights (h1–h6) -- */
.md-typeset h1 { color: var(--h1-color); font-weight: 800; }
.md-typeset h2 { color: var(--h2-color); font-weight: 700; }
.md-typeset h3 { color: var(--h3-color); font-weight: 600; }
.md-typeset h4 { color: var(--h4-color); font-weight: 600; }
.md-typeset h5 { color: var(--h5-color); font-weight: 600; }
.md-typeset h6 { color: var(--h6-color); font-weight: 600; }

/* -- Link hover color -- */
.md-typeset a:hover { color: var(--theme-accent-hover); }

/* -- Sidebar nav: section label color -- */
.md-nav__item--section > .md-nav__link[for] {
  color: var(--theme-nav-title);
  font-weight: 700;
}

/* -- Sidebar nav: title color -- */
.md-nav__title { color: var(--theme-text-bold); }

/* -- Sidebar nav: active page highlight -- */
.md-nav__item--active > .md-nav__link { color: var(--theme-link-active); }

/* -- Admonition/details left border colors by type -- */
.md-typeset :is(.admonition, details):is(.note, .info)      { border-color: var(--status-info); }
.md-typeset :is(.admonition, details):is(.tip, .success)    { border-color: var(--status-success); }
.md-typeset :is(.admonition, details).warning               { border-color: var(--status-warning); }
.md-typeset :is(.admonition, details):is(.danger, .failure) { border-color: var(--status-danger); }
.md-typeset :is(.admonition, details).example               { border-color: var(--status-special); }

/* -- Table header background and hover row highlight -- */
.md-typeset table:not([class]) th { background-color: var(--theme-bg-highlight); color: var(--theme-text-bold); }
.md-typeset table:not([class]) tr:hover { background-color: var(--theme-bg-highlight); }

/* -- Search result highlight color -- */
.md-search-result mark { color: var(--theme-accent-hover); background-color: transparent; }

/* -- Scrollbar track and thumb colors -- */
.md-content { scrollbar-color: var(--theme-accent-main) var(--theme-bg-surface); scrollbar-width: thin; }

/* -- Footer link colors -- */
.md-footer a { color: var(--theme-text-muted); }
.md-footer a:hover { color: var(--theme-accent-hover); }