/* Base theme colors - this block does not appear in m.css */
.poxy-theme-light
{
  --theme-hue: 210;
  --theme-saturation: 100%;
  --theme-luminosity: 50%;
  --theme-color:  hsl(var(--theme-hue), var(--theme-saturation), var(--theme-luminosity));
  --theme-text1: hsl(var(--theme-hue), var(--theme-saturation), 10%);
  --theme-text2: hsl(var(--theme-hue), 30%, 30%);
  --theme-surface1: hsl(var(--theme-hue), 25%, 90%);
  --theme-surface2: hsl(var(--theme-hue), 20%, 99%);
  --theme-surface3: hsl(var(--theme-hue), calc(var(--theme-saturation) * 0.3), 85%); /* footer color */
  --theme-surface4: hsl(var(--theme-hue), 20%, 93%); /* background */
  --theme-surface5: hsl(var(--theme-hue), calc(var(--theme-saturation) * 0.5), 55%); /* header bg color */
  --theme-surface6: hsl(var(--theme-hue), calc(var(--theme-saturation) * 0.5), 68%); /* header active link bg color */
  --theme-surface7: hsl(var(--theme-hue), var(--theme-saturation), 90%); /* header active link color */
  --theme-surface8: hsl(var(--theme-hue), calc(var(--theme-saturation) * 0.8), 50%); /* link color */
}

.poxy-theme-light { /* NOTE: in vanilla m.css this is the :root element */
  /* Text properties */
  --font: 'Source Sans Pro', sans-serif;
  --code-font: 'Source Code Pro', monospace;
  --font-size: 16px;
  --code-font-size: 0.9em; /* *not* rem, so it follows surrounding font size */
  --line-height: normal;
  --paragraph-indent: 1.5rem;
  --paragraph-align: justify;
  --link-decoration: underline;
  --link-decoration-nav: none;
  --link-decoration-heading: none;
  --nav-brand-case: uppercase;
  --nav-menu-case: none;
  --nav-heading-case: uppercase;
  --nav-categories-case: lowercase;
  --landing-header-case: lowercase;
  --heading-font-weight: 600;

  /* Shapes */
  --border-radius: 0.2rem;

  /* Basics */
  --background-color: var(--theme-surface4);
  --color: var(--theme-text1);
  --line-color: var(--theme-surface6);
  --link-color: var(--theme-surface8);
  --link-active-color: var(--theme-text2);
  --mark-color: #2f83cc;
  --mark-background-color: #c7cf2f;
  --button-background-color: #22272e;

  /* Code */
  --code-color: var(--theme-text1);
  --code-background-color: var(--theme-surface2);
  --code-note-background-color: hsla(var(--theme-hue), var(--theme-saturation), 99%, 0.7);

  /* Console */
  --console-color: #fcfcfc;
  --console-background-color: #1a1c1d;

  /* Header */
  --header-border-width: 0 0 0.25rem 0;
  --header-color: var(--theme-surface1);
  --header-breadcrumb-color: var(--theme-surface1);
  --header-background-color: var(--theme-surface5);
  --header-background-color-landing: rgba(34, 39, 46, 0.75);
  --header-background-color-jumbo: rgba(34, 39, 46, 0.25);
  --header-link-color: var(--theme-surface2);
  --header-link-active-color: var(--theme-surface7);
  --header-link-current-color: var(--theme-surface7);
  --header-link-active-background-color: var(--theme-surface6);
  --header-link-active-background-color-semi: #ebeaea80;

  /* Footer */
  --footer-font-size: 0.85rem;
  --footer-color: var(--theme-text2);
  --footer-background-color: var(--theme-surface3);
  --footer-link-color: var(--theme-text1);
  --footer-link-active-color:var(--theme-text2);

  /* Cover image */
  --cover-image-background-color: #0f1217;

  /* Search (used only by m-documentation.css) */
  --search-overlay-color: hsla(var(--theme-hue), calc(var(--theme-saturation) * 0.5), 75%, 85%);
  --search-background-color: var(--theme-surface4);

  /* Article */
  --article-header-color: #f0f0f0;
  --article-footer-color: #c5c5c5;
  --article-heading-color: var(--theme-surface8);
  --article-heading-active-color: var(--theme-text2);

  /* Right navigation panel */
  --navpanel-link-color: #ffffff;
  --navpanel-link-active-color: #5787EF;

  /* Plots */
  --plot-background-color: #ced8de;
  --plot-error-color: #ffffff;

  /* Colored components */
  --default-color: var(--theme-text1);
  --default-link-active-color: var(--link-active-color);
  --default-filled-color: #151414;
  --default-filled-background-color: var(--theme-surface3);
  --default-filled-link-color: #134ECD;
  --default-filled-link-active-color: #5787EF;

  --primary-hue: var(--theme-hue);
  --primary-saturation: var(--theme-saturation);
  --primary-luminosity: calc(var(--theme-luminosity) * 1.05);
  --primary-color:  hsl(var(--primary-hue), var(--primary-saturation), var(--primary-luminosity));
  --primary-link-active-color: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-luminosity) * 0.7));
  --primary-filled-color: hsl(var(--primary-hue), var(--primary-saturation), 25%);
  --primary-filled-background-color:  hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-luminosity) * 1.7));
  --primary-filled-link-color: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-filled-link-active-color: var(--primary-filled-color);

  --success-hue: 138;
  --success-saturation: 40%;
  --success-luminosity: 45%;
  --success-color: hsl(var(--success-hue), var(--success-saturation), var(--success-luminosity));
  --success-link-active-color: hsl(var(--success-hue), var(--success-saturation), calc(var(--success-luminosity) * 0.7));
  --success-filled-color: hsl(var(--success-hue), var(--success-saturation), 25%);
  --success-filled-background-color:  hsl(var(--success-hue), calc(var(--success-saturation) * 0.9), calc(var(--success-luminosity) * 1.8));
  --success-filled-link-color: hsl(var(--success-hue), calc(var(--success-saturation) * 0.8), 40%);
  --success-filled-link-active-color: var(--success-filled-color);

  --warning-hue: 53;
  --warning-saturation: 50%;
  --warning-luminosity: 44%;
  --warning-color: hsl(var(--warning-hue), var(--warning-saturation), var(--warning-luminosity));
  --warning-link-active-color: hsl(var(--warning-hue), var(--warning-saturation), calc(var(--warning-luminosity) * 0.7));
  --warning-filled-color: hsl(var(--warning-hue), var(--warning-saturation), 20%);
  --warning-filled-background-color:  hsl(var(--warning-hue),  calc(var(--warning-saturation) * 0.8), calc(var(--warning-luminosity) * 1.8));
  --warning-filled-link-color: hsl(var(--warning-hue), calc(var(--warning-saturation) * 0.6), 40%);
  --warning-filled-link-active-color: var(--warning-filled-color);

  --danger-hue: 0;
  --danger-saturation: 70%;
  --danger-luminosity: 50%;
  --danger-color: hsl(var(--danger-hue), var(--danger-saturation), var(--danger-luminosity));
  --danger-link-active-color: hsl(var(--danger-hue), var(--danger-saturation), calc(var(--danger-luminosity) * 0.7));
  --danger-filled-color: hsl(var(--danger-hue), var(--danger-saturation), 25%);
  --danger-filled-background-color:  hsl(var(--danger-hue),  calc(var(--danger-saturation) * 0.8), calc(var(--danger-luminosity) * 1.75));
  --danger-filled-link-color: hsl(var(--danger-hue), calc(var(--danger-saturation) * 0.6), 50%);
  --danger-filled-link-active-color: var(--danger-filled-color);

  --info-hue: 209;
  --info-saturation: 62%;
  --info-luminosity: 50%;
  --info-color: hsl(var(--info-hue), var(--info-saturation), var(--info-luminosity));
  --info-link-active-color: hsl(var(--info-hue), var(--info-saturation), calc(var(--info-luminosity) * 0.7));
  --info-filled-color: hsl(var(--info-hue), var(--info-saturation), 25%);
  --info-filled-background-color:  hsl(var(--info-hue), calc(var(--info-saturation) * 0.8), calc(var(--info-luminosity) * 1.7));
  --info-filled-link-color: hsl(var(--info-hue), calc(var(--info-saturation) * 0.6), 50%);
  --info-filled-link-active-color: var(--info-filled-color);

  --dim-hue: 0;
  --dim-saturation: 0%;
  --dim-luminosity: 48%;
  --dim-color: hsl(var(--dim-hue), var(--dim-saturation), var(--dim-luminosity));
  --dim-link-color: #292929;
  --dim-link-active-color: hsl(var(--dim-hue), var(--dim-saturation), calc(var(--dim-luminosity) * 0.7));
  --dim-filled-color: #656565;
  --dim-filled-background-color: #d3d3d3;
  --dim-filled-link-color: #292929;
  --dim-filled-link-active-color: #7c7c7c;
  --dim-button-active-color: #292929;
}
