:root
{

    --bs-body-font-size: 1.1rem; /* We update the default font size */

    --primary-color: #b880ff; /*  - mainly used for text highlight  #DB2929; */
    --secondary-color: #C89CFF; /*  - mainly used for graphics (border, background, buttons) #B60411 */
    /* RGB components of --secondary-color — for rgba() patterns like
       rgba(var(--cnvs-themecolor-rgb), 0.5). CSS can't derive rgb from a
       hex var, so per-site overrides that need translucent variants must
       also override --secondary-color-rgb explicitly. */
    --secondary-color-rgb: 200, 156, 255; /* #C89CFF */

    /* Bridge tokens — each one resolves to a vigneron semantic color via
       var() so per-site overrides (injected via useHead AFTER variables.css)
       on --secondary-color / --primary-color propagate transparently to
       the v7.4.0 / Bootstrap 5 / v6.6.x-legacy vocabularies that Canvas's
       stylesheet actually reads. var() resolves lazily at use time, so
       overriding --secondary-color downstream in the cascade IS picked up
       here without re-declaring every bridge token. */

    /* v7.4.0 Canvas token — drives every .button / link / badge / focus
       ring styled by Canvas's stylesheet. */
    --cnvs-themecolor: var(--secondary-color);
    --cnvs-themecolor-rgb: var(--secondary-color-rgb);

    /* v6.6.x legacy token. Some Vue scoped styles in this app still
       reference var(--themecolor) directly (e.g. ActivityCalendar.vue).
       Keep the alias until those references are migrated to --cnvs-themecolor. */
    --themecolor: var(--secondary-color);

    /* Bootstrap 5.3 primary token. Several v7.4.0 components (alerts,
       form-check, focus-ring, certain BS5-native buttons like .btn-primary)
       read --bs-primary directly rather than --cnvs-themecolor. */
    --bs-primary: var(--secondary-color);
    --bs-primary-rgb: var(--secondary-color-rgb);

    /* BS5 link hover token. v7.4.0 style.css binds it to --cnvs-heading-color;
       we'd rather use vigneron's brighter --primary-color. (--bs-link-color
       and --bs-link-color-rgb are already bound to --cnvs-themecolor by v7.4.0
       style.css line 13283-13284 — no need to re-declare them here.) */
    --bs-link-hover-color: var(--primary-color);

    /* BS5 body text token. v7.4.0 components (.text-body, .table, .form-control,
       etc.) read --bs-body-color directly. Bridging it to --body-text-color
       lets the per-site override of the latter propagate to BS5-styled elements. */
    --bs-body-color: var(--body-text-color);
    /* NOT bridging --bs-body-bg here on purpose: vigneron defaults
       --body-background-color to `inherit` (not a real color), which would
       collapse --bs-body-bg to `inherit` at :root → transparent body. Per-site
       overrides that need to change body background should set --bs-body-bg
       explicitly in addition to --body-background-color. */

    --header-links-color: #444; /*  #FFFEF5 */
    --header-links-hover-color: #C89CFF; /*  #FFFEF5 */
    --header-links-active-color: #C89CFF; /*  #FFFEF5 */

    --header-dark-links-color: #F7F7F7; /*  #F7F7F7 */
    --header-dark-links-hover-color: #C89CFF;
    --header-dark-links-active-color: #C89CFF;

    --header-background-color: #FFFFFF; /* #FFFEF5 */
    --header-dark-background-color: #333333;
    --header-border-color: #EEE;
    
    --body-text-color: #444;
    --body-background-color: inherit; /*   #E7DEC1*/
    
    /* Form placeholder text. Canvas 6.6.4 styled `.sm-form-control::placeholder`
       at #999; v7.4.0 dropped that rule and left Bootstrap 5.3's
       `.form-control::placeholder { color: var(--bs-secondary-color) }`
       = rgba(33,37,41,.75) → #575a5e on white, which reads as an entered value
       rather than a hint. This token restores the 6.6.4 grey — see the
       `.form-control::placeholder` rule in canvas-740.css.
       #767676 is the lightest neutral grey that still meets the WCAG AA 4.5:1
       minimum for text on white (4.54:1 — #777777 already drops to 4.48:1).
       Going lighter (6.6.4's #999 is 2.85:1) fails AA. */
    --form-placeholder-color: #767676;

    --content-links-color: #444;
    --content-links-hover-color: #222; /*  #FFFEF5 */
    --content-background-color: #FFF; /*  #FFFEF5 */
    
    --footer-border-color: #999; /*  #FFFEF5 */
    --footer-text-color: #555; /*   #FFFEF5 */
    
    --footer-links-color: #333; /*  #FFFEF5 */
    --footer-links-hover-color: #555; /*  #FFFEF5 */
    --footer-links-active-color: #555; /*  #FFFEF5 */
    
    --footer-background-color: #DDD; /*   #FFFEF5 */
}

.quantity {
   --cnvs-cart-quantity-width: 50px;
   --cnvs-cart-quantity-height: 40px;
}