/* ==========================================================================
   widget.css - the Viafoura stylesheet
   ==========================================================================
   Declaration #4: derivation with legacy fallbacks.

   Each token resolves in three tiers:

       var( customer's pinned value , derive from the base , shipped default )

   So a publisher who pinned some shades keeps exactly those, and the ones
   they never pinned are derived from THEIR base rather than ours.

   Two names, deliberately distinct:
       --vf-accent-color   the input a customer sets. We never declare it,
                           so we can never shadow their value.
       --_accent           our resolved internal token. The underscore marks
                           it private; component rules read only these.

   WHAT TO LOOK AT IN DEVTOOLS
   1. Select .viafoura, open Computed, filter "accent". --_accent-light and
      --_accent-dark hold the publisher's pinned values; --_accent-semi-dark
      was derived from their magenta, not from our blue.
   2. Inspect the .viafoura rule below. Each line shows its own fallback
      chain, so you can see which tier won for each token.
   3. Delete the two pinned lines from host.css and reload. Those two shades
      start deriving too, and the family stays internally consistent.
   ========================================================================== */

/* ---- the token contract -------------------------------------------------
   The base reads the new name, then the legacy name, then our default.
   Alpha steps use color-mix(); the two darken steps use relative colour,
   which is the exact equivalent of the Sass darken() calls they replace.
   -------------------------------------------------------------------------- */
.viafoura {
    --_accent:           var(--vf-accent-color, var(--accent-color, #0074e8));

    --_accent-0:         var(--accent-color-0,         color-mix(in srgb, var(--_accent)  0%, transparent));
    --_accent-05:        var(--accent-color-05,        color-mix(in srgb, var(--_accent)  5%, transparent));
    --_accent-10:        var(--accent-color-10,        color-mix(in srgb, var(--_accent) 10%, transparent));
    --_accent-20:        var(--accent-color-20,        color-mix(in srgb, var(--_accent) 20%, transparent));
    --_accent-25:        var(--accent-color-25,        color-mix(in srgb, var(--_accent) 25%, transparent));
    --_accent-50:        var(--accent-color-50,        color-mix(in srgb, var(--_accent) 50%, transparent));
    --_accent-90:        var(--accent-color-90,        color-mix(in srgb, var(--_accent) 90%, transparent));

    --_accent-light:     var(--accent-color-light,     hsl(from var(--_accent) h s calc(l + 4.5)));
    --_accent-semi-dark: var(--accent-color-semi-dark, hsl(from var(--_accent) h s calc(l - 9)));
    --_accent-dark:      var(--accent-color-dark,      hsl(from var(--_accent) h s calc(l - 15)));

    --_accent-text:      var(--text-on-accent-color,   #ffffff);
}

/* ---- widget layout ------------------------------------------------------ */
.viafoura {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px dashed #d7dbe6;
}

.viafoura h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

.vf-button {
    padding: .5rem 1rem;
    font: inherit;
    color: var(--_accent-text);
    background: var(--_accent);
    border: 0;
    border-radius: 3px;
}

.vf-button-quiet {
    margin-left: .25rem;
    padding: .5rem 1rem;
    font: inherit;
    color: var(--_accent-dark);          /* host defined */
    background: var(--_accent-10);       /* derived      */
    border: 1px solid var(--_accent-25); /* derived      */
    border-radius: 3px;
}

.vf-swatches {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font: 12px/2 ui-monospace, monospace;
}

.vf-chip {
    display: inline-block;
    width: 48px;
    height: 16px;
    vertical-align: -3px;
    margin-right: .5rem;
    box-shadow: 0 0 0 1px inset #00000066;
}

.vf-aside { margin: .75rem 0 0; font-size: 12px; color: #7d879c; }
.vf-aside-inline { color: #7d879c; }
.vf-legend { margin: 1rem 0 0; font-size: 12px; color: #7d879c; }

/* Which tier of the fallback chain won, colour-coded. */
.src {
    display: inline-block;
    padding: 0 .35rem;
    font: 11px/1.7 ui-monospace, monospace;
    border-radius: 2px;
}
.src-host    { color: #7c3a00; background: #fdebd0; }  /* publisher wrote it   */
.src-derived { color: #33507a; background: #e8eefb; }  /* shows the calculation */
.src-default { color: #4a5365; background: #fff;    box-shadow: inset 0 0 0 1px #d7dbe6; }

/* ---- component rules read only the resolved tokens ---------------------- */
.vf-base      { background-color: var(--_accent); }
.vf-0         { background-color: var(--_accent-0); }
.vf-05        { background-color: var(--_accent-05); }
.vf-10        { background-color: var(--_accent-10); }
.vf-20        { background-color: var(--_accent-20); }
.vf-25        { background-color: var(--_accent-25); }
.vf-50        { background-color: var(--_accent-50); }
.vf-90        { background-color: var(--_accent-90); }
.vf-light     { background-color: var(--_accent-light); }
.vf-semi-dark { background-color: var(--_accent-semi-dark); }
.vf-dark      { background-color: var(--_accent-dark); }
.vf-text      { background-color: var(--_accent-text); }  /* white on white - the border shows it */