/* ==========================================================================
   widget-today.css - the Viafoura stylesheet, as it ships now
   ==========================================================================
   Every token is read at its point of use with a build-time fallback, which
   is what our SCSS mixin emits:

       background-color: var(--accent-color-10, rgba(0, 116, 232, .1));

   The fallback applies only when the name is undefined everywhere in the
   ancestor chain. So each token is resolved independently: a name the
   publisher happened to set comes through, and a name they didn't keeps our
   blue. Nothing connects one token to another.

   WHAT TO LOOK AT IN DEVTOOLS
   1. Inspect .vf-base and .vf-10 side by side. Both read a var(). One is the
      publisher's magenta, the other our blue. Neither knows about the other.
   2. Select .viafoura, open Computed, filter "accent". Only the three names
      the publisher wrote are magenta/gold/green. The rest are blue.
   3. Compare with the proposed contract in widget.css on the other page.
   ========================================================================== */

.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(--text-on-accent-color, #ffffff);
    background: var(--accent-color, #0074e8);
    border: 0;
    border-radius: 3px;
}

.vf-button-quiet {
    margin-left: .25rem;
    padding: .5rem 1rem;
    font: inherit;
    color: var(--accent-color-dark, #004e9c);
    background: var(--accent-color-10, rgba(0, 116, 232, .1));
    border: 1px solid var(--accent-color-25, rgba(0, 116, 232, .25));
    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; }

.src {
    display: inline-block;
    padding: 0 .35rem;
    font: 11px/1.7 ui-monospace, monospace;
    border-radius: 2px;
}
.src-host    { color: #7c3a00; background: #fdebd0; }
.src-derived { color: #33507a; background: #e8eefb; }
.src-default { color: #4a5365; background: #fff; box-shadow: inset 0 0 0 1px #d7dbe6; }

/* ---- each token read independently, with its own compiled fallback ------ */
.vf-base      { background-color: var(--accent-color,           #0074e8); }
.vf-0         { background-color: var(--accent-color-0,         rgba(0, 116, 232, 0)); }
.vf-05        { background-color: var(--accent-color-05,        rgba(0, 116, 232, .05)); }
.vf-10        { background-color: var(--accent-color-10,        rgba(0, 116, 232, .1)); }
.vf-20        { background-color: var(--accent-color-20,        rgba(0, 116, 232, .2)); }
.vf-25        { background-color: var(--accent-color-25,        rgba(0, 116, 232, .25)); }
.vf-50        { background-color: var(--accent-color-50,        rgba(0, 116, 232, .5)); }
.vf-90        { background-color: var(--accent-color-90,        rgba(0, 116, 232, .9)); }
.vf-light     { background-color: var(--accent-color-light,     #007fff); }
.vf-semi-dark { background-color: var(--accent-color-semi-dark, #005dba); }
.vf-dark      { background-color: var(--accent-color-dark,      #004e9c); }
.vf-text      { background-color: var(--text-on-accent-color,   #ffffff); }