/* variables.css - wydzielone style aplikacji. */

:root {
    --user-font-scale: 1;
    --bg: #f7f8ff;
    --surface: #ffffff;
    --surface-muted: #edf2ff;
    --surface-soft: #f4f6ff;
    --surface-container: #e8eefb;
    --surface-container-high: #dde7f6;
    --border: #d5dfd8;
    --border-strong: #b7c8bf;
    --text: #151c27;
    --muted: #3c4a42;
    --primary: #006c49;
    --primary-dark: #00422b;
    --primary-soft: #dffbf3;
    --secondary: #006b5f;
    --secondary-soft: #d9fbf1;
    --tertiary: #a43a3a;
    --tertiary-soft: #ffefee;
    --danger: #ba1a1a;
    --danger-soft: #ffdad6;
    --success: #007165;
    --success-soft: #e5f5f1;
    --warning: #a16207;
    --warning-soft: #fff6db;
    --violet: #5f4bb6;
    --radius: .5rem;
    --radius-sm: .35rem;
    --shadow: 0 1px 2px rgba(21, 28, 39, .05);
    --shadow-strong: 0 12px 34px rgba(21, 28, 39, .12);
    --topbar-height: 3.35rem;
    --sidebar-width: 16.25rem;
    --content-max: 90rem;
    --body-font-size: .96rem;
    --control-font-size: .9rem;
    --button-font-size: .86rem;
    --table-font-size: .86rem;
    --small-font-size: .78rem;
    --card-title-size: .94rem;
    --stat-value-size: 1.18rem;
    --section-heading-size: .92rem;
    --status-font-size: .72rem;
    --icon-size: 1.35rem;
    --space-xs: .35rem;
    --space-sm: .6rem;
    --space-md: .7rem;
    --space-lg: .9rem;
    --space-xl: 1.1rem;
    --control-height: 2.35rem;
    --button-height: 2.35rem;
    --card-padding: .68rem;
    --panel-padding: .78rem;
    --table-cell-padding-y: .52rem;
    --table-cell-padding-x: .68rem;
    --section-gap: .72rem;
    --grid-gap: .62rem;
    --stat-tile-min-height: 4.35rem;
    --page-title-size: clamp(1.18rem, 2vw, 1.55rem);
    --page-block-padding: .85rem 1.2rem;
    --focus-ring: rgba(35, 100, 170, .35);
}

html {
    font-size: calc(100% * var(--user-font-scale, 1));
}

html.ui-density-compact {
    --radius: .28rem;
    --radius-sm: .18rem;
    --shadow: none;
    --shadow-strong: 0 10px 24px rgba(21, 28, 39, .1);
    --topbar-height: 2.95rem;
    --sidebar-width: 12.8rem;
    --content-max: 108rem;
    --body-font-size: .9rem;
    --control-font-size: .82rem;
    --button-font-size: .78rem;
    --table-font-size: .78rem;
    --small-font-size: .7rem;
    --card-title-size: .86rem;
    --stat-value-size: 1.05rem;
    --section-heading-size: .9rem;
    --status-font-size: .62rem;
    --icon-size: 1rem;
    --space-xs: .14rem;
    --space-sm: .28rem;
    --space-md: .45rem;
    --space-lg: .65rem;
    --space-xl: .85rem;
    --control-height: 1.85rem;
    --button-height: 1.85rem;
    --card-padding: .42rem;
    --panel-padding: .5rem;
    --table-cell-padding-y: .28rem;
    --table-cell-padding-x: .42rem;
    --section-gap: .45rem;
    --grid-gap: .42rem;
    --stat-tile-min-height: 3.6rem;
    --page-title-size: clamp(1rem, 1.7vw, 1.32rem);
    --page-block-padding: .45rem .75rem;
}

html.ui-density-comfortable {
    --radius: .62rem;
    --radius-sm: .42rem;
    --shadow: 0 1px 3px rgba(21, 28, 39, .06);
    --shadow-strong: 0 16px 44px rgba(21, 28, 39, .14);
    --topbar-height: 4.05rem;
    --sidebar-width: 17rem;
    --content-max: 92rem;
    --body-font-size: 1.06rem;
    --control-font-size: 1.04rem;
    --button-font-size: 1rem;
    --table-font-size: 1.03rem;
    --small-font-size: .93rem;
    --card-title-size: 1.05rem;
    --stat-value-size: 1.38rem;
    --section-heading-size: 1.05rem;
    --status-font-size: .84rem;
    --icon-size: 1.65rem;
    --space-xs: .6rem;
    --space-sm: .95rem;
    --space-md: .95rem;
    --space-lg: 1.2rem;
    --space-xl: 1.55rem;
    --control-height: 2.95rem;
    --button-height: 2.95rem;
    --card-padding: 1rem;
    --panel-padding: 1.15rem;
    --table-cell-padding-y: .82rem;
    --table-cell-padding-x: .95rem;
    --section-gap: 1.2rem;
    --grid-gap: 1rem;
    --stat-tile-min-height: 6.2rem;
    --page-title-size: clamp(1.45rem, 2.8vw, 2rem);
    --page-block-padding: 1.35rem 1.75rem;
}

html.theme-dark {
    color-scheme: dark;
}

html.theme-dark {
    --bg: #0e1412;
    --surface: #151d1a;
    --surface-muted: #1f2a26;
    --surface-soft: #18231f;
    --surface-container: #22302b;
    --surface-container-high: #2b3b35;
    --border: #33463f;
    --border-strong: #496159;
    --text: #edf7f2;
    --muted: #b6c7c0;
    --primary: #68e0bd;
    --primary-dark: #9ff5dc;
    --primary-soft: #173c32;
    --secondary: #65d8c7;
    --secondary-soft: #163c38;
    --tertiary: #ffaaa5;
    --tertiary-soft: #4a2526;
    --danger: #ffb4ab;
    --danger-soft: #4d1f1d;
    --success: #70e1cc;
    --success-soft: #173f38;
    --warning: #f7cf73;
    --warning-soft: #3f3214;
    --shadow: 0 1px 2px rgba(0, 0, 0, .28);
    --shadow-strong: 0 14px 38px rgba(0, 0, 0, .34);
    --focus-ring: rgba(104, 224, 189, .35);
}

@media (prefers-color-scheme: dark) {
    html.theme-system {
        color-scheme: dark;
        --bg: #0e1412;
        --surface: #151d1a;
        --surface-muted: #1f2a26;
        --surface-soft: #18231f;
        --surface-container: #22302b;
        --surface-container-high: #2b3b35;
        --border: #33463f;
        --border-strong: #496159;
        --text: #edf7f2;
        --muted: #b6c7c0;
        --primary: #68e0bd;
        --primary-dark: #9ff5dc;
        --primary-soft: #173c32;
        --secondary: #65d8c7;
        --secondary-soft: #163c38;
        --tertiary: #ffaaa5;
        --tertiary-soft: #4a2526;
        --danger: #ffb4ab;
        --danger-soft: #4d1f1d;
        --success: #70e1cc;
        --success-soft: #173f38;
        --warning: #f7cf73;
        --warning-soft: #3f3214;
        --shadow: 0 1px 2px rgba(0, 0, 0, .28);
        --shadow-strong: 0 14px 38px rgba(0, 0, 0, .34);
        --focus-ring: rgba(104, 224, 189, .35);
    }
}