:root {
  --color-primary-h: 210;
  --color-primary-s: 90%;
  --color-primary-l: 52%;

  --color-primary: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));
  --color-primary-light: hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 12%));
  --color-primary-lighter: hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 20%));
  --color-primary-dark: hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 10%));
  --color-primary-darker: hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 20%));
  --color-primary-hover: hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 5%));

  --color-bg: #f2f2f2;
  --color-text: #222;
  --color-text-muted: rgba(0, 0, 0, 0.65);

  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --color-divider: rgba(0, 0, 0, 0.12);

  --card-bg: #fff;
  --sidebar-bg: var(--card-bg);

  --dropdown-bg: var(--card-bg);
  --dropdown-text: var(--color-text);
  --dropdown-hover-bg: rgba(0, 0, 0, 0.05);

  --banner-gradient: linear-gradient(
    135deg,
    hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 15%)),
    hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 15%))
  );

  --sidebar-label-bg: var(--color-primary-darker);
  --sidebar-label-text: #fff;

  --meta-nav-bg: hsl(
    var(--color-primary-h)
    calc(var(--color-primary-s) * 0.35)
    min(96%, calc(var(--color-primary-l) + 32%))
  );

  --meta-nav-text: var(--color-primary-darker);

  --header-bg: var(--card-bg);
  --header-text: var(--color-text);
  --header-border: rgba(0, 0, 0, 0.06);

  --nav-bg: var(--color-primary-darker);
  --nav-text: #fff;
  --nav-hover-bg: var(--color-primary-dark);
  --nav-divider: hsla(var(--color-primary-h), 20%, 90%, 0.35);

  --nav-drawer-backdrop: rgba(0, 0, 0, 0.42);
  --nav-drawer-panel-bg: var(--card-bg);
  --nav-drawer-panel-text: var(--color-text);
  --nav-drawer-panel-border: var(--color-border-subtle);

  --hero-panel-bg: hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 12%) / 0.72);
  --hero-panel-text: #fff;

  --hero-cta-primary-bg: rgba(255, 255, 255, 0.95);
  --hero-cta-primary-border: rgba(255, 255, 255, 0.95);
  --hero-cta-primary-text: var(--color-primary-dark);

  --hero-cta-secondary-bg: transparent;
  --hero-cta-secondary-border: rgba(255, 255, 255, 0.85);
  --hero-cta-secondary-text: #fff;

  --nav-toggle-bg: rgba(0, 0, 0, 0.06);
  --nav-toggle-bg-hover: rgba(0, 0, 0, 0.10);
  --nav-toggle-line: rgba(0, 0, 0, 0.85);

  --nav-toggle-bg-on-dark: rgba(255, 255, 255, 0.14);
  --nav-toggle-bg-hover-on-dark: rgba(255, 255, 255, 0.22);
  --nav-toggle-line-on-dark: rgba(255, 255, 255, 0.95);

  --footer-bg: #fafafa;
  --footer-text: #888;
  --footer-border: #eee;
}

.c-hero-panel {
  background: var(--hero-panel-bg);
  color: var(--hero-panel-text);
}

.c-hero-panel > div:last-child > a:first-child {
  background: var(--hero-cta-primary-bg);
  border-color: var(--hero-cta-primary-border);
  color: var(--hero-cta-primary-text);
}

.c-hero-panel > div:last-child > a:nth-child(2) {
  background: var(--hero-cta-secondary-bg);
  border-color: var(--hero-cta-secondary-border);
  color: var(--hero-cta-secondary-text);
}

.c-nav {
  background: var(--nav-bg);
  color: var(--nav-text);
}

.c-nav-link {
  color: var(--nav-text);
}

.c-nav-link:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-text);
}

.c-nav-sublist {
  background: var(--dropdown-bg);
}

.c-nav-sublink {
  color: var(--dropdown-text);
}

.c-nav-sublink:hover {
  background: var(--dropdown-bg);
  color: var(--nav-hover-bg);
}

.c-site-header .c-nav-toggle {
  background: var(--nav-toggle-bg);
}

.c-site-header .c-nav-toggle:hover {
  background: var(--nav-toggle-bg-hover);
}

.c-site-header .c-nav-toggle-lines span {
  background: var(--nav-toggle-line);
}

.c-nav .c-nav-toggle {
  background: var(--nav-toggle-bg-on-dark);
}

.c-nav .c-nav-toggle:hover {
  background: var(--nav-toggle-bg-hover-on-dark);
}

.c-nav .c-nav-toggle-lines span {
  background: var(--nav-toggle-line-on-dark);
}

.c-nav-drawer-backdrop {
  background: var(--nav-drawer-backdrop);
}

.c-nav-drawer-panel {
  background: var(--nav-drawer-panel-bg);
  color: var(--nav-drawer-panel-text);
  border-left: 1px solid var(--nav-drawer-panel-border);
}

.c-nav-drawer-panel .c-nav-link,
.c-nav-drawer-panel .c-nav-sublink {
  color: var(--nav-drawer-panel-text);
}

.c-nav-drawer-panel .c-nav-link:hover,
.c-nav-drawer-panel .c-nav-sublink:hover {
  background: var(--dropdown-hover-bg);
}

.c-meta-nav {
  color: var(--meta-nav-text);
  border-bottom: 1px solid var(--nav-bg);
}

.c-meta-nav-link {
  color: var(--meta-nav-text);
}

.c-site-header {
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--header-border);
}

.l-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
}