/* QPN — brand blue + amber. Light-led to match the app (no in-app dark mode).
   Anchors from docs/brand/README.md: #0084DC / #0058AA / #FFC107 / #C88F00. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap');

/* Typography scale (Roboto 400/600/700, mirroring theme.font) */
.md-typeset p, .md-typeset li { font-size: 16px; line-height: 26px; }
.md-typeset h1 { font-weight: 700; letter-spacing: -0.25px; }
.md-typeset h2 { font-weight: 600; }
.md-typeset h3 { font-weight: 600; }
.md-typeset .md-button { font-weight: 600; letter-spacing: 0.1px; }

/* LIGHT MODE (default) — the brand default */
[data-md-color-scheme="default"] {
  /* Header & primary */
  --md-primary-fg-color:          #0084DC; /* brand blue (app colorPrimary) */
  --md-primary-bg-color:          #FFFFFF; /* text on header */
  --md-primary-fg-color--light:   #66B5EA; /* lightened brand blue */
  --md-primary-fg-color--dark:    #0058AA; /* brand blue dark (app colorPrimaryDark) */

  /* Accent (hover, focus, active controls) — gold dark: AA-safe on white */
  --md-accent-fg-color:           #C88F00;

  /* Body links: brand blue misses AA for body-size text on white (3.94:1) —
     use the dark variant; keep the vivid blue for the header banner. */
  --md-typeset-a-color:           #0058AA;

  /* Surfaces */
  --md-default-bg-color:          #F8FBFD; /* cool near-white */
  --md-default-fg-color:          #14212B; /* dark navy text */
  --md-default-fg-color--light:   #3D4F5C; /* secondary text */
  --md-default-fg-color--lighter: #7A8B96; /* hints */
  --md-default-fg-color--lightest:#D7E3EB; /* dividers */

  --md-code-bg-color:             #EBF3F9;

  /* Footer — dark navy anchored to the brand-blue hue */
  --md-footer-bg-color:           #0A2A42;
  --md-footer-bg-color--dark:     #061B2C;
  --md-footer-fg-color:           #F1F6FA;
  --md-footer-fg-color--light:    #9FB3C0;
}

/* DARK MODE (slate) */
[data-md-color-scheme="slate"] {
  --md-hue: 207; /* keep Material's derived tokens in the brand-blue hue */

  --md-primary-fg-color:          #0058AA; /* dark brand blue header */
  --md-primary-bg-color:          #FFFFFF; /* text on header */
  --md-primary-fg-color--light:   #66B5EA;
  --md-primary-fg-color--dark:    #003E78;

  --md-accent-fg-color:           #FFC107; /* brand gold pops on dark */
  --md-typeset-a-color:           #66B5EA; /* readable brand blue on dark */

  --md-default-bg-color:          #0E1B26; /* deep navy */
  --md-default-fg-color:          #E8EEF3;
  --md-default-fg-color--light:   #B7C4CE;
  --md-default-fg-color--lighter: #7C8B97;
  --md-default-fg-color--lightest:#243645;

  --md-code-bg-color:             #142433;

  --md-footer-bg-color:           #081420;
  --md-footer-bg-color--dark:     #040B12;
  --md-footer-fg-color:           #E8EEF3;
  --md-footer-fg-color--light:    #93A5B1;
}

/* Homepage store-screenshot strip — ready for refreshed store shots */
.screens {
  display: flex; gap: 14px; margin: 1.5rem 0 2rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin;
}
.screens img {
  width: 150px; flex: 0 0 auto; scroll-snap-align: center;
  border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
@media (min-width: 720px) { .screens { justify-content: center; } }

/* Google Play badge on the homepage */
.md-typeset .gplay img { height: 56px; width: auto; }