@import "./fonts.css";

/* Brand Color Variables */
:root {
    /* Primary brand colors */
    --brand-navy: #001838;
    --brand-dark: #191910;
    --brand-yellow: #FFD432;
    --brand-red: #FF6A38;
    --brand-blue: #5773FF;
    --brand-green: #70C038;

    /* Neutral colors */
    --neutral-white: #F8F6F2;
    --neutral-gray-50: #f8f9fa;
    --neutral-gray-100: #e9ecef;
    --neutral-gray-200: #dee2e6;
    --neutral-gray-700: #495057;
    --neutral-gray-800: #343a40;
    --neutral-gray-900: #212529;

    --gsd-50: #f8f6f2;
    --gsd-100: #f1ede4;
    --gsd-200: #dee0e3;
    --gsd-300: #b2b7bd;
    --gsd-400: #868e93;
    --gsd-500: #5e656e;
    --gsd-600: #383d42;
    --gsd-700: #181f25;
    --gsd-800: #111518;
    --gsd-900: #101519;

    --text-light: var(--brand-navy);
    --text-dark: white;

    --bg-light: var(--neutral-white);
    --bg-dark: var(--gsd-800);

    --content-bg-light: white;
    --content-bg-dark: var(--gsd-700);

    --font-display: 'Moranga';
}

.md-header__topic {
    font-family: var(--font-display), 'serif';
}

/* Light Mode Theme */
[data-md-color-scheme="default"] {
    /* Header - clean white/light gray */
    --md-primary-fg-color: var(--neutral-white);
    --md-primary-fg-color--light: var(--neutral-gray-50);
    --md-primary-fg-color--dark: var(--neutral-gray-100);
    --md-primary-bg-color: var(--brand-navy);
    --md-primary-bg-color--light: var(--neutral-gray-700);

    /* Accent - brand yellow */
    --md-accent-fg-color: var(--brand-navy);
    --md-accent-fg-color--transparent: rgba(0, 24, 56, 0.1);
    --md-accent-bg-color: var(--brand-yellow);
    --md-accent-bg-color--light: rgba(255, 212, 50, 0.2);

    /* Background colors for light mode */
    --md-default-bg-color: var(--bg-light);

    /* Content colors */
    --md-default-fg-color: var(--text-light);

    /* Code highlighting - yellow-focused for YAML */
    --md-code-hl-string-color: #007A55;
    --md-code-hl-name-color: #7008E7;
    --md-code-hl-keyword-color: #007595;
    --md-code-hl-number-color: var(--brand-red);
    --md-code-hl-constant-color: #007A55;
    --md-code-hl-punctuation-color: #27272A;

    /* Links */
    --md-typeset-a-color: var(--brand-blue);

    --md-admonition-bg-color: var(--content-bg-light);
}

/* Dark Mode Theme */
[data-md-color-scheme="slate"] {
    /* Header - dark navy */
    --md-primary-fg-color: var(--brand-navy);
    --md-primary-fg-color--light: #002451;
    --md-primary-fg-color--dark: #001020;
    --md-primary-bg-color: var(--neutral-white);
    --md-primary-bg-color--light: var(--neutral-gray-200);

    /* Accent - brand yellow for dark mode */
    --md-accent-fg-color: var(--brand-yellow);
    --md-accent-fg-color--transparent: rgba(255, 212, 50, 0.1);
    --md-accent-bg-color: var(--brand-navy);
    --md-accent-bg-color--light: rgba(0, 24, 56, 0.2);

    /* Background colors for dark mode */
    --md-default-bg-color: var(--bg-dark);
    --md-default-bg-color--light: #161b22;
    --md-default-bg-color--lighter: #21262d;
    --md-default-bg-color--lightest: #30363d;

    /* Content colors */
    --md-typeset-bg-color: var(--neutral-white);
    --md-default-fg-color: var(--text-dark);

    /* Code highlighting - yellow-focused for YAML */
    --md-code-hl-string-color: #79c0ff;
    --md-code-hl-name-color: #d2a8ff;
    --md-code-hl-keyword-color: #eab40a;
    --md-code-hl-number-color: var(--brand-red);
    --md-code-hl-constant-color: #79c0ff;
    --md-code-hl-punctuation-color: #c9d1d9;

    /* Links */
    --md-typeset-a-color: var(--brand-yellow);

    --md-typeset-code-color: var(--brand-yellow);
}

[data-md-color-scheme="default"] .md-header {
    background-color: white;
    border-bottom: 1px solid var(--gsd-100);
    box-shadow: none;
}

[data-md-color-scheme="slate"] .md-header {
    background-color: var(--gsd-700);
}

[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__topic {
    color: var(--brand-navy);
}

[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__topic {
    color: var(--neutral-white);
}


[data-md-color-scheme="default"] .md-header__button {
    color: var(--brand-navy);
}

[data-md-color-scheme="slate"] .md-header__button {
    color: var(--neutral-white);
}

[data-md-color-scheme="default"] .md-tabs {
    background-color: var(--neutral-gray-50);
}

[data-md-color-scheme="slate"] .md-tabs {
    background-color: #001020;
}

[data-md-color-scheme="default"] .md-tabs__link {
    color: var(--neutral-gray-700);
}

[data-md-color-scheme="slate"] .md-tabs__link {
    color: var(--neutral-gray-200);
}

[data-md-color-scheme="default"] .md-tabs__link--active {
    color: var(--brand-navy);
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
    color: var(--brand-yellow);
}

/* Legacy prefix schemes for backwards compatibility */
[data-md-color-primary=prefix] {
    --md-primary-fg-color: var(--brand-navy);
    --md-primary-fg-color--light: #002451;
    --md-primary-fg-color--dark: #001020;
    --md-primary-bg-color: var(--neutral-white);
    --md-primary-bg-color--light: var(--neutral-gray-200);
}

[data-md-color-accent=prefix] {
    --md-accent-fg-color: var(--brand-yellow);
    --md-accent-fg-color--transparent: rgba(255, 212, 50, 0.1);
    --md-accent-bg-color: var(--brand-navy);
    --md-accent-bg-color--light: rgba(0, 24, 56, 0.2);
}

[data-md-color-primary=prefix-light] {
    --md-primary-fg-color: var(--neutral-white);
    --md-primary-fg-color--light: var(--neutral-gray-50);
    --md-primary-fg-color--dark: var(--neutral-gray-100);
    --md-primary-bg-color: var(--brand-navy);
    --md-primary-bg-color--light: var(--neutral-gray-700);
}

[data-md-color-accent=prefix-light] {
    --md-accent-fg-color: var(--brand-navy);
    --md-accent-fg-color--transparent: rgba(0, 24, 56, 0.1);
    --md-accent-bg-color: var(--brand-yellow);
    --md-accent-bg-color--light: rgba(255, 212, 50, 0.2);
}

.md-nav__item .md-nav__link--active, .md-nav__item .md-nav__link--active code {
    color: var(--md-accent-fg-color);
    font-weight: bold;
}

.md-nav--primary .md-nav__title {
    font-family: var(--font-display), 'serif';
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--text-light);
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title {
    color: var(--text-dark);
}

.md-nav__item--section > .md-nav__link > .md-ellipsis,
.md-nav--secondary > .md-nav__title {
    font-family: var(--font-display), 'serif';
    font-weight: 500;
    font-size: 1rem;
}

.md-nav__item--section > .md-nav__link > .md-ellipsis {
    margin-top: 1rem;
}

[data-md-color-scheme="default"] .md-nav__item--section > .md-nav__link > .md-ellipsis,
[data-md-color-scheme="default"] .md-nav--secondary > .md-nav__title {
    color: var(--text-light);
}

[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link > .md-ellipsis,
[data-md-color-scheme="slate"] .md-nav--secondary > .md-nav__title {
    color: var(--text-dark);
}

.md-header__topic:first-child {
    font-weight: normal;
}

.md-content .md-typeset {
    padding: 0 1.5rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--content-bg-light);
    border: 1px solid var(--gsd-100);

    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

[data-md-color-scheme="slate"] .md-content .md-typeset {
    background: var(--content-bg-dark);
    border: none;
}

.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
    font-family: var(--font-display), serif;
    font-weight: 400;
    padding-top: 0.5rem;
    margin: 0;
}

/* Heading colors - subtle, not aggressive */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 {
    color: var(--text-light);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
    color: var(--text-dark);
}

.md-typeset p {
    text-rendering: optimizeLegibility;
}

/* Search bar styling */
.md-search__form {
    background: none;
}

.md-search__input {
    border-radius: 0.25rem;
}

[data-md-color-scheme="default"] .md-search__input,
[data-md-color-scheme="default"] .md-search-result__meta,
[data-md-color-scheme="default"] .md-search__output {
    background-color: var(--bg-light);
}

[data-md-color-scheme="slate"] .md-search__input,
[data-md-color-scheme="slate"] .md-search-result__meta,
[data-md-color-scheme="slate"] .md-search__output {
    background-color: var(--bg-dark);
}

/*!* Search results tray background *!*/
/* {*/
/*    background-color: white; !* or var(--neutral-white) or any color *!*/
/*}*/

/*{*/
/*    background-color: var(--gsd-700); !* or any color *!*/
/*}*/

/* Individual search result items */
[data-md-color-scheme="default"] .md-search-result__article {
    background-color: white;
}

[data-md-color-scheme="slate"] .md-search-result__article {
    background-color: var(--gsd-700);
}

/* Footer styling */
.md-footer {
    background-color: transparent;
}

.md-footer__inner {
    padding-bottom: 1.5rem;
}

[data-md-color-scheme="default"] .md-footer-meta {
    background-color: white;
    color: var(--text-light);
    border-top: 1px solid var(--gsd-100);
}

[data-md-color-scheme="slate"] .md-footer-meta {
    background-color: var(--gsd-700);
    color: var(--text-dark);
}

[data-md-color-scheme="default"] .md-footer-meta.md-typeset a {
    color: var(--text-light);
}

[data-md-color-scheme="default"] .md-footer-meta.md-typeset a:hover {
    color: var(--text-light);
    opacity: 0.6;
}

.md-footer__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 4rem;
    padding: 0 1rem;
    border-radius: 1rem;
    font-family: var(--font-display), serif;
}

[data-md-color-scheme="default"] .md-footer__link:hover,
[data-md-color-scheme="slate"] .md-footer__link:hover {
    border: 1px solid var(--brand-yellow);
}

[data-md-color-scheme="default"] .md-footer__link {
    color: var(--md-accent-fg-color);
    border: 1px solid var(--gsd-100);
}

[data-md-color-scheme="slate"] .md-footer__link {
    background-color: var(--gsd-700);
    color: var(--text-dark);
}

.md-footer__title {
    padding: 0;
    margin: 0;
}

.prefix-logo {
    transform: scale(0.8);
}

[data-md-color-scheme="default"] .prefix-logo__dark {
    display: none;
}

[data-md-color-scheme="slate"] .prefix-logo__light {
    display: none;
}

[data-md-color-scheme="default"] .md-copyright {
    color: var(--gsd-400);
}

/* Admonition colors using brand palette */
.md-typeset .admonition.note,
.md-typeset details.note {
    border-color: var(--brand-blue);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
    background-color: rgba(87, 115, 255, 0.1);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
    border-color: var(--brand-green);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
    background-color: rgba(112, 192, 56, 0.1);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
    border-color: var(--brand-yellow);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
    background-color: rgba(255, 212, 50, 0.1);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
    border-color: var(--brand-red);
}

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
    background-color: rgba(255, 106, 56, 0.1);
}

.md-header__button.md-logo {
    padding: 0;
    margin: 0;
}

.md-header__button.md-logo img, .md-header__button.md-logo svg {
    height: 2.5rem;
}

[dir=ltr] .md-header__title {
    margin-left: 0.5rem;
    font-size: 1.5rem
}

.md-footer-meta__item--prefix-logo {
    height: 2rem;
    margin: 0.5rem 0;
    display: flex;
}

.md-footer-meta__item--prefix-logo img {
    height: 100%;
}

.md-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
}

table code {
    white-space: nowrap;
    word-break: keep-all;
}

/* YAML/code syntax highlighting with Pygments classes */
/* Light mode - darker yellows for readability */
[data-md-color-scheme="default"] .highlight .nt, /* YAML key/tag */
[data-md-color-scheme="default"] .highlight .na, /* attribute name */
[data-md-color-scheme="default"] .highlight .nl { /* label */
    color: #996600;
}

[data-md-color-scheme="default"] .highlight .s, /* string */
[data-md-color-scheme="default"] .highlight .s1, /* single quoted */
[data-md-color-scheme="default"] .highlight .s2, /* double quoted */
[data-md-color-scheme="default"] .highlight .sb, /* backtick */
[data-md-color-scheme="default"] .highlight .sc { /* char */
    color: #b8860b;
}

[data-md-color-scheme="default"] .highlight .p { /* punctuation */
    color: var(--neutral-gray-700);
}

/* Dark mode - brighter yellows */
[data-md-color-scheme="slate"] .highlight .nt,
[data-md-color-scheme="slate"] .highlight .na,
[data-md-color-scheme="slate"] .highlight .nl {
    color: var(--brand-yellow);
}

[data-md-color-scheme="slate"] .highlight .s,
[data-md-color-scheme="slate"] .highlight .s1,
[data-md-color-scheme="slate"] .highlight .s2,
[data-md-color-scheme="slate"] .highlight .sb,
[data-md-color-scheme="slate"] .highlight .sc {
    color: #ffe066;
}

[data-md-color-scheme="slate"] .highlight .p {
    color: var(--neutral-gray-200);
}

/* Dark mode - darker code blocks */
[data-md-color-scheme="slate"] .md-typeset code,
[data-md-color-scheme="slate"] .md-typeset pre > code {
    background-color: var(--bg-dark);
}

.md-typeset code {
    background-color: var(--gsd-50);
    color: var(--text-light);
    border-radius: 0.5rem;
}

[data-md-color-scheme="slate"] .md-typeset code {
    background-color: var(--gsd-600);
    color: var(--gsd-50)
}

[data-md-color-scheme="slate"] .md-typeset a > code {
    color: var(--brand-yellow);
}

[data-md-color-scheme="default"] .md-typeset a > code {
    color: var(--brand-blue);
}

[data-md-color-scheme="default"] .highlight span.filename {
    background-color: var(--gsd-100) !important;
}
[data-md-color-scheme="slate"] .highlight span.filename {
    background-color: var(--gsd-600) !important;
}

.highlight span.filename {
    padding: 0.25rem 0.5rem;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

.md-content__button {
    display:none !important;
}

.md-typeset .md-button {
    border-radius: 0.5rem;
    color: var(--md-accent-fg-color);
}

/* Avoid tab overflow on small screens */
.md-typeset .tabbed-set {
    max-width: 100%;
    overflow-x: auto;
}

.md-typeset .tabbed-labels {
    box-shadow: none;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.md-typeset .tabbed-labels > label {
    white-space: nowrap;
}

/* Text selection color */
::selection {
    background-color: var(--brand-yellow);
    color: var(--brand-navy);
}

::-moz-selection {
    background-color: var(--brand-yellow);
    color: var(--brand-navy);
}

/* TOC banner image */
.md-sidebar--secondary::before {
  content: "";
  display: block;
  width: 100%;
  height: 150px;
  background-image: url('../assets/paxton-builder-mascot.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}

/* Adjust for small screens where TOC is hidden */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--secondary::before {
    display: none;
  }
}