@layer normalize {

html {
    /* compatibility *
    --hsl-h: 210; /* Blauer Farbton * /
    --hsl-s: 90%; /* Sättigung * /
    --hsl-l: 45%; /* Helligkeit * /
    --color: hsl(var(--hsl-h), var(--hsl-s), var(--hsl-l));
    /* */

    --color: #207acc;

    --accent: var(--color);
    /*--color-contrast: oklch(from var(--color) l c calc(h + 180deg)); dafari?
    --color-contrast: oklch(from var(--color) l c calc(h + 180));
    --accent: var(--color-contrast);
     */
    --color-space: oklch;
    --hue-shift: 0;

    /* misc */
    --width: 50rem; /* rename? --main-width, --content-width */
    --gap: 1rem;

    --line-width: 1px;
    --radius: .3rem;

    --shadow-x:0rem; /* unit needed for calc! */
    --shadow-y:.1rem;

    /* form controls */
    --control-padding-x: .4em;
    --control-padding-y: .3em;
    --control-border-width: var(--line-width);
    --control-radius: var(--radius);

    --line-height: calc(var(--line-height-absolute) + var(--line-height-relative));
    --font-1: system-ui, sans-serif;
    --font-2: system-ui, sans-serif;

    --font-1-variation: 
        "wdth" var(--font-1-wdth, 100), 
        "opsz" var(--font-1-opsz, 14), 
        "GRAD" var(--font-1-grad, 0),
        "MONO" var(--font-1-mono, 0),
        "CASL" var(--font-1-casl, 0);

    --font-2-variation: 
        "wdth" var(--font-2-wdth, 100), 
        "opsz" var(--font-2-opsz, 14), 
        "GRAD" var(--font-2-grad, 0),
        "MONO" var(--font-2-mono, 0),
        "CASL" var(--font-2-casl, 0);

}

html, [u2-skin] {

    color-scheme: light dark;

    --color-lightest: color-mix(in var(--color-space), var(--color), #fff 97%);
    --color-lighter:  color-mix(in var(--color-space), var(--color), #fff 85%);
    --color-light:    color-mix(in var(--color-space), var(--color), #fff 50%);
    --color-dark:     color-mix(in var(--color-space), var(--color), #000 30%);
    --color-darker:   color-mix(in var(--color-space), var(--color), #000 60%);
    --color-darkest:  color-mix(in var(--color-space), var(--color), #000 87%);

    --accent-lightest: color-mix(in var(--color-space), var(--accent), #fff 97%);
    --accent-lighter:  color-mix(in var(--color-space), var(--accent), #fff 85%);
    --accent-light:    color-mix(in var(--color-space), var(--accent), #fff 50%);
    --accent-dark:     color-mix(in var(--color-space), var(--accent), #000 30%);
    --accent-darker:   color-mix(in var(--color-space), var(--accent), #000 60%);
    --accent-darkest:  color-mix(in var(--color-space), var(--accent), #000 87%);

    --gray:          oklch(from var(--color) l min(c,0.01) h);
    --gray-lighter:  color-mix(in var(--color-space), var(--gray), #fff 85%);
    --gray-light:    color-mix(in var(--color-space), var(--gray), #fff 50%);
    --gray-dark:     color-mix(in var(--color-space), var(--gray), #000 30%);
    --gray-darker:   color-mix(in var(--color-space), var(--gray), #000 60%);

    /* Semantic - automatisch aus Grundfarbe */
    --color-bg:   light-dark(var(--color-lightest), var(--color-darkest));
    --color-text: light-dark(var(--color-darkest), var(--color-lightest));
    --color-line: var(--color-text);
    --color-area: light-dark(var(--color-lighter), var(--color-darker));

    /* Farbpalette - Hue-Rotation */
    --palette-base: oklch(from var(--color) max(l, 0.4) max(c, 0.15) h);

    --red:    oklch(from var(--palette-base) l c calc(25 + var(--hue-shift)));
    --orange: oklch(from var(--palette-base) l c calc(60 + var(--hue-shift)));
    --yellow: oklch(from var(--palette-base) l c calc(95 + var(--hue-shift)));
    --lime:   oklch(from var(--palette-base) l c calc(125 + var(--hue-shift)));
    --green:  oklch(from var(--palette-base) l c calc(155 + var(--hue-shift)));
    --cyan:   oklch(from var(--palette-base) l c calc(195 + var(--hue-shift)));
    --blue:   oklch(from var(--palette-base) l c calc(240 + var(--hue-shift)));
    --purple: oklch(from var(--palette-base) l c calc(285 + var(--hue-shift)));
    --pink:   oklch(from var(--palette-base) l c calc(340 + var(--hue-shift)));

    --shadow-blur: var(--gap);
    --shadow-color: color-mix(in srgb, var(--color-text), transparent 60%);
    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
    --shadow-s: calc(var(--shadow-x) * 0.5) calc(var(--shadow-y) * 0.5) calc(var(--shadow-blur) * 0.5) var(--shadow-color);
    --shadow-l: calc(var(--shadow-x) * 1.5) calc(var(--shadow-y) * 1.5) calc(var(--shadow-blur) * 1.5) var(--shadow-color);

}


[u2-skin=dark] { color-scheme: dark; }
[u2-skin=light] { color-scheme: light; }

}

/*
@property --min-font-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}
from pico.css
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
*/