/*
 * xadcast brand tokens.
 *
 * Values come from the app's Material 3 colour scheme (androidApp/.../ui/theme/Theme.kt in
 * podcast-app), so the site looks like the app's own icon. Shared by the static pages
 * (index.html, download.html) and by Material pages via extra.css. Do not reference --md-*
 * variables here; this file is loaded outside the theme too.
 */
:root {
  color-scheme: light dark;

  --xc-primary: #004D6B;
  --xc-on-primary: #FFFFFF;
  --xc-primary-container: #B8E6F7;
  --xc-on-primary-container: #001F2B;
  --xc-secondary: #4A6572;
  --xc-secondary-container: #CDE7F0;
  --xc-on-secondary-container: #06202B;
  --xc-bg: #F8FAFB;
  --xc-fg: #191C1E;
  --xc-fg-muted: #3F484C;
  --xc-surface-lowest: #FFFFFF;
  --xc-surface-container: #ECEFF1;
  --xc-surface-container-high: #E6EAEC;
  --xc-outline: #6F797D;
  --xc-outline-variant: #BFC8CC;
  --xc-ad: #F59E0B;
  --xc-danger: #DC2626;

  --xc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --xc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --xc-radius: 12px;
  --xc-radius-lg: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --xc-primary: #4FA0BA;
    --xc-on-primary: #00323F;
    --xc-primary-container: #004D6B;
    --xc-on-primary-container: #B8E6F7;
    --xc-secondary: #9FB4C0;
    --xc-secondary-container: #23454F;
    --xc-on-secondary-container: #CDE7F0;
    --xc-bg: #0F1416;
    --xc-fg: #DEE3E6;
    --xc-fg-muted: #BFC8CC;
    --xc-surface-lowest: #0A0F11;
    --xc-surface-container: #1B2023;
    --xc-surface-container-high: #262B2E;
    --xc-outline: #899297;
    --xc-outline-variant: #3F484C;
  }
}

/*
 * Material's palette toggle stores a choice that overrides the OS preference on Material
 * pages, so the same tokens are pinned to the chosen scheme there. The static pages carry
 * no data-md-color-scheme attribute and follow the media query above.
 */
[data-md-color-scheme="default"] {
  --xc-primary: #004D6B;
  --xc-on-primary: #FFFFFF;
  --xc-primary-container: #B8E6F7;
  --xc-on-primary-container: #001F2B;
  --xc-secondary: #4A6572;
  --xc-secondary-container: #CDE7F0;
  --xc-on-secondary-container: #06202B;
  --xc-bg: #F8FAFB;
  --xc-fg: #191C1E;
  --xc-fg-muted: #3F484C;
  --xc-surface-lowest: #FFFFFF;
  --xc-surface-container: #ECEFF1;
  --xc-surface-container-high: #E6EAEC;
  --xc-outline: #6F797D;
  --xc-outline-variant: #BFC8CC;
}

[data-md-color-scheme="slate"] {
  --xc-primary: #4FA0BA;
  --xc-on-primary: #00323F;
  --xc-primary-container: #004D6B;
  --xc-on-primary-container: #B8E6F7;
  --xc-secondary: #9FB4C0;
  --xc-secondary-container: #23454F;
  --xc-on-secondary-container: #CDE7F0;
  --xc-bg: #0F1416;
  --xc-fg: #DEE3E6;
  --xc-fg-muted: #BFC8CC;
  --xc-surface-lowest: #0A0F11;
  --xc-surface-container: #1B2023;
  --xc-surface-container-high: #262B2E;
  --xc-outline: #899297;
  --xc-outline-variant: #3F484C;
}