/**
 * BCI Blocks — design-system stylesheet.
 *
 * Enqueued as the plugin stylesheet (front end + editor), this defines the
 * --bci-blocks-* CSS custom property defaults (colors, spacing, animation
 * timing, and the mask-image arrow icons) so blocks render correctly in any
 * theme. The active theme can override any value by redefining it at :root.
 *
 * Breakpoints: block SCSS uses plain pixel media queries inlined at the point
 * of use (768 / 992 / 1200px). Reference values:
 *   sm 480 · md 768 · lg 992 · xl 1200 (min-width); below-md 767 (max-width).
 */

/**
 * BCI Blocks — Plugin-level CSS custom property defaults.
 *
 * These provide fallback values for all --bci-blocks-* variables so blocks
 * render correctly in any theme. The active theme overrides these by redefining
 * the same variables in its own stylesheet (theme stylesheets load later, so the
 * theme wins via cascade at equal :root specificity).
 *
 * Icon URLs use paths relative to this file's location. Bootstrap Icons SVGs
 * are bundled in assets/icons/.
 */

:root {
	/* Icons */
	--bci-blocks-icon-back:        url("../icons/arrow-left.svg");
	--bci-blocks-icon-next:        url("../icons/arrow-right.svg");
	--bci-blocks-icon-chevron:     url("../icons/chevron-down.svg");
	--bci-blocks-icon-close:       url("../icons/x-lg.svg");
	--bci-blocks-icon-burger:      url("../icons/list.svg");
	--bci-blocks-icon-search:      url("../icons/search.svg");
	--bci-blocks-icon-checkmark:   url("../icons/check.svg");
	--bci-blocks-icon-toggle-off:  url("../icons/toggle-off.svg");
	--bci-blocks-icon-toggle-on:   url("../icons/toggle2-on.svg");
	--bci-blocks-icon-plus:        url("../icons/plus.svg");
	--bci-blocks-icon-dash:        url("../icons/dash.svg");
	--bci-blocks-icon-facebook:    url("../icons/facebook.svg");
	--bci-blocks-icon-x:           url("../icons/twitter-x.svg");
	--bci-blocks-icon-email:       url("../icons/envelope.svg");
	--bci-blocks-icon-link:        url("../icons/arrow-up-right.svg");
	--bci-blocks-icon-color:       currentColor;
	--bci-blocks-icon-size:        1.5rem;

	/* Animation */
	--bci-blocks-speed:   0.2s;
	--bci-blocks-easing:  ease-in-out;

	/* Borders */
	--bci-blocks-border-radius: 4px;

	/* Spacing */
	--bci-blocks-large-padding:                  2rem;
	--bci-blocks-medium-padding:                 1rem;
	--bci-blocks-small-margin:                   0.5rem;
	--bci-blocks-medium-margin:                  1rem;
	--bci-blocks-grid-gap:                       0.75rem;
	--bci-blocks-grid-gap-medium:                1rem;
	--bci-blocks-grid-gap-large:                 1.5rem;
	--bci-blocks-grid-gap-xlarge:                2rem;
	--bci-blocks-global-spacing:                 1.5rem;
	--bci-blocks-block-element-margin-bottom:    1rem;
	--bci-blocks-block-element-small-gap:        0.5rem;
	--bci-blocks-block-element-medium-gap:       1rem;
	--bci-blocks-block-element-large-gap:        1.5rem;
	--bci-blocks-block-element-standard-gap:     1rem;
	--bci-blocks-main-navigation-items-gap:      0.5rem;

	/* Buttons */
	--bci-blocks-button-vertical-padding:    0.5rem;
	--bci-blocks-button-horizontal-padding:  1rem;
	--bci-blocks-button-border-radius:       0;

	/* Colors — neutral defaults; active theme redefines with its brand palette */
	--bci-blocks-color-primary:        #1a5276;
	--bci-blocks-color-primary-dark:   #154360;
	--bci-blocks-color-primary-light:  #d6eaf8;
	--bci-blocks-color-white:          #ffffff;
	--bci-blocks-color-black:          #1a1a1a;
	--bci-blocks-color-gray:           #888888;
	--bci-blocks-color-gray-1:         #333333;
	--bci-blocks-color-gray-3:         #666666;
	--bci-blocks-color-gray-4:         #999999;
	--bci-blocks-color-grey-7:         #dddddd;
	--bci-blocks-color-gray-8:         #f5f5f5;

	/* Typography */
	--bci-blocks-font-size-base:        1rem;
	--bci-blocks-font-size-small:       0.875rem;
	--bci-blocks-font-size-subhead-3:   1.125rem;
	--bci-blocks-font-weight-bold:      700;
	--bci-blocks-font-family-base:      sans-serif;
}