/* ==========================================================================
   host.css - the publisher's stylesheet
   ==========================================================================
   This publisher themed the widget some time ago, using the token names we
   documented then. They set the base colour and pinned two shades by hand,
   because at the time nothing derived them.

   They never migrated to a namespaced token. Nothing here mentions Viafoura.
   ========================================================================== */

:root {
    --accent-color:       #b5179e;   /* base */
    --accent-color-light: #ffd166;   /* pinned by hand */
    --accent-color-dark:  #0f6b3f;   /* pinned by hand - deliberately off-palette */
}

/* Demo chrome: the two pages link to each other. Not part of either
   stylesheet's point - it just makes the comparison navigable. */
.nav {
    display: flex;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding-bottom: .75rem;
    font-size: 13px;
    border-bottom: 1px solid #d7dbe6;
}
.nav a { color: #33507a; }
.nav-here { color: #181c24; font-weight: 600; }

body {
    margin: 2rem;
    font: 16px/1.5 system-ui, sans-serif;
    color: #181c24;
}

h1 { font-size: 1.25rem; margin: 2.5rem 0 .25rem; }
h1:first-child { margin-top: 0; }
p  { margin: 0 0 1rem; color: #4a5365; max-width: 60ch; }
code { font: 12px ui-monospace, monospace; background: #eceef4; padding: 0 .25rem; border-radius: 2px; }

.host-button {
    padding: .5rem 1rem;
    font: inherit;
    color: #fff;
    background: var(--accent-color);
    border: 0;
    border-radius: 3px;
}