/*
 * Antumo Design System - tokeny (prymitywy + semantyka) dla motywu jasnego i ciemnego.
 * Wartości 1:1 z pakietu @antumo/design (web/dist/antumo.css), z którego korzysta UTS.
 * Motyw wybiera atrybut <html data-theme="light|dark">.
 */
:root {
    --antumo-color-white: #ffffff;
    --antumo-color-black: #000000;
    --antumo-color-focus: #5b6ef2;
    --antumo-blue-25: #fbfdff;
    --antumo-blue-50: #f5faff;
    --antumo-blue-100: #e6f1fb;
    --antumo-blue-200: #cfe3f6;
    --antumo-blue-300: #b3d3ef;
    --antumo-blue-400: #9cc3e8;
    --antumo-blue-500: #7faedd;
    --antumo-blue-600: #6a97c8;
    --antumo-blue-700: #557faf;
    --antumo-blue-800: #3e5f85;
    --antumo-blue-900: #2c425e;
    --antumo-blue-950: #1b2a3f;
    --antumo-yellow-25: #fffdf5;
    --antumo-yellow-50: #fff9e8;
    --antumo-yellow-100: #fff3d4;
    --antumo-yellow-200: #ffe7a8;
    --antumo-yellow-300: #fddc79;
    --antumo-yellow-400: #f4cf53;
    --antumo-yellow-500: #f1c846;
    --antumo-yellow-600: #d4ab32;
    --antumo-yellow-700: #ac8624;
    --antumo-yellow-800: #7f6118;
    --antumo-yellow-900: #523d0f;
    --antumo-yellow-950: #2f2208;
    --antumo-green-25: #f6fcf9;
    --antumo-green-50: #ecf8f2;
    --antumo-green-100: #d7f0e5;
    --antumo-green-200: #b3e3cf;
    --antumo-green-300: #82d1b4;
    --antumo-green-400: #4dbd95;
    --antumo-green-500: #2fa46f;
    --antumo-green-600: #268a5e;
    --antumo-green-700: #1f6f4d;
    --antumo-green-800: #184f38;
    --antumo-green-900: #103325;
    --antumo-green-950: #081d14;
    --antumo-red-25: #fef6f6;
    --antumo-red-50: #fdecec;
    --antumo-red-100: #fad7d7;
    --antumo-red-200: #f4b3b3;
    --antumo-red-300: #ea8282;
    --antumo-red-400: #de6363;
    --antumo-red-500: #d14c4c;
    --antumo-red-600: #b53f3f;
    --antumo-red-700: #923434;
    --antumo-red-800: #6b2626;
    --antumo-red-900: #441818;
    --antumo-red-950: #260d0d;
    --antumo-violet-25: #fbfafe;
    --antumo-violet-50: #f5f3fc;
    --antumo-violet-100: #e7e3f7;
    --antumo-violet-200: #cec6f0;
    --antumo-violet-300: #b1a8e7;
    --antumo-violet-400: #9a8dda;
    --antumo-violet-500: #8b7fd1;
    --antumo-violet-600: #7568b8;
    --antumo-violet-700: #5e5497;
    --antumo-violet-800: #443e6e;
    --antumo-violet-900: #2e2a4a;
    --antumo-violet-950: #1b182c;
    --antumo-alpha-black-10: rgba(0, 0, 0, .1);
    --antumo-alpha-black-20: rgba(0, 0, 0, .2);
    --antumo-alpha-black-30: rgba(0, 0, 0, .3);
    --antumo-alpha-black-40: rgba(0, 0, 0, .4);
    --antumo-alpha-black-50: rgba(0, 0, 0, .5);
    --antumo-alpha-black-60: rgba(0, 0, 0, .6);
    --antumo-alpha-black-70: rgba(0, 0, 0, .7);
    --antumo-alpha-black-80: rgba(0, 0, 0, .8);
    --antumo-alpha-black-90: rgba(0, 0, 0, .9);
    --antumo-alpha-black-100: rgba(0, 0, 0, 1);
    --antumo-alpha-white-10: rgba(255, 255, 255, .1);
    --antumo-alpha-white-20: rgba(255, 255, 255, .2);
    --antumo-alpha-white-30: rgba(255, 255, 255, .3);
    --antumo-alpha-white-40: rgba(255, 255, 255, .4);
    --antumo-alpha-white-50: rgba(255, 255, 255, .5);
    --antumo-alpha-white-60: rgba(255, 255, 255, .6);
    --antumo-alpha-white-70: rgba(255, 255, 255, .7);
    --antumo-alpha-white-80: rgba(255, 255, 255, .8);
    --antumo-alpha-white-90: rgba(255, 255, 255, .9);
    --antumo-alpha-white-100: rgba(255, 255, 255, 1);
    --antumo-alpha-focus-20: rgba(91, 110, 242, .2);
    --antumo-alpha-focus-40: rgba(91, 110, 242, .4);
    --antumo-font-heading: "CircularXX", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --antumo-font-body: "Circular LL", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --antumo-font-size-xs: 12px;
    --antumo-font-size-sm: 14px;
    --antumo-font-size-md: 16px;
    --antumo-font-size-lg: 18px;
    --antumo-font-size-xl: 20px;
    --antumo-font-size-2xl: 24px;
    --antumo-font-size-3xl: 28px;
    --antumo-font-size-4xl: 32px;
    --antumo-line-height-xs: 16px;
    --antumo-line-height-sm: 20px;
    --antumo-line-height-md: 24px;
    --antumo-line-height-lg: 28px;
    --antumo-line-height-xl: 32px;
    --antumo-line-height-2xl: 36px;
    --antumo-font-weight-light: 300;
    --antumo-font-weight-regular: 400;
    --antumo-font-weight-medium: 500;
    --antumo-font-weight-bold: 700;
    --antumo-letter-spacing-tight: -.01em;
    --antumo-letter-spacing-normal: 0;
    --antumo-spacing-none: 0px;
    --antumo-spacing-xxs: 2px;
    --antumo-spacing-xs: 4px;
    --antumo-spacing-sm: 6px;
    --antumo-spacing-md: 8px;
    --antumo-spacing-lg: 10px;
    --antumo-spacing-xl: 12px;
    --antumo-spacing-2xl: 14px;
    --antumo-spacing-3xl: 16px;
    --antumo-spacing-4xl: 20px;
    --antumo-spacing-5xl: 22px;
    --antumo-spacing-6xl: 24px;
    --antumo-spacing-7xl: 32px;
    --antumo-spacing-8xl: 40px;
    --antumo-spacing-9xl: 48px;
    --antumo-spacing-10xl: 64px;
    --antumo-spacing-11xl: 80px;
    --antumo-spacing-12xl: 96px;
    --antumo-spacing-13xl: 128px;
    --antumo-spacing-14xl: 160px;
    --antumo-size-2xs: 28px;
    --antumo-size-xs: 32px;
    --antumo-size-sm: 36px;
    --antumo-size-md: 40px;
    --antumo-size-lg: 48px;
    --antumo-size-xl: 56px;
    --antumo-radius-none: 0px;
    --antumo-radius-xxs: 2px;
    --antumo-radius-xs: 4px;
    --antumo-radius-sm: 6px;
    --antumo-radius-md: 8px;
    --antumo-radius-lg: 10px;
    --antumo-radius-xl: 12px;
    --antumo-radius-2xl: 16px;
    --antumo-radius-3xl: 20px;
    --antumo-radius-4xl: 24px;
    --antumo-radius-full: 999px;
    --antumo-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, .05);
    --antumo-shadow-sm: 0px 1px 3px 0px rgba(10, 13, 18, .1), 0px 1px 2px -1px rgba(10, 13, 18, .1);
    --antumo-shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, .1), 0px 2px 4px -2px rgba(10, 13, 18, .06);
    --antumo-shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, .08), 0px 4px 6px -2px rgba(10, 13, 18, .03), 0px 2px 2px -1px rgba(10, 13, 18, .04);
    --antumo-shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, .08), 0px 8px 8px -4px rgba(10, 13, 18, .03), 0px 3px 3px -1.5px rgba(10, 13, 18, .04);
    --antumo-focus-ring: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #5b6ef2;
    --antumo-focus-ring-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, .05), 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #5b6ef2;
}

:root,
[data-theme=light] {
    --antumo-gray-25: #fdfdfd;
    --antumo-gray-50: #fafafa;
    --antumo-gray-100: #f5f5f5;
    --antumo-gray-200: #e9eaeb;
    --antumo-gray-300: #d5d7da;
    --antumo-gray-400: #a4a7ae;
    --antumo-gray-500: #717680;
    --antumo-gray-600: #535862;
    --antumo-gray-700: #414651;
    --antumo-gray-800: #252b37;
    --antumo-gray-900: #181d27;
    --antumo-gray-950: #0a0d12;
    --antumo-navy-25: #fbfbfd;
    --antumo-navy-50: #f6f7fa;
    --antumo-navy-100: #e6e8f0;
    --antumo-navy-200: #c7cad9;
    --antumo-navy-300: #a4a7bf;
    --antumo-navy-400: #6c6f92;
    --antumo-navy-500: #3a3a66;
    --antumo-navy-600: #32355a;
    --antumo-navy-700: #2a2d4f;
    --antumo-navy-800: #21243f;
    --antumo-navy-900: #171a2d;
    --antumo-navy-950: #0f1220;
    --antumo-text-primary: var(--antumo-gray-900);
    --antumo-text-secondary: var(--antumo-gray-700);
    --antumo-text-secondary-hover: var(--antumo-gray-800);
    --antumo-text-tertiary: var(--antumo-gray-600);
    --antumo-text-tertiary-hover: var(--antumo-gray-700);
    --antumo-text-quaternary: var(--antumo-gray-500);
    --antumo-text-disabled: var(--antumo-gray-400);
    --antumo-text-placeholder: var(--antumo-gray-500);
    --antumo-text-white: var(--antumo-color-white);
    --antumo-text-brand-solid: var(--antumo-navy-500);
    --antumo-text-brand-hover: var(--antumo-navy-600);
    --antumo-text-error: var(--antumo-red-600);
    --antumo-text-error-hover: var(--antumo-red-700);
    --antumo-text-warning: var(--antumo-yellow-600);
    --antumo-text-success: var(--antumo-green-600);
    --antumo-text-brand-primary: var(--antumo-navy-900);
    --antumo-bg-primary: var(--antumo-color-white);
    --antumo-bg-primary-hover: var(--antumo-gray-50);
    --antumo-bg-primary-solid: var(--antumo-gray-950);
    --antumo-bg-secondary: var(--antumo-gray-50);
    --antumo-bg-secondary-hover: var(--antumo-gray-100);
    --antumo-bg-tertiary: var(--antumo-gray-100);
    --antumo-bg-quaternary: var(--antumo-gray-200);
    --antumo-bg-active: var(--antumo-gray-50);
    --antumo-bg-brand-primary: var(--antumo-navy-50);
    --antumo-bg-brand-secondary: var(--antumo-navy-100);
    --antumo-bg-brand-solid: var(--antumo-navy-500);
    --antumo-bg-brand-hover: var(--antumo-navy-600);
    --antumo-bg-sidebar: var(--antumo-navy-500);
    --antumo-bg-sidebar-item-active: var(--antumo-navy-400);
    --antumo-bg-row-error: var(--antumo-red-50);
    --antumo-bg-row-warning: var(--antumo-yellow-50);
    --antumo-bg-row-success: var(--antumo-green-50);
    --antumo-bg-row-info: var(--antumo-blue-50);
    --antumo-bg-disabled: var(--antumo-gray-100);
    --antumo-bg-disabled-subtle: var(--antumo-gray-50);
    --antumo-bg-overlay: var(--antumo-gray-900);
    --antumo-bg-error-primary: var(--antumo-red-50);
    --antumo-bg-error-secondary: var(--antumo-red-100);
    --antumo-bg-error-solid: var(--antumo-red-600);
    --antumo-bg-error-hover: var(--antumo-red-700);
    --antumo-bg-warning-primary: var(--antumo-yellow-50);
    --antumo-bg-warning-solid: var(--antumo-yellow-600);
    --antumo-bg-success-primary: var(--antumo-green-50);
    --antumo-bg-success-solid: var(--antumo-green-600);
    --antumo-bg-success-secondary: var(--antumo-green-100);
    --antumo-bg-secondary-alpha: var(--antumo-gray-100);
    --antumo-border-primary: var(--antumo-gray-300);
    --antumo-border-secondary: var(--antumo-gray-200);
    --antumo-border-tertiary: var(--antumo-gray-100);
    --antumo-border-sidebar: var(--antumo-navy-500);
    --antumo-border-disabled: var(--antumo-gray-300);
    --antumo-border-disabled-subtle: var(--antumo-gray-200);
    --antumo-border-brand: var(--antumo-navy-500);
    --antumo-border-error: var(--antumo-red-500);
    --antumo-border-error-subtle: var(--antumo-red-300);
    --antumo-border-focus: var(--antumo-color-focus);
    --antumo-fg-primary: var(--antumo-gray-900);
    --antumo-fg-secondary: var(--antumo-gray-700);
    --antumo-fg-secondary-hover: var(--antumo-gray-800);
    --antumo-fg-tertiary: var(--antumo-gray-600);
    --antumo-fg-tertiary-hover: var(--antumo-gray-700);
    --antumo-fg-quaternary: var(--antumo-gray-400);
    --antumo-fg-quaternary-hover: var(--antumo-gray-500);
    --antumo-fg-white: var(--antumo-color-white);
    --antumo-fg-disabled: var(--antumo-gray-400);
    --antumo-fg-disabled-subtle: var(--antumo-gray-300);
    --antumo-fg-brand-primary: var(--antumo-navy-500);
    --antumo-fg-brand-secondary-hover: var(--antumo-navy-600);
    --antumo-fg-info-primary: var(--antumo-blue-600);
    --antumo-fg-info-secondary: var(--antumo-blue-500);
    --antumo-fg-error-primary: var(--antumo-red-600);
    --antumo-fg-error-secondary: var(--antumo-red-500);
    --antumo-fg-warning-primary: var(--antumo-yellow-600);
    --antumo-fg-warning-secondary: var(--antumo-yellow-500);
    --antumo-fg-success-primary: var(--antumo-green-600);
    --antumo-fg-success-secondary: var(--antumo-green-500);
}

[data-theme=dark] {
    --antumo-gray-25: #fafafa;
    --antumo-gray-50: #f7f7f7;
    --antumo-gray-100: #f0f0f1;
    --antumo-gray-200: #ececed;
    --antumo-gray-300: #cecfd2;
    --antumo-gray-400: #94979c;
    --antumo-gray-500: #85888e;
    --antumo-gray-600: #61656c;
    --antumo-gray-700: #373a41;
    --antumo-gray-800: #22262f;
    --antumo-gray-900: #181d27;
    --antumo-gray-950: #0c0e12;
    --antumo-navy-25: #fbfbfe;
    --antumo-navy-50: #f4f5fd;
    --antumo-navy-100: #e6e8f8;
    --antumo-navy-200: #cdd1f1;
    --antumo-navy-300: #b1b7e6;
    --antumo-navy-400: #9199da;
    --antumo-navy-500: #757dd0;
    --antumo-navy-600: #6068b8;
    --antumo-navy-700: #4c539a;
    --antumo-navy-800: #383d72;
    --antumo-navy-900: #26294d;
    --antumo-navy-950: #17192e;
    --antumo-text-primary: var(--antumo-gray-50);
    --antumo-text-secondary: var(--antumo-gray-300);
    --antumo-text-secondary-hover: var(--antumo-gray-200);
    --antumo-text-tertiary: var(--antumo-gray-400);
    --antumo-text-tertiary-hover: var(--antumo-gray-300);
    --antumo-text-quaternary: var(--antumo-gray-400);
    --antumo-text-disabled: var(--antumo-gray-500);
    --antumo-text-placeholder: #717680;
    --antumo-text-error: var(--antumo-red-400);
    --antumo-text-error-hover: var(--antumo-red-300);
    --antumo-text-warning: var(--antumo-yellow-400);
    --antumo-text-success: var(--antumo-green-400);
    --antumo-text-brand-primary: var(--antumo-navy-100);
    --antumo-bg-primary: var(--antumo-gray-950);
    --antumo-bg-primary-hover: var(--antumo-gray-800);
    --antumo-bg-primary-solid: var(--antumo-gray-900);
    --antumo-bg-secondary: var(--antumo-gray-900);
    --antumo-bg-secondary-hover: var(--antumo-gray-800);
    --antumo-bg-tertiary: var(--antumo-gray-800);
    --antumo-bg-quaternary: var(--antumo-gray-700);
    --antumo-bg-active: var(--antumo-gray-800);
    --antumo-bg-brand-primary: var(--antumo-navy-950);
    --antumo-bg-brand-secondary: #e6e8f0;
    --antumo-bg-sidebar: var(--antumo-gray-950);
    --antumo-bg-sidebar-item-active: var(--antumo-gray-700);
    --antumo-bg-row-error: var(--antumo-red-950);
    --antumo-bg-row-warning: var(--antumo-yellow-950);
    --antumo-bg-row-success: var(--antumo-green-950);
    --antumo-bg-row-info: var(--antumo-blue-950);
    --antumo-bg-disabled: var(--antumo-gray-900);
    --antumo-bg-disabled-subtle: var(--antumo-gray-700);
    --antumo-bg-overlay: var(--antumo-gray-700);
    --antumo-bg-error-primary: var(--antumo-red-950);
    --antumo-bg-error-secondary: var(--antumo-red-400);
    --antumo-bg-error-solid: var(--antumo-red-400);
    --antumo-bg-error-hover: var(--antumo-red-500);
    --antumo-bg-warning-primary: var(--antumo-yellow-950);
    --antumo-bg-warning-solid: var(--antumo-yellow-500);
    --antumo-bg-success-primary: var(--antumo-green-950);
    --antumo-bg-success-solid: var(--antumo-green-500);
    --antumo-bg-success-secondary: var(--antumo-green-400);
    --antumo-bg-secondary-alpha: var(--antumo-gray-800);
    --antumo-border-primary: var(--antumo-gray-700);
    --antumo-border-secondary: #252b37;
    --antumo-border-tertiary: var(--antumo-gray-800);
    --antumo-border-sidebar: var(--antumo-gray-800);
    --antumo-border-disabled: var(--antumo-gray-700);
    --antumo-border-disabled-subtle: var(--antumo-gray-800);
    --antumo-border-error: var(--antumo-red-400);
    --antumo-border-error-subtle: var(--antumo-red-500);
    --antumo-fg-primary: var(--antumo-color-white);
    --antumo-fg-secondary: var(--antumo-gray-300);
    --antumo-fg-secondary-hover: var(--antumo-gray-200);
    --antumo-fg-tertiary: var(--antumo-gray-400);
    --antumo-fg-tertiary-hover: var(--antumo-gray-300);
    --antumo-fg-quaternary: var(--antumo-gray-600);
    --antumo-fg-disabled: var(--antumo-gray-500);
    --antumo-fg-disabled-subtle: var(--antumo-gray-600);
    --antumo-fg-info-primary: var(--antumo-blue-500);
    --antumo-fg-info-secondary: var(--antumo-blue-400);
    --antumo-fg-error-primary: var(--antumo-red-500);
    --antumo-fg-error-secondary: var(--antumo-red-400);
    --antumo-fg-warning-primary: var(--antumo-yellow-500);
    --antumo-fg-warning-secondary: var(--antumo-yellow-400);
    --antumo-fg-success-primary: var(--antumo-green-500);
    --antumo-fg-success-secondary: var(--antumo-green-400);
    --antumo-focus-ring: 0px 0px 0px 2px var(--antumo-gray-950), 0px 0px 0px 4px #5b6ef2;
    --antumo-focus-ring-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, .05), 0px 0px 0px 2px var(--antumo-gray-950), 0px 0px 0px 4px #5b6ef2;
}

:root {
    --antumo-icon-size-xs: 12px;
    --antumo-icon-size-sm: 16px;
    --antumo-icon-size-md: 20px;
    --antumo-icon-size-base: 24px;
    --antumo-icon-size-lg: 28px;
    --antumo-icon-size-xl: 40px;
    --antumo-icon-stroke-xs: 1;
    --antumo-icon-stroke-sm: 1.25;
    --antumo-icon-stroke-md: 1.5;
    --antumo-icon-stroke-base: 1.75;
    --antumo-icon-stroke-lg: 2;
    --antumo-icon-stroke-xl: 2.5;
}

:root {
    --antumo-nav-body-inset: var(--antumo-spacing-md);
    --antumo-nav-content-gap: var(--antumo-spacing-lg);
    --antumo-nav-width-expanded: 280px;
    --antumo-nav-width-collapsed: 72px;
    --antumo-nav-offset-expanded: 298px;
    --antumo-nav-offset-collapsed: 90px;
}

