/* ==========================================================================
   SAIF Shared Documentation Theme
   Deployed via cloud-foundations to docs.saif.com/assets/stylesheets/

   All repos reference this as an absolute URL in mkdocs.yml:
     extra_css:
       - https://docs.saif.com/assets/stylesheets/saif-docs-theme.css

   SAIF Brand Colors (sourced from Mosaic design system):
   - SAIF Evergreen: #4f7e11 (primary green - header, CTAs)
   - SAIF Pacific:   #007acc (secondary blue - links, accents)
   - SAIF Beige:     #f9f7f5 (off-white body background)
   - SAIF Dark:      #323131 (body text)
   - SAIF Danger:    #de1c0b (error/danger)
   - SAIF Warning:   #facb47 (warning)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS - Design System Variables
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     SAIF Brand Colors (from Mosaic all-13.0.0.css)
     ------------------------------------------------------------------------- */
  --saif-evergreen: #4f7e11;
  --saif-evergreen-hover: #436b0e;
  --saif-evergreen-dark: #3f650e;
  --saif-evergreen-light: #7dc623;
  --saif-evergreen-muted: #cad8b8;

  --saif-pacific: #007acc;
  --saif-pacific-hover: #0068ad;
  --saif-pacific-dark: #0062a3;

  --saif-danger: #de1c0b;
  --saif-warning: #facb47;
  --saif-purple: #9352a2;

  /* -------------------------------------------------------------------------
     SAIF Beige (off-white) Scale
     ------------------------------------------------------------------------- */
  --saif-beige-50: #fdfdfd;
  --saif-beige-100: #fcfbfa;
  --saif-beige-200: #f9f7f5;
  --saif-beige-300: #f5f4f1;
  --saif-beige-400: #f2f0ec;
  --saif-beige-500: #efece7;
  --saif-beige-600: #bfbdb9;
  --saif-beige-900: #302f2e;

  /* -------------------------------------------------------------------------
     SAIF Gray Scale
     ------------------------------------------------------------------------- */
  --saif-gray-50: #f2f2f2;
  --saif-gray-100: #e5e5e5;
  --saif-gray-300: #b1b0b0;
  --saif-gray-500: #7d7b7b;
  --saif-gray-600: #646262;
  --saif-gray-700: #4b4a4a;
  --saif-gray-800: #323131;
  --saif-gray-900: #191919;

  /* -------------------------------------------------------------------------
     Spacing Tokens (16px base)
     ------------------------------------------------------------------------- */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-xxl: 2rem;

  /* -------------------------------------------------------------------------
     Font Weight Tokens
     ------------------------------------------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}


/* ==========================================================================
   2. BASE - Theme Overrides
   ========================================================================== */

/* -------------------------------------------------------------------------
   Light Mode Theme Variables
   ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--saif-evergreen);
  --md-primary-fg-color--light: var(--saif-evergreen-light);
  --md-primary-fg-color--dark: var(--saif-evergreen-dark);
  --md-primary-bg-color: #ffffff;

  --md-accent-fg-color: var(--saif-pacific);
  --md-accent-bg-color: var(--saif-pacific);

  --md-default-fg-color: var(--saif-gray-800);
  --md-default-fg-color--light: var(--saif-gray-500);
  --md-default-fg-color--lighter: var(--saif-gray-300);
  --md-default-fg-color--lightest: var(--saif-gray-100);

  --md-default-bg-color: var(--saif-beige-200);
  --md-default-bg-color--light: var(--saif-beige-100);

  --md-code-bg-color: var(--saif-beige-400);
  --md-typeset-a-color: var(--saif-pacific);

  --md-footer-bg-color: var(--saif-beige-900);
  --md-footer-bg-color--dark: var(--saif-gray-900);
}

/* -------------------------------------------------------------------------
   Dark Mode Theme Variables
   ------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--saif-evergreen);
  --md-primary-fg-color--light: var(--saif-evergreen-light);
  --md-primary-fg-color--dark: var(--saif-evergreen-dark);
  --md-primary-bg-color: var(--saif-gray-800);

  --md-accent-fg-color: var(--saif-pacific);
  --md-accent-bg-color: var(--saif-pacific);

  --md-default-bg-color: #1a1a1a;
  --md-default-bg-color--light: #242424;

  --md-code-bg-color: #2d2d2d;
  --md-typeset-a-color: var(--saif-pacific);

  --md-footer-bg-color: #0d0d0d;
  --md-footer-bg-color--dark: #080808;
}

/* -------------------------------------------------------------------------
   Header - Light Mode
   ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .md-header {
  background: var(--saif-evergreen);
  border-bottom: 3px solid var(--saif-evergreen-dark);
}

[data-md-color-scheme="default"] .md-header .md-header__title,
[data-md-color-scheme="default"] .md-header .md-header__title .md-ellipsis,
[data-md-color-scheme="default"] .md-header .md-header__topic .md-ellipsis {
  color: #ffffff;
}

[data-md-color-scheme="default"] .md-header .md-icon,
[data-md-color-scheme="default"] .md-header .md-icon svg {
  color: #ffffff;
  fill: #ffffff;
}

/* -------------------------------------------------------------------------
   Header - Dark Mode
   ------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] .md-header {
  background: var(--saif-gray-800);
  border-bottom: 3px solid var(--saif-evergreen);
}

[data-md-color-scheme="slate"] .md-header .md-header__title,
[data-md-color-scheme="slate"] .md-header .md-header__title .md-ellipsis,
[data-md-color-scheme="slate"] .md-header .md-header__topic .md-ellipsis {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-header .md-icon,
[data-md-color-scheme="slate"] .md-header .md-icon svg {
  color: #ffffff;
  fill: #ffffff;
}

/* -------------------------------------------------------------------------
   Navigation Tabs - Light Mode
   ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .md-tabs {
  background: var(--saif-evergreen-hover);
}

[data-md-color-scheme="default"] .md-tabs .md-tabs__link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--font-weight-medium);
}

[data-md-color-scheme="default"] .md-tabs .md-tabs__link:hover {
  color: #ffffff;
}

[data-md-color-scheme="default"] .md-tabs .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs .md-tabs__item--active .md-tabs__link {
  color: #ffffff;
  font-weight: var(--font-weight-semibold);
}

/* -------------------------------------------------------------------------
   Navigation Tabs - Dark Mode
   ------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] .md-tabs {
  background: rgba(0, 0, 0, 0.2);
}

[data-md-color-scheme="slate"] .md-tabs .md-tabs__link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--font-weight-medium);
}

[data-md-color-scheme="slate"] .md-tabs .md-tabs__link:hover {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-tabs .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs .md-tabs__item--active .md-tabs__link {
  color: var(--saif-evergreen-light);
  font-weight: var(--font-weight-semibold);
}

/* -------------------------------------------------------------------------
   Sidebar Navigation
   ------------------------------------------------------------------------- */
.md-nav .md-nav__link--active {
  color: var(--saif-evergreen);
  font-weight: var(--font-weight-semibold);
}

[data-md-color-scheme="slate"] .md-nav .md-nav__link--active {
  color: var(--saif-evergreen-light);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.md-footer {
  background: var(--saif-beige-900);
}

.md-footer-meta {
  background: var(--saif-gray-900);
}