/* ---- Brand tokens: plug in your exact hex codes here ---- */
:root {
  --ps-blue: #0B5FFF;       /* primary brand blue */
  --ps-blue-600: #084CCF;   /* darker hover/active */
  --ps-cyan: #00D3FF;       /* accent color (links, highlights) */
  --ps-cyan-600: #00A7CC;   /* darker accent for hover */
  --ps-text: #0b1020;       /* body text on light */
}

/* ---- Light mode (scheme: default) ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ps-blue);
  --md-primary-fg-color--light: color-mix(in srgb, var(--ps-blue), white 25%);
  --md-primary-fg-color--dark:  var(--ps-blue-600);

  --md-accent-fg-color: var(--ps-cyan);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--ps-cyan), transparent 80%);

  /* Optional: tune text + surface slightly to match your site’s feel */
  --md-default-fg-color: var(--ps-text);
  --md-default-fg-color--light: color-mix(in srgb, var(--ps-text), white 35%);
}

/* ---- Dark mode (scheme: slate) ---- */
[data-md-color-scheme="slate"] {
  /* Keep dark surfaces, just recolor the brand */
  --md-primary-fg-color: var(--ps-blue);
  --md-primary-fg-color--light: color-mix(in srgb, var(--ps-blue), white 25%);
  --md-primary-fg-color--dark:  var(--ps-blue-600);

  --md-accent-fg-color: var(--ps-cyan);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--ps-cyan), transparent 80%);
}

/* Optional niceties: link + button hovers that match brand */
.md-typeset a:hover { color: var(--ps-cyan-600); }
.md-button--primary { background-color: var(--ps-blue); }
.md-button--primary:hover { background-color: var(--ps-blue-600); }