/* ==========================================================
   Gruvbox Semantic Layer
   (You already define --gb-* variables elsewhere)
   ========================================================== */

:root {
  /* Base surfaces */
  --bg:        var(--gb-dark0);
  --bg-soft:   var(--gb-dark1);
  --bg-hover:  var(--gb-dark2);

  /* Text */
  --fg:        var(--gb-light1);
  --fg-muted:  var(--gb-light4);
  --fg-subtle: var(--gb-light3);

  /* Borders & dividers */
  --border:    var(--gb-dark3);
  --border-strong: var(--gb-dark4);

  /* Accent (green, low saturation usage) */
  --accent:        var(--gb-green);
  --accent-soft:   var(--gb-dark-green);
  --accent-bright: var(--gb-bright-green);

  /* States */
  --focus-ring:    color-mix(in srgb, var(--accent) 40%, transparent);
  --selection:     color-mix(in srgb, var(--accent) 25%, transparent);

  /* Feedback (kept muted) */
  --danger:  var(--gb-red);
  --warning: var(--gb-yellow);
  --info:    var(--gb-blue);
  --success: var(--gb-green);
}

/* ==========================================================
   Pico Variable Overrides
   ========================================================== */

:root {
  /* Backgrounds */
  --pico-background-color: var(--bg);
  --pico-card-background-color: var(--bg-soft);
  --pico-modal-overlay-background-color: color-mix(
    in srgb,
    var(--bg) 85%,
    black
  );

  /* Text */
  --pico-color: var(--fg);
  --pico-muted-color: var(--fg-muted);
  --pico-h1-color: var(--fg);
  --pico-h2-color: var(--fg);
  --pico-h3-color: var(--fg);
  --pico-h4-color: var(--fg);
  --pico-h5-color: var(--fg);
  --pico-h6-color: var(--fg);

  /* Borders */
  --pico-border-color: var(--border);
  --pico-form-element-border-color: var(--border);
  --pico-form-element-active-border-color: var(--accent-soft);

  /* Primary (accent) */
  --pico-primary: var(--accent);
  --pico-primary-hover: var(--accent-bright);
  --pico-primary-focus: var(--focus-ring);
  --pico-primary-inverse: var(--bg);

  /* Secondary stays neutral */
  --pico-secondary: var(--fg-muted);
  --pico-secondary-background: var(--bg-soft);
  --pico-secondary-hover: var(--fg);
  --pico-secondary-hover-background: var(--bg-hover);
  --pico-secondary-inverse: var(--fg);

  /* Forms */
  --pico-form-element-background-color: var(--bg-soft);
  --pico-form-element-color: var(--fg);
  --pico-form-element-placeholder-color: var(--fg-subtle);
  --pico-form-element-focus-color: var(--fg);

  /* Buttons */
  --pico-button-background-color: transparent;
  --pico-button-color: var(--accent);
  --pico-button-hover-background-color: var(--bg-hover);
  --pico-button-hover-color: var(--accent-bright);

  /* Cards */
  --pico-card-border-color: var(--border);
  --pico-card-box-shadow: none;

  /* Code */
  --pico-code-background-color: var(--bg-hover);
  --pico-code-color: var(--accent-soft);

  /* Tables */
  --pico-table-border-color: var(--border);
  --pico-table-row-stripped-background-color: var(--bg-soft);

  /* Selection */
  --pico-selection-background-color: var(--selection);

  --pico-primary-background: var(--accent-soft);
  --pico-primary-hover-background: var(--accent-bright);

  --pico-progress-background-color: var(--bg-soft);

}

/* ==========================================================
   Subtle Enhancements (Optional)
   ========================================================== */

/* Links */
a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-bright);
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Horizontal rules */
hr {
  border-color: var(--border);
}

/* Blockquotes */
blockquote {
  border-left-color: var(--accent-soft);
  color: var(--fg-muted);
}