/* Calculated via JS */
:root {
  --header-height: auto;
  --wpadminbar-height: 0px;
}

/**
 * Helper variables for using in theme.json.
 *
 * NOTE: These variables are needed to provide uniq variable name to use
 *       it theme.json due to WordPress limitations.
 *       When multiple properties share the same value, WordPress match the
 *       selected element in block editor by the item "value" but not by item "slug",
 *       because of this we can NOT select the variable. For example:
 *       { "slug": "fluid-xl", "name": "fluid-xl", "size": "var(--some-var)" },
 *       { "slug": "edge-x",   "name": "edge-x",   "size": "var(--some-var)" },
 *       Since both use the same value, selecting "edge-x" will actually select "fluid-xl" in the block editor.
 */
:root {
  /* spacing */
  --_spacing--edge-x: var(--size-fluid300-60px);
  --_spacing--base-gap: var(--size-fluid200-16px);
}


/**
 Devices Breakpoints
  TODO: use these variables in JS code instead of hardcoded values, and in css where possible [nwp-fse-blocks, themes based on core-fse]
**/
:root {
  --mobile-bp: 768px;
  --tablet-bp: 1024px;
  --desktop-bp: 1200px;
}


/** Color **/
:root {
  --color-base: white;                 /* (required) main background (for page) - neutral base color */
  --color-contrast: black;             /* (required) opposite to base (for text on it) */
  --color-accent: #851f5a;             /* (required) brand accent */
  --color-on-accent: white;            /* (required) text/icons on accent background */
  --color-on-image: white;             /* (required) text/icons on image background */
  --color-links: #04548d;              /* (required) link color. IMP: CanNOT be "--color-link" because of conflict with WP class .has-link-color */
  --color-links-hover: #022c4a;        /* (required) link hover color */
  --color-transparent: transparent;    /* (required) fully transparent */
  --color-currentColor: currentColor;  /* (required) current color - useful for button-border-color etc */
}