/* Dstny Knowledge Base — Scroll Sites Custom CSS */
/* Docs: https://help.k15t.com/scroll-sites/using-design-tokens-in-custom-css */
/* Header and banner colors are managed in the theme configurator UI — not here. */

/* Brand font */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* Typography */
  --theme-text-font: "Inter", ui-sans-serif, sans-serif;
  --theme-headline-font: "Inter", ui-sans-serif, sans-serif;
  --theme-text-color: #261616;
  --theme-headline-color: #261616;

  /* Footer */
  --theme-footer-background-color: var(--theme-primary-color);
  --theme-footer-text-color: #ffffff;

  /* Site-wide accent (links, buttons, tiles, nav, breadcrumbs) */
  --theme-primary-color: #1BA9B5;
  --theme-on-primary-color: #ffffff;

  /* Links */
  --K15t-link: #1BA9B5;
  --K15t-link-visited: #7e0a5c;
}

/* Panel overrides — uses !important to beat inline --bg-color */

/* Info (blue → Dstny Teal) */
[data-component="panel"][data-appearance="info"] {
  --bg-color: #e2f3f5 !important;
  --icon-color: #118199 !important;
  --text-color: #0c5e6e !important;
}

/* Custom panel → same as Info per marketing request */
[data-component="panel"][data-appearance="custom"] {
  --bg-color: #e2f3f5 !important;
  --icon-color: #118199 !important;
  --text-color: #0c5e6e !important;
}

/* Note (purple → Dstny Dark Blue) */
[data-component="panel"][data-appearance="note"] {
  --bg-color: #e0eef5 !important;
  --icon-color: #005C87 !important;
  --text-color: #003d5c !important;
}

/* Warning (yellow → Dstny Orange) */
[data-component="panel"][data-appearance="warning"] {
  --bg-color: #fff3e0 !important;
  --icon-color: #FE9305 !important;
  --text-color: #7a4700 !important;
}

/* Error (red → Dstny Magenta) */
[data-component="panel"][data-appearance="error"] {
  --bg-color: #f9e4f2 !important;
  --icon-color: #B41284 !important;
  --text-color: #6e0b51 !important;
}

/* Success (green → Teal-green hybrid, no brand green exists) */
[data-component="panel"][data-appearance="success"] {
  --bg-color: #e2f5ef !important;
  --icon-color: #0D9B6A !important;
  --text-color: #075e40 !important;
}