/* CSS Custom Properties (Variables)
 *
 * This file contains all CSS custom properties used throughout the application.
 * MUST be loaded first before any other CSS files.
 *
 * Categories:
 * - Layout measurement variables (editor-menu-height, menu-height, etc.)
 * - Button color preset variables (button-color-preset-*)
 * - References theme color variables defined in blocks-usage-example.html
 */

/* Layout Measurement Variables */
:root {
  --editor-menu-height: 0px;
  --menu-height: 0px;
  --popup-spacing: 0px;
  --stick-top-section-height: 0px;
  --gallery-content-box-margin: 0px;
  --dynamic-buttons-height: 0;
  --dynamic-menu-logo-height: 0;
}

/* Button Color Preset Variables */
:root {
  --button-color-preset-1-color: rgba(var(--theme-color-5-rgbv),1);
  --button-color-preset-1-background-hover-color: rgba(var(--theme-color-1-rgbv),1);
  --button-color-preset-1-background-color: rgba(var(--theme-color-1-light-rgbv),1);
  --button-color-preset-1-border-color: transparent;
  --button-color-preset-1-hover-color: rgba(var(--theme-color-5-rgbv),1);
  --button-color-preset-2-color: rgba(var(--theme-color-5-rgbv),1);
  --button-color-preset-2-background-hover-color: rgba(var(--theme-color-1-rgbv),1);
  --button-color-preset-2-background-color: rgba(var(--theme-color-1-dark-rgbv),1);
  --button-color-preset-2-border-color: transparent;
  --button-color-preset-2-hover-color: rgba(var(--theme-color-5-rgbv),1);
  --button-color-preset-3-color: rgba(var(--theme-color-6-rgbv),1);
  --button-color-preset-3-background-hover-color: rgba(var(--theme-color-5-rgbv),1);
  --button-color-preset-3-background-color: rgba(var(--theme-color-5-rgbv),1);
  --button-color-preset-3-border-color: rgba(var(--theme-color-6-light-rgbv),0.69);
  --button-color-preset-3-hover-color: rgba(var(--theme-color-6-rgbv),1);
}

/* Theme color variables - REQUIRED for blocks to work */
:root
{
    --theme-color-1:rgb(4, 126, 123);--theme-color-1-rgbv:4,126,123;--theme-color-1-dark:rgb(3, 100, 98);--theme-color-1-dark-rgbv:3,100,98;--theme-color-1-light:rgb(54, 151, 149);--theme-color-1-light-rgbv:54,151,149;
    --theme-color-2:rgb(245, 238, 235);--theme-color-2-rgbv:245,238,235;--theme-color-2-dark:rgb(196, 190, 188);--theme-color-2-dark-rgbv:196,190,188;--theme-color-2-light:rgb(247, 241, 239);--theme-color-2-light-rgbv:247,241,239;
    --theme-color-3:rgb(166, 161, 153);--theme-color-3-rgbv:166,161,153;--theme-color-3-dark:rgb(132, 128, 122);--theme-color-3-dark-rgbv:132,128,122;--theme-color-3-light:rgb(183, 179, 173);--theme-color-3-light-rgbv:183,179,173;
    --theme-color-4:rgb(221, 73, 75);--theme-color-4-rgbv:221,73,75;--theme-color-4-dark:rgb(176, 58, 60);--theme-color-4-dark-rgbv:176,58,60;--theme-color-4-light:rgb(227, 109, 111);--theme-color-4-light-rgbv:227,109,111;
    --theme-color-5:rgb(255, 255, 255);--theme-color-5-rgbv:255,255,255;--theme-color-5-dark:rgb(204, 204, 204);--theme-color-5-dark-rgbv:204,204,204;--theme-color-5-light:rgb(255, 255, 255);--theme-color-5-light-rgbv:255,255,255;
    --theme-color-6:rgb(14, 14, 14);--theme-color-6-rgbv:14,14,14;--theme-color-6-dark:rgb(11, 11, 11);--theme-color-6-dark-rgbv:11,11,11;--theme-color-6-light:rgb(62, 62, 62);--theme-color-6-light-rgbv:62,62,62;
}

/* Testing interface styles */
*
{
    box-sizing: border-box;
}

body
{
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}