:root {
    --watts-ezs-hue: 48;
    --watts-ezs-hue-alt: 44;
    --watts-ezs-saturation: 100%;
    --watts-ezs-saturation-alt: 100%;

    --watts-ezs-50: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 97%);
    --watts-ezs-100: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 95%);
    --watts-ezs-200: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 90%);
    --watts-ezs-300: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 80%);
    --watts-ezs-400: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 60%);
    --watts-ezs-450: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 55%);
    --watts-ezs-500: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 52%);
    --watts-ezs-600: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 45%);
    --watts-ezs-700: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 40%);
    --watts-ezs-750: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 35%);
    --watts-ezs-800: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 30%);
    --watts-ezs-850: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 25%);
    --watts-ezs-900: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 20%);
    --watts-ezs-1000: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 10%);

    --watts-ezs-alt-50: hsl(var(--watts-ezs-hue), var(--watts-ezs-saturation), 97%);
    --watts-ezs-alt-100: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 95%);
    --watts-ezs-alt-200: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 90%);
    --watts-ezs-alt-300: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 80%);
    --watts-ezs-alt-400: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 60%);
    --watts-ezs-alt-450: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 55%);
    --watts-ezs-alt-500: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 50%);
    --watts-ezs-alt-600: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 45%);
    --watts-ezs-alt-700: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 40%);
    --watts-ezs-alt-725: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 38%);
    --watts-ezs-alt-750: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 35%);
    --watts-ezs-alt-800: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 30%);
    --watts-ezs-alt-850: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 25%);
    --watts-ezs-alt-900: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 20%);
    --watts-ezs-alt-1000: hsl(var(--watts-ezs-hue-alt), var(--watts-ezs-saturation-alt), 10%);
}

/* watts theme for ezs */
html[data-theme="can-ezs"] {
    --watts-contrast-brand: var(--watts-black);
    --watts-contrast-brand-bold: var(--watts-white);
    --watts-contrast-brand-boldest: var(--watts-white);

    --watts-contrast-interactive-brand: var(--watts-white);
    --watts-contrast-interactive-brand-hover: var(--watts-white);
    --watts-contrast-interactive-brand-pressed: var(--watts-white);

    --watts-content-brand: var(--watts-ezs-alt-500);
    --watts-content-brand-bold: var(--watts-ezs-alt-800);

    --watts-content-interactive-brand: var(--watts-ezs-500);
    --watts-content-interactive-brand-hover: var(--watts-ezs-600);

    --watts-bg-brand: var(--watts-ezs-200);
    --watts-bg-brand-bold: var(--watts-ezs-500);
    --watts-bg-brand-bolder: var(--watts-ezs-700);
    --watts-bg-brand-boldest: var(--watts-ezs-800);

    --watts-bg-interactive-brand: var(--watts-ezs-600);
    --watts-bg-interactive-brand-hover: var(--watts-ezs-700);
    --watts-bg-interactive-brand-pressed: var(--watts-ezs-750);

    --watts-bg-brand-accent-primary: var(--watts-ezs-500);
    --watts-bg-brand-accent-secondary: var(--watts-ezs-1000);
}