@import './mio-form.css';
@import './mio-variables.css';
@import './mio-divider.css';
@import './buttons.css';
@import './common.css';
@import './table.css';

@custom-variant dark (&:where(.dark, .dark *));



:root {
    --font-family-mono: "Reddit Mono", monospace;
    --font-size: 13px;
    --input-size: 24px;

    --line-height: 1.25;

    --input-border-radius: 3px;
    --button-border-radius: var(--input-border-radius);

    --headerHeight: 50px;
    --tableStickyHeight: var(--headerHeight);

    --font-color-dark: hsl(218, 27%, 94%);
    --font-color-light: hsl(220, 16%, 22%);

    --auf-disabled-filter: opacity(0.5);
}


html {

    /* // Theme specific */
    --font-color: var(--font-color-dark);

    --clr-border: var(--darkNeutral300);

    --bg-table-header: var(--bg-sec-tnt);
    --bg-table-row-odd: var(--bg-pri);
    --bg-table-row-even: white 2%;
    --bg-table-row-hover: white 5%;

    /* // Main background color */
    --bg-pri: hsl(220, 16%, 15%);
    --bg-pri-opposite: hsl(220, 16%, 85%);
    --bg-sec: hsl(220, 16%, 18%);
    --bg-sec-tnt: hsl(220, 18%, 25%);

    --input-box-shadow: inset 0 0 0 1px var(--bg-sec-tnt);
    --input-box-shadow-focus: inset 0 0 0 2px var(--btn-bg-blu-tnt);

    --btn-bg-blu: hsl(213, 32%, 42%);
    --btn-bg-red: hsl(354, 42%, 46%);
    --btn-bg-yel: hsl(14, 41%, 53%);
    --btn-bg-gre: hsl(92, 15%, 46%);

    --btn-bg-blu-tnt: color-mix(in srgb, var(--btn-bg-blu), white 10%);
    --btn-bg-red-tnt: color-mix(in srgb, var(--btn-bg-red), white 10%);
    --btn-bg-yel-tnt: color-mix(in srgb, var(--btn-bg-yel), white 10%);
    --btn-bg-gre-tnt: color-mix(in srgb, var(--btn-bg-gre), white 10%);

    --btn-bg-blu-shd: color-mix(in srgb, var(--btn-bg-blu), black 10%);
    --btn-bg-red-shd: color-mix(in srgb, var(--btn-bg-red), black 10%);
    --btn-bg-yel-shd: color-mix(in srgb, var(--btn-bg-yel), black 10%);
    --btn-bg-gre-shd: color-mix(in srgb, var(--btn-bg-gre), black 10%);

    --btn-fg-blu: var(--font-color-dark);
    --btn-fg-red: var(--btn-fg-blu);
    --btn-fg-yel: var(--btn-fg-blu);
    --btn-fg-gre: var(--btn-fg-blu);

    --tbl-bg-gre: hsla(92, 13%, 35%);
    --tbl-bg-yel: hsl(14, 40%, 40%);
    --tbl-bg-red: hsl(354, 35%, 40%);
    --tbl-bg-blu: hsl(213, 25%, 32%);

    --tbl-bg-gre: hsla(92, 13%, 38%);
    --tbl-bg-yel: hsl(14, 35%, 44%);
    --tbl-bg-red: hsl(354, 31%, 44%);
    --tbl-bg-blu: hsl(213, 17%, 39%);

    --tbl-fg-blu: var(--font-color);
    --tbl-fg-red: var(--tbl-fg-blu);
    --tbl-fg-yel: var(--tbl-fg-blu);
    --tbl-fg-gre: var(--tbl-fg-blu);
}


html.light {
    /* // Theme specific */
    --font-color: var(--font-color-light);

    --bg-pri: hsl(218, 27%, 94%);
    --bg-pri-opposite: hsl(218, 27%, 14%);
    --bg-sec: hsl(218, 27%, 90%);
    --bg-sec-tnt: hsl(218, 20%, 81%);


    --btn-bg-blu: hsl(213, 32%, 47%);
    --btn-bg-red: hsl(354, 42%, 56%);
    --btn-bg-yel: hsl(14, 51%, 63%);
    --btn-bg-gre: hsl(92, 15%, 53%);

    --tbl-bg-gre: hsla(92, 22%, 80%);
    --tbl-bg-yel: hsl(14, 50%, 80%);
    --tbl-bg-red: hsl(354, 55%, 80%);
    --tbl-bg-blu: hsl(213, 22%, 75%);

    --bg-table-row-even: black 3%;
    --bg-table-row-hover: black 6%;
}