/* Theme Color Tokens
 * Core color definitions used throughout the site
 */
:root {
  /* Brand Colors */
  --oc-green: #c8ff02;
  --oc-green-light: #e5fd07;
  --oc-purple: #6e4ba2;
  --oc-purple-light: #b6a6d0;
  --oc-navy: #1e2356;
  --oc-navy-light: #8f92aa;
  --oc-grey: #939894;
  --oc-grey-light: #c9ccca;

  /* Neutral Colors */
  --oc-white: #ffffff;
  --oc-grey-dark: #2e2e2e;
  --oc-dark-mode: #1a1b1e;

  /* Accent Colors */
  --oc-blue: #266eff;
  --oc-blue-light: #92b9fd;
  --oc-red: #fe4622;
  --oc-red-light: #fea292;
  --oc-orange: #ff7300;
  --oc-orange-light: #feb883;
  --oc-turquoise: #78febf;
  --oc-turquoise-light: #bdfee0;
  --oc-pink: #f000ff;
  --oc-pink-light: #f685fd;
  --oc-yellow: #fef200;
  --oc-yellow-light: #fff786;
}

/* Shared Theme Styles
 * Common styles used across both light and dark themes
 */
[data-md-color-scheme="opencast-light"],
[data-md-color-scheme="opencast-dark"] {
  /* Navigation Styles */
  --md-primary-bg-color: var(--oc-white);

  /* Active Link Styles */
  .md-nav__item .md-nav__link--active {
    color: var(--md-accent-fg-color);
  }
}

/* Light Theme Configuration */
[data-md-color-scheme="opencast-light"] {
  /* Primary Colors */
  --md-primary-fg-color: var(--oc-navy);
  --md-accent-fg-color: var(--oc-purple);

  /* Content Colors */
  --md-default-bg-color: var(--oc-white);
  --md-typeset-color: var(--oc-grey-dark);

  /* Interactive Elements */
  --md-typeset-a-color: var(--oc-purple);
  --md-nav-link-color--active: var(--oc-purple);
}

/* Dark Theme Configuration */
[data-md-color-scheme="opencast-dark"] {
  /* Primary Colors */
  --md-primary-fg-color: var(--oc-navy);
  --md-accent-fg-color: var(--oc-green);

  /* Content Colors */
  --md-default-bg-color: var(--oc-dark-mode);
  --md-typeset-color: var(--oc-white);
  --md-default-fg-color--light: var(--oc-green);

  /* Interactive Elements */
  --md-typeset-a-color: var(--oc-green);
  --md-nav-link-color--active: var(--oc-green);

  /* Blockquote Styling */
  .md-typeset blockquote {
    border-left-color: var(--oc-green);
  }

  /* Table Styling */
  .md-typeset {
    table {
      border-color: var(--oc-green);

      th {
        color: var(--oc-green);
        border-bottom-color: var(--oc-green);
      }

      td {
        border-color: var(--oc-green);
      }
    }
  }

  /* Search Styling */
  .md-search__input {
    color: var(--oc-white);
  }

  .md-search__input:focus {
    background-color: var(--oc-white);
    color: var(--oc-grey-dark);
  }

  .md-search__input:focus::placeholder {
    color: var(--oc-grey-dark);
    opacity: 0.7;
  }

  .md-search-result__title {
    color: var(--oc-white);
  }

  .md-search-result__terms {
    color: var(--oc-white);
  }

  .md-search-result .md-typeset h1,
  .md-search-result .md-typeset h2,
  .md-search-result .md-typeset li {
    color: var(--oc-white);
  }
}

.badge.okr .title {
  background-color: var(--oc-purple);
}

.badge.okr .value {
  background-color: var(--oc-green);
  color: var(--oc-grey-dark);
}

.badge.practice .title {
  background-color: var(--oc-blue);
}

.badge.practice .value {
  background-color: var(--oc-grey-dark);
  color: var(--oc-green);
}

.badge.framework .title {
  background-color: var(--oc-orange);
}

.badge.framework .value {
  background-color: var(--oc-grey-dark);
  color: var(--oc-grey-light);
  font-size: 8;
}
.badge {
  height: 30px;
}