:root
{
    --primary: #0C2C55;
    --secondary: #296374;
    --alternative: #629FAD;
    --acent: #EDEDCE;
    --neutral1: #575757;
    --neutral2: #dcdcdc;

    --hover: color-mix(in hsl, var(--secondary), white 20%);
    --focus: color-mix(in hsl, var(--secondary), white 20%);
}
:root
{
    --platin: #E8E8E8;
    --lazuli: #05668D;
    --green: #6F8F72;
    --umber: #8C271E;
    --gold: #E8AA14;

    --color-60: #fcfdf8;
    --color-30: #8c9137;
    --color-10: #22110a;
    --color-neutral: #FF8811;
    --color-neutral2: #FB8500;

    --bg-color-base: #313031;
    --bg-color-light: color-mix(in lab, var(--bg-color-base), #FFFFFF 10% );
    --bg-color-dark: color-mix(in lab, var(--bg-color-base), #000000 20% );

    --border-width: 8px;
    --content-padding: 8px;
    --border-color: #313031;
    --font-color: #ffe6c0;
    --font-color-content: #fff7f0;

    --button-color: #8e8e8e;
    --button-color-hover: #FF8811;


    --panel-background: var(--bg-color-light);
    --panel-inset-background: color-mix(in lab, var(--color-30), white 20%);
    --panel-inset-dark-background: color-mix(in lab, var(--color-30), black 40%);
}
@property --fill-amount {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}