/********************************************************************/
/* THEME: Dark */
/********************************************************************/
:root {
  /******************************/
  /* Core colors (single source) */
  /******************************/
  --bg-0: #121212;
  --bg-1: #1e1e1e;
  --bg-2: #2c2c2c;

  --txt-0: #f8f9fa;
  --txt-1: #bbb;

  --border-0: #444;

  --brand: #81cfff;
  --brand-hover: #b3e0ff;

  --highlight: #fab22d; /* hover-navbar */
  --on-highlight: #000;

  --success-soft: rgba(27, 197, 50, 0.2);
  --success-strong: #15803d;

  --bs-primary-bg: #0d6efd;
  --bs-primary-border: #0b5ed7;

  /******************************/
  /* Semantics (use everywhere) */
  /******************************/
  --ui-bg: var(--bg-0);
  --ui-surface: var(--bg-1);
  --ui-surface-2: var(--bg-2);

  --ui-text: var(--txt-0);
  --ui-text-muted: var(--txt-1);

  --ui-border: var(--border-0);
  --ui-divider: var(--ui-border);

  --ui-link: var(--brand);
  --ui-link-hover: var(--brand-hover);

  --ui-hover: var(--highlight);
  --ui-hover-text: var(--on-highlight);

    /******************************/
  /* Button */
  /******************************/
  --button-border: var(--txt-0);
  --button-color: var(--ui-text);

  --button-publish-background: var(--success-soft);
  --button-publish-background-hover: var(--success-strong);

  --button-display-border: var(--bs-primary-bg);
  --button-display-color: var(--bs-primary-bg);
  --button-display-background-hover: var(--bs-primary-bg);
  --button-display-color-hover: var(--txt-0);

  /******************************/
  /* Global tokens */
  /******************************/
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 14px;

  --shadow-sm: 0 0 10px rgba(255,255,255,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg: 0 6px 20px rgba(0,0,0,0.10);

  --t-fast: .15s ease;
  --t-med: .30s ease;

  --overlay-bg: rgba(0,0,0,0.65);
  --overlay-blur: 2px;
  --overlay-z: 1060;

  /******************************/
  /* Common UI building blocks */
  /******************************/
  --card-radius: var(--radius-lg);
  --media-radius: var(--card-radius);
  --card-hover-translate-y: -8px;
  --card-media-hover-brightness: 85%;

  --btn-radius: 0.65rem;
  --btn-border: #aaa; /* falls du’s später themebar willst → eigene Variable behalten */

  /******************************/
  /* Component: Footer */
  /******************************/
  --footer-icon-size: 1.15rem;
  --footer-icon-gap: 1.1rem;
  --footer-divider-width: 220px;
  --footer-dot-opacity: 0.6;

  /******************************/
  /* Component: Hero/Home */
  /******************************/
  --hero-max-h: 90vh;
  --hero-min-h: 30vh;
  --hero-max-h-mobile: 75vh;
  --hero-overlay: rgba(0,0,0,0.10);

  /******************************/
  /* Component: TOC */
  /******************************/
  --toc-radius: var(--radius-lg);
  --toc-border-w: 4px;
  --toc-border: var(--brand);
  --toc-shadow: var(--shadow-sm);

  /******************************/
  /* Component: Comments */
  /******************************/
  --comment-bg: rgba(255,255,255,0.04);
  --comment-border: rgba(255,255,255,0.12);
  --comment-radius: var(--radius-lg);

  --reply-bg: rgba(255,255,255,0.02);
  --reply-border: color-mix(in srgb, var(--ui-border) 70%, transparent);
  --reply-radius: var(--radius-md);

  --comment-meta: #b3bcc8;
  --comment-thread-line: rgba(255,255,255,0.14);

  /******************************/
  /* Component: Search controls (shared) */
  /******************************/
  --search-gap: 0.5rem;
  --search-clear-size: 28px;
  --search-clear-border: rgba(255,255,255,0.35);
  --search-clear-bg-hover: rgba(250,178,45,0.08);

  --search-submit-height: 38px;
  --search-submit-radius: var(--radius-md);

  /******************************/
  /* Component: Map */
  /******************************/
  --map-height-offset: 180px;
  --map-radius: var(--radius-md);
  --map-popup-max-width: 260px;
  --map-popup-img-radius: var(--radius-sm);
  --map-marker-size: 28px;
  --map-marker-shadow: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  --map-marker-image: var(--brand);
  --map-marker-blog: var(--highlight);

  /******************************/
  /* Component: Media Gallery */
  /******************************/
  --gallery-overlay: rgba(0,0,0,0.25);
  --gallery-caption-bg: rgba(0,0,0,0.65);
  --gallery-hover-scale: 1.05;

  /******************************/
  /* Component: Image viewer */
  /******************************/
  --imgviewer-overlay: rgba(0,0,0,0.90);
  --imgviewer-z: 1050;
  --imgviewer-shadow: 0 0 20px rgba(255,255,255,0.15);
  --imgviewer-overlay-bg: rgba(0,0,0,0.9);

  /******************************/
  /* Component: Navbar */
  /******************************/
  --nav-underline-h: 4px;
  --nav-underline-offset: 5px;
  --nav-pad-y-mobile: .75rem;
  --nav-pad-y-desktop: 1rem;
  --nav-link-pad-y: .75rem;
  --nav-logo-h: 48px;
  --nav-logo-h-mobile: 40px;
  --nav-z: 1030;

  --submenu-mobile-border-w: 2px;
  --submenu-mobile-pad-left: 1rem;

  --lang-flag-size: 18px;
  --lang-flag-radius: 2px;

  /******************************/
  /* Component: Quill */
  /******************************/
  --quill-tooltip-bg: var(--ui-surface-2);
  --quill-tooltip-font: 12px;
  --quill-tooltip-radius: var(--radius-sm);
  --quill-tooltip-offset-y: -24px;

  --quill-inactive-bg: rgba(255,255,255,0.02);

  --callout-radius: var(--radius-lg);
  --callout-border-w: 4px;

  --callout-info-bg: rgba(56,132,255,0.10);
  --callout-info-border: #3884ff;

  --callout-note-bg: rgba(0,200,150,0.10);
  --callout-note-border: #00c896;

  --callout-warning-bg: rgba(255,170,0,0.12);
  --callout-warning-border: #ffaa00;
}