/* KhataOS docs site: brand colours and the home page hero.
   Colours come from branding/README.md (the app's Ledger theme). */

/* Brand palette for Material (primary: custom, accent: custom). */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #2b2f77;
  --md-primary-fg-color--light: #3f45a8;
  --md-primary-fg-color--dark: #1f2259;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #a5580e;
  --md-accent-fg-color--transparent: rgba(199, 106, 18, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}
/* On dark, indigo text is too dark to read: use periwinkle and light marigold. */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-typeset-a-color: #8f96ff;
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #f2a65a;
}

/* Home page hero, and the short download page that points to the website. */
:root {
  --kd-pick-bg: #f5f3ee;
  --kd-btn-bg: #2b2f77;
  --kd-btn-fg: #ffffff;
  --kd-btn-hover: #3f45a8;
  --kd-focus: #c76a12;
}
[data-md-color-scheme="slate"] {
  --kd-pick-bg: #23263b;
  --kd-btn-bg: #8f96ff;
  --kd-btn-fg: #14151c;
  --kd-btn-hover: #aab0ff;
  --kd-focus: #f2a65a;
}

.md-typeset .kd-hero {
  margin: 0 0 2em;
  padding: 1.6em 1.2em;
  border-radius: 0.8em;
  background: var(--kd-pick-bg);
  text-align: center;
}
.md-typeset .kd-hero p {
  margin: 0 0 0.9em;
}
.md-typeset .kd-hero p:last-child {
  margin-bottom: 0;
}
.md-typeset .kd-hero img {
  width: 15em;
  max-width: 80%;
  height: auto;
}
.md-typeset .kd-hero strong {
  font-size: 1.25em;
  line-height: 1.4;
}
.md-typeset .kd-hero a {
  display: inline-block;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0.8em 1.6em;
  border-radius: 0.5em;
  background: var(--kd-btn-bg);
  color: var(--kd-btn-fg);
  font-size: 1.1em;
  font-weight: 700;
  text-decoration: none;
}
.md-typeset .kd-hero a:hover,
.md-typeset .kd-hero a:focus {
  background: var(--kd-btn-hover);
  color: var(--kd-btn-fg);
}

.md-typeset .kd-hero a:focus-visible {
  outline: 3px solid var(--kd-focus);
  outline-offset: 3px;
}
/* The second link in the hero: an outlined button. */
.md-typeset .kd-hero a.kd-alt {
  margin-left: 0.4em;
  background: transparent;
  color: var(--md-typeset-a-color);
  box-shadow: inset 0 0 0 1px currentColor;
}
.md-typeset .kd-hero a.kd-alt:hover,
.md-typeset .kd-hero a.kd-alt:focus {
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-typeset-a-color);
}