/* Hellas Theme Variables */

:root {
    /* Brand Colors */
    --hellas-black: #1C1C1C;
    --hellas-cool-grey: #767C8A;
    --hellas-cool-light-grey: #D5E1F7;
    --hellas-white: #EAEEF4;
    --hellas-yellow: #FFEA29;
    --hellas-pale-yellow: #FFFFA6;

    /* Derivative Colors for Better Contrast */
    --hellas-darker-yellow: #B7A600; /* Darker yellow for light backgrounds */

    /* Gradient Colors - Defined for potential use in custom components */
    --hellas-yellow-grad-start: #FFEA29;
    --hellas-yellow-grad-end: #FFFFA6;
    --hellas-light-grad-start: #767C8A;
    --hellas-light-grad-end: #D5E1F7;
    --hellas-dark-grad-start: #1C1C1C;
    --hellas-dark-grad-end: #767C8A;

    --sidebar-target-width: 300px;
    --sidebar-width: min(var(--sidebar-target-width), 80vw);
    --sidebar-resize-indicator-width: 8px;
    --sidebar-resize-indicator-space: 2px;
    --page-padding: 15px;
    --content-max-width: 750px;
    --menu-bar-height: 50px;
    --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
    --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
}

/* Themes */

/* Hellas Dark Theme */
.hellas-dark {
    --bg: var(--hellas-black);
    --fg: var(--hellas-white);

    --sidebar-bg: var(--hellas-black);
    --sidebar-fg: var(--hellas-cool-light-grey);
    --sidebar-non-existant: var(--hellas-cool-grey);
    --sidebar-active: var(--hellas-yellow);
    --sidebar-spacer: #2d334f;

    --scrollbar: var(--hellas-cool-grey);

    --icons: var(--hellas-cool-grey);
    --icons-hover: var(--hellas-cool-light-grey);

    --links: var(--hellas-yellow);

    --inline-code-color: var(--hellas-darker-yellow);

    --theme-popup-bg: var(--hellas-black);
    --theme-popup-border: var(--hellas-cool-grey);
    --theme-hover: #2a2a2a;

    --quote-bg: #2a2a2a;
    --quote-border: var(--hellas-cool-grey);

    --warning-border: var(--hellas-yellow);

    --table-border-color: var(--hellas-cool-grey);
    --table-header-bg: #2a2a2a;
    --table-alternate-bg: #252525;

    --searchbar-border-color: var(--hellas-cool-grey);
    --searchbar-bg: #252525;
    --searchbar-fg: var(--hellas-white);
    --searchbar-shadow-color: var(--hellas-pale-yellow);
    --searchresults-header-fg: var(--hellas-cool-grey);
    --searchresults-border-color: var(--hellas-cool-grey);
    --searchresults-li-bg: #252525;
    --search-mark-bg: var(--hellas-yellow);

    --color-scheme: dark;

    /* Same as `--icons` */
    --copy-button-filter: invert(50%) sepia(9%) saturate(333%) hue-rotate(182deg) brightness(92%) contrast(84%);
    /* Same as `--sidebar-active` */
    --copy-button-filter-hover: invert(93%) sepia(98%) saturate(1529%) hue-rotate(324deg) brightness(109%) contrast(96%);

    --footnote-highlight: var(--hellas-yellow);
}

/* Hellas Light Theme */
.hellas-light {
    --bg: var(--hellas-white);
    --fg: var(--hellas-black);

    --sidebar-bg: var(--hellas-cool-light-grey);
    --sidebar-fg: var(--hellas-black);
    --sidebar-non-existant: var(--hellas-cool-grey);
    --sidebar-active: var(--hellas-darker-yellow); /* Darker yellow for better contrast */
    --sidebar-spacer: #c5d0e6;

    --scrollbar: var(--hellas-cool-grey);

    --icons: var(--hellas-cool-grey);
    --icons-hover: var(--hellas-black);

    --links: var(--hellas-darker-yellow); /* Darker yellow for better contrast */

    --inline-code-color: var(--hellas-darker-yellow); /* Darker yellow for better contrast */

    --theme-popup-bg: var(--hellas-white);
    --theme-popup-border: var(--hellas-cool-grey);
    --theme-hover: var(--hellas-cool-light-grey);

    --quote-bg: var(--hellas-cool-light-grey);
    --quote-border: var(--hellas-cool-grey);

    --warning-border: var(--hellas-darker-yellow); /* Darker yellow for better contrast */

    --table-border-color: var(--hellas-cool-grey);
    --table-header-bg: var(--hellas-cool-light-grey);
    --table-alternate-bg: #e0e9f3;

    --searchbar-border-color: var(--hellas-cool-grey);
    --searchbar-bg: var(--hellas-cool-light-grey);
    --searchbar-fg: var(--hellas-black);
    --searchbar-shadow-color: var(--hellas-darker-yellow); /* Darker yellow for better contrast */
    --searchresults-header-fg: var(--hellas-cool-grey);
    --searchresults-border-color: var(--hellas-cool-grey);
    --searchresults-li-bg: var(--hellas-cool-light-grey);
    --search-mark-bg: var(--hellas-darker-yellow); /* Darker yellow for better contrast */

    --color-scheme: light;

    /* Same as `--icons` */
    --copy-button-filter: invert(50%) sepia(9%) saturate(333%) hue-rotate(182deg) brightness(92%) contrast(84%);
    /* Same as `--icons-hover` */
    --copy-button-filter-hover: invert(15%) sepia(3%) saturate(10%) hue-rotate(314deg) brightness(96%) contrast(88%);

    --footnote-highlight: var(--hellas-darker-yellow); /* Darker yellow for better contrast */
}

/* A hack to override menu title - otherwise we have to copy *all* of the chrome.css from the default font */
.menu-title {
  font-family: var(--heading-font) !important;
}

/* hide theme switcher */
#theme-toggle { display: none !important; }


/* Hackery to put logo top left */
.sidebar-scrollbox {
  margin-top: 4rem;
}
.sidebar::before {
  content: "";
  position: absolute;
  top: 1rem;
  width: 100%;
  height: 3em;      /* adjust height as needed */
  background: url("../images/Hellas_Logotype_Black.svg") no-repeat center;
  pointer-events: none;
  z-index: 100;
}


/* Dark theme: swap to white logo */
@media (prefers-color-scheme: dark) {
  .sidebar::before {
    background-image: url("../images/Hellas_Logotype_White.svg");
  }
}