@payfit/unity-themes
Version:
1,732 lines • 87.8 kB
CSS
/**
* =============================================================================
* Unity Themes: Default Theme
* =============================================================================
*
* @file unity.css
* @description Auto-generated CSS styles for Unity
* @copyright Copyright (c) 2025 PayFit. All rights reserved.
*
* =============================================================================
* LINKS
* =============================================================================
*
* GitHub Repository: https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/themes
* Documentation: https://unity-theme.payfit.io/?path=/docs/1-introduction-1-welcome--docs
* Issues/Support: https://payfit.atlassian.net/jira/software/c/projects/CEEFRE/boards/623
*
* =============================================================================
* NOTICE
* =============================================================================
*
* This file is auto-generated. Manual changes to this file will be overwritten
* when the build process runs again. To customize styles, please refer to the
* source files or documentation.
*
* Generated by: Unity Themes
*/
@import "@fontsource/inter";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/source-serif-4";
@import "@fontsource/source-serif-4/500.css";
@import "@fontsource/source-serif-4/600.css";
@import "@fontsource/source-serif-4/700.css";
@import "@fontsource/roboto-mono";
@import "tailwindcss" prefix(uy);
@font-face {
font-family: "Heartbreak Eighties";
src: url("./fonts/heartbreak-eighties/HeartbreakEighties-Regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Heartbreak Eighties";
src: url("./fonts/heartbreak-eighties/HeartbreakEighties-Oblique.woff2") format("woff2");
font-style: italic;
font-weight: 400;
}
@layer base {
:root,
[data-uy-theme="default"] {
--uy-animate-uy-ai-gradient-angle-rotate: 3s linear infinite uy-ai-gradient-angle-rotate;
--uy-animate-uy-ai-gradient-linear-sweep: 3s linear infinite uy-ai-gradient-linear-sweep;
--uy-animate-uy-ai-gradient-radial-pulse: 2s ease-in-out infinite uy-ai-gradient-radial-pulse;
--uy-animate-spin: 2s linear infinite spin;
--uy-animate-arc-shrink: 2s ease-in-out infinite arc-shrink;
--uy-animate-pulse: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse;
--uy-animate-slide: 4s cubic-bezier(1, 0, 0.36, 0.71) infinite slide;
--uy-animate-fade-in: 0.3s linear 1 fade-in;
--uy-animate-fade-out: 0.3s linear 1 fade-out;
--uy-animate-slide-right-fade-in: 0.3s ease-in 1 slide-right-fade-in;
--uy-animate-slide-right-fade-out: 0.3s ease-out 1 slide-right-fade-out;
--uy-animate-slide-up-fade-in: 0.3s ease-in 1 slide-up-fade-in;
--uy-animate-slide-down-fade-out: 0.3s ease-out 1 slide-down-fade-out;
--uy-animate-zoom-in: 0.3s ease-in 1 zoom-in;
--uy-animate-zoom-out: 0.3s ease-out 1 zoom-out;
--uy-aspect-video: 16 / 9;
--uy-aspect-square: 1 / 1;
--uy-breakpoint-sm: 490px;
--uy-breakpoint-md: 768px;
--uy-breakpoint-lg: 1280px;
--uy-breakpoint-xl: 1440px;
--uy-text-50: 12px;
--uy-text-75: 14px;
--uy-text-100: 16px;
--uy-text-200: 18px;
--uy-text-300: 20px;
--uy-text-400: 22px;
--uy-text-500: 24px;
--uy-text-600: 28px;
--uy-text-800: 30px;
--uy-text-1000: 32px;
--uy-text-1200: 38px;
--uy-text-1400: 52px;
--uy-text-1600: 66px;
--uy-font-weight-regular: 400;
--uy-font-weight-medium: 500;
--uy-font-weight-semibold: 600;
--uy-font-weight-bold: 700;
--uy-grid-layout-columns--default: 6;
--uy-grid-layout-columns--md: 12;
--uy-grid-layout-columns--lg: 12;
--uy-radius-0: 0;
--uy-radius-25: 2px;
--uy-radius-50: 4px;
--uy-radius-75: 6px;
--uy-radius-100: 8px;
--uy-radius-125: 10px;
--uy-radius-150: 12px;
--uy-radius-200: 16px;
--uy-radius-300: 24px;
--uy-radius-400: 32px;
--uy-radius-circle: 50%;
--uy-radius-pill: 9999px;
--uy-container-app-menu: 296px; /** Width of the main menu in global App layout */
--uy-container-lg: 984px; /** Maximum width for layout containers at large resolutions */
--uy-container-xl: 1360px; /** Maximum width for layout containers at extra-large resolutions */
--uy-container-content: 523px; /** Maximum width for content containers */
--uy-container-section: 703px; /** Maximum width for section containers */
--uy-container-page: 1063px; /** Maximum width for page containers */
--uy-container-app: 1439px; /** Maximum width for app containers */
--uy-spacing-0: 0;
--uy-spacing-25: 2px;
--uy-spacing-50: 4px;
--uy-spacing-75: 6px;
--uy-spacing-100: 8px;
--uy-spacing-125: 10px;
--uy-spacing-150: 12px;
--uy-spacing-200: 16px;
--uy-spacing-250: 20px;
--uy-spacing-300: 24px;
--uy-spacing-400: 32px;
--uy-spacing-500: 40px;
--uy-spacing-600: 48px;
--uy-spacing-800: 64px;
--uy-spacing-1000: 80px;
--uy-spacing: 8px; /** Base spacing value */
--uy-color-grayscale-l1: oklch(0.9911 0 0);
--uy-color-grayscale-l2: oklch(0.9848 0.0013 106.42);
--uy-color-grayscale-l3: oklch(0.9699 0.0013 106.42);
--uy-color-grayscale-l4: oklch(0.9556 0.0017 67.8);
--uy-color-grayscale-l5: oklch(0.9251 0.0029 84.56);
--uy-color-grayscale-l6: oklch(0.8771 0.0035 67.78);
--uy-color-grayscale-l7: oklch(0.767 0.003 84.56);
--uy-color-grayscale-l8: oklch(0.6649 0.0056 67.73);
--uy-color-grayscale-l9: oklch(0.5391 0.0052 78.28);
--uy-color-grayscale-l10: oklch(0.4661 0.005 56.28);
--uy-color-grayscale-l11: oklch(0.3207 0.0017 106.5);
--uy-color-grayscale-l12: oklch(0.1586 0.0021 106.63);
--uy-color-grayscale-l0: oklch(1 0 0);
--uy-color-red-l1: oklch(0.9779 0.0107 17.34);
--uy-color-red-l2: oklch(0.9438 0.0288 9.72);
--uy-color-red-l3: oklch(0.8949 0.0486 14.94);
--uy-color-red-l4: oklch(0.7858 0.1152 16);
--uy-color-red-l5: oklch(0.7189 0.1605 17.78);
--uy-color-red-l6: oklch(0.6571 0.1976 21.05);
--uy-color-red-l7: oklch(0.5925 0.2135 24.14);
--uy-color-red-l8: oklch(0.5788 0.2084 23.23);
--uy-color-red-l9: oklch(0.5092 0.1763 22.09);
--uy-color-red-l10: oklch(0.4334 0.1489 22.25);
--uy-color-red-l11: oklch(0.3562 0.1212 22.02);
--uy-color-red-l12: oklch(0.1754 0.0561 18.19);
--uy-color-green-l1: oklch(0.9887 0.0074 164.95);
--uy-color-green-l2: oklch(0.9638 0.0222 160.23);
--uy-color-green-l3: oklch(0.9213 0.055 160.67);
--uy-color-green-l4: oklch(0.8603 0.0965 159.64);
--uy-color-green-l5: oklch(0.8172 0.1262 158.13);
--uy-color-green-l6: oklch(0.7769 0.1534 156.44);
--uy-color-green-l7: oklch(0.7385 0.1744 153.87);
--uy-color-green-l8: oklch(0.5761 0.1497 151.64);
--uy-color-green-l9: oklch(0.4742 0.116 153.14);
--uy-color-green-l10: oklch(0.3967 0.0946 153.9);
--uy-color-green-l11: oklch(0.3185 0.0735 154.83);
--uy-color-green-l12: oklch(0.2461 0.0522 158.42);
--uy-color-yellow-l1: oklch(0.9934 0.0107 95.16);
--uy-color-yellow-l2: oklch(0.9791 0.0304 98.85);
--uy-color-yellow-l3: oklch(0.9552 0.0699 99.66);
--uy-color-yellow-l4: oklch(0.9256 0.1141 100.74);
--uy-color-yellow-l5: oklch(0.8959 0.1309 97.03);
--uy-color-yellow-l6: oklch(0.8435 0.1632 90.59);
--uy-color-yellow-l7: oklch(0.7782 0.1595 85.08);
--uy-color-yellow-l8: oklch(0.6942 0.1446 76.06);
--uy-color-yellow-l9: oklch(0.6392 0.1345 73.48);
--uy-color-yellow-l10: oklch(0.54 0.1134 74.27);
--uy-color-yellow-l11: oklch(0.3039 0.0634 78.02);
--uy-color-yellow-l12: oklch(0.2215 0.0459 79.81);
--uy-color-cyan-l1: oklch(0.9789 0.0099 267.36);
--uy-color-cyan-l2: oklch(0.9513 0.0234 256.1);
--uy-color-cyan-l3: oklch(0.8887 0.0523 253.72);
--uy-color-cyan-l4: oklch(0.8458 0.0751 252.94);
--uy-color-cyan-l5: oklch(0.7746 0.1086 254.47);
--uy-color-cyan-l6: oklch(0.6184 0.1983 264.1);
--uy-color-cyan-l7: oklch(0.4946 0.2354 263.16);
--uy-color-cyan-l8: oklch(0.457 0.2302 263.15);
--uy-color-cyan-l9: oklch(0.3776 0.1882 262.89);
--uy-color-cyan-l10: oklch(0.3411 0.1683 262.78);
--uy-color-cyan-l11: oklch(0.2659 0.1237 262.08);
--uy-color-cyan-l12: oklch(0.1763 0.0709 259.71);
--uy-color-blue-l1: oklch(0.9795 0.0109 225.98);
--uy-color-blue-l2: oklch(0.9638 0.0236 223.67);
--uy-color-blue-l3: oklch(0.9331 0.0378 224.26);
--uy-color-blue-l4: oklch(0.8694 0.0739 225.17);
--uy-color-blue-l5: oklch(0.7994 0.0985 228.77);
--uy-color-blue-l6: oklch(0.7317 0.1149 230.76);
--uy-color-blue-l7: oklch(0.6499 0.1386 236.58);
--uy-color-blue-l8: oklch(0.543 0.1224 240.11);
--uy-color-blue-l9: oklch(0.485 0.1174 244.2);
--uy-color-blue-l10: oklch(0.4143 0.1151 250.54);
--uy-color-blue-l11: oklch(0.314 0.0882 251.58);
--uy-color-blue-l12: oklch(0.2013 0.0525 250.57);
--uy-color-purple-l1: oklch(0.9873 0.0067 295.45);
--uy-color-purple-l2: oklch(0.9391 0.0369 306.42);
--uy-color-purple-l3: oklch(0.8642 0.0836 305.11);
--uy-color-purple-l4: oklch(0.8005 0.1252 304.54);
--uy-color-purple-l5: oklch(0.706 0.1875 302.64);
--uy-color-purple-l6: oklch(0.5961 0.2573 298.62);
--uy-color-purple-l7: oklch(0.5052 0.2752 292.38);
--uy-color-purple-l8: oklch(0.3999 0.2255 290.56);
--uy-color-purple-l9: oklch(0.3413 0.1914 291.48);
--uy-color-purple-l10: oklch(0.28 0.1557 292.93);
--uy-color-purple-l11: oklch(0.2178 0.12 294.49);
--uy-color-purple-l12: oklch(0.1941 0.1097 276.86);
--uy-color-plum-l1: oklch(0.9807 0.0169 325.7);
--uy-color-plum-l2: oklch(0.9505 0.0442 325.92);
--uy-color-plum-l3: oklch(0.8963 0.0961 326.34);
--uy-color-plum-l4: oklch(0.8463 0.1478 326.78);
--uy-color-plum-l5: oklch(0.7795 0.2233 327.45);
--uy-color-plum-l6: oklch(0.7006 0.2678 327.97);
--uy-color-plum-l7: oklch(0.6697 0.3048 328.34);
--uy-color-plum-l8: oklch(0.6039 0.2776 328.36);
--uy-color-plum-l9: oklch(0.558 0.2565 328.36);
--uy-color-plum-l10: oklch(0.4185 0.1924 328.36);
--uy-color-plum-l11: oklch(0.2871 0.1319 328.36);
--uy-color-plum-l12: oklch(0.2113 0.0971 328.36);
--uy-color-peach-l1: oklch(0.9727 0.0136 34.3);
--uy-color-peach-l2: oklch(0.9063 0.049 32.14);
--uy-color-peach-l3: oklch(0.8203 0.1021 33.46);
--uy-color-peach-l9: oklch(0.7494 0.1529 33.76);
--uy-color-peach-l10: oklch(0.6815 0.2092 33.95);
--uy-color-peach-l11: oklch(0.4527 0.1489 33.91);
--uy-color-peach-l12: oklch(0.2279 0.0758 37.26);
--uy-color-sunglow-l1: oklch(0.9778 0.0239 85.79);
--uy-color-sunglow-l2: oklch(0.946 0.0574 85.03);
--uy-color-sunglow-l3: oklch(0.8873 0.1279 86.39);
--uy-color-sunglow-l9: oklch(0.8236 0.1696 79.25);
--uy-color-sunglow-l10: oklch(0.5536 0.101 84.49);
--uy-color-sunglow-l11: oklch(0.4123 0.074 83.78);
--uy-color-sunglow-l12: oklch(0.2854 0.0586 83.42);
--uy-color-teal-l1: oklch(0.9868 0.0139 185.97);
--uy-color-teal-l2: oklch(0.9654 0.0274 188.32);
--uy-color-teal-l3: oklch(0.9463 0.0508 185.69);
--uy-color-teal-l4: oklch(0.9306 0.0745 184.48);
--uy-color-teal-l5: oklch(0.895 0.0982 184.34);
--uy-color-teal-l6: oklch(0.8373 0.13 182.66);
--uy-color-teal-l7: oklch(0.8118 0.143 180.05);
--uy-color-teal-l8: oklch(0.7565 0.1386 178.63);
--uy-color-teal-l9: oklch(0.6404 0.1174 178.57);
--uy-color-teal-l10: oklch(0.5368 0.0986 178.28);
--uy-color-teal-l11: oklch(0.3929 0.0714 179.75);
--uy-color-teal-l12: oklch(0.2522 0.045 182.68);
--uy-color-orange-l1: oklch(0.9895 0.009 78.28);
--uy-color-orange-l2: oklch(0.9659 0.022 63.21);
--uy-color-orange-l3: oklch(0.9129 0.061 66.14);
--uy-color-orange-l4: oklch(0.8414 0.1134 63.98);
--uy-color-orange-l5: oklch(0.7894 0.1483 59.58);
--uy-color-orange-l6: oklch(0.7481 0.1758 55.37);
--uy-color-orange-l7: oklch(0.7044 0.189 48.98);
--uy-color-orange-l8: oklch(0.6242 0.1707 47.74);
--uy-color-orange-l9: oklch(0.5228 0.1418 48.28);
--uy-color-orange-l10: oklch(0.4177 0.1105 49.96);
--uy-color-orange-l11: oklch(0.3198 0.082 52.21);
--uy-color-orange-l12: oklch(0.2253 0.0542 57.58);
--uy-color-utility-backdrop: oklch(0.1617 0.037 253.15 / 0.6);
--uy-color-utility-shadow-100: oklch(0 0 0 / 0.058823529411764705);
--uy-color-utility-shadow-200: oklch(0 0 0 / 0.0784313725490196);
--uy-color-utility-shadow-300: oklch(0 0 0 / 0.0784313725490196);
--uy-color-utility-shadow-400: oklch(0 0 0 / 0.10196078431372549);
--uy-color-utility-shadow-500: oklch(0 0 0 / 0.12156862745098039);
--uy-color-utility-shadow-600: oklch(0 0 0 / 0.12156862745098039);
--uy-shadow-canvas: none;
--uy-font-serif: "Heartbreak Eighties", serif;
--uy-font-sans: Inter, sans-serif;
--uy-font-mono: "Roboto Mono", monospace;
--uy-grid-layout-gutter--default: calc(var(--uy-spacing) * 2);
--uy-grid-layout-margin--default: calc(var(--uy-spacing) * 2);
--uy-grid-layout-gutter--md: calc(var(--uy-spacing) * 2);
--uy-grid-layout-margin--md: calc(var(--uy-spacing) * 3);
--uy-grid-layout-gutter--lg: calc(var(--uy-spacing) * 2);
--uy-grid-layout-margin--lg: calc(var(--uy-spacing) * 5);
--uy-radius-xs: var(--uy-radius-50);
--uy-radius-sm: var(--uy-radius-75);
--uy-radius-md: var(--uy-radius-100);
--uy-radius-lg: var(--uy-radius-200);
--uy-radius-xl: var(--uy-radius-300);
--uy-color-canvas: var(--uy-color-grayscale-l2);
--uy-color-surface-primary-highest: var(--uy-color-plum-l10);
--uy-color-surface-primary-high: var(--uy-color-plum-l8);
--uy-color-surface-primary: var(--uy-color-plum-l6);
--uy-color-surface-primary-enabled: var(--uy-color-plum-l6);
--uy-color-surface-primary-hover: var(--uy-color-plum-l7);
--uy-color-surface-primary-pressed: var(--uy-color-plum-l8);
--uy-color-surface-primary-focus: var(--uy-color-plum-l6);
--uy-color-surface-primary-active: var(--uy-color-plum-l6);
--uy-color-surface-primary-disabled: var(--uy-color-grayscale-l5);
--uy-color-surface-primary-low: var(--uy-color-plum-l3);
--uy-color-surface-primary-lowest: var(--uy-color-plum-l1);
--uy-color-surface-primary-lowest-enabled: var(--uy-color-plum-l1);
--uy-color-surface-primary-lowest-hover: var(--uy-color-grayscale-l1);
--uy-color-surface-primary-lowest-pressed: var(--uy-color-plum-l1);
--uy-color-surface-primary-lowest-focus: var(--uy-color-plum-l4);
--uy-color-surface-primary-lowest-active: var(--uy-color-plum-l1);
--uy-color-surface-primary-lowest-disabled: var(--uy-color-grayscale-l2);
--uy-color-surface-neutral: var(--uy-color-grayscale-l0);
--uy-color-surface-neutral-enabled: var(--uy-color-grayscale-l0);
--uy-color-surface-neutral-hover: var(--uy-color-grayscale-l3);
--uy-color-surface-neutral-pressed: var(--uy-color-plum-l2);
--uy-color-surface-neutral-focus: var(--uy-color-grayscale-l2);
--uy-color-surface-neutral-active: var(--uy-color-plum-l2);
--uy-color-surface-neutral-selected: var(--uy-color-grayscale-l3);
--uy-color-surface-neutral-disabled: var(--uy-color-grayscale-l4);
--uy-color-surface-neutral-low: var(--uy-color-grayscale-l3);
--uy-color-surface-neutral-low-enabled: var(--uy-color-grayscale-l3);
--uy-color-surface-neutral-low-hover: var(--uy-color-grayscale-l4);
--uy-color-surface-neutral-low-pressed: var(--uy-color-grayscale-l5);
--uy-color-surface-neutral-low-focus: var(--uy-color-grayscale-l3);
--uy-color-surface-neutral-low-active: var(--uy-color-grayscale-l3);
--uy-color-surface-neutral-low-disabled: var(--uy-color-grayscale-l5);
--uy-color-surface-neutral-low-selected: var(--uy-color-grayscale-l3);
--uy-color-surface-neutral-lowest: var(--uy-color-grayscale-l4);
--uy-color-surface-neutral-lowest-enabled: var(--uy-color-grayscale-l4);
--uy-color-surface-neutral-lowest-hover: var(--uy-color-grayscale-l5);
--uy-color-surface-neutral-lowest-pressed: var(--uy-color-grayscale-l6);
--uy-color-surface-neutral-lowest-focus: var(--uy-color-grayscale-l4);
--uy-color-surface-neutral-lowest-active: var(--uy-color-grayscale-l5);
--uy-color-surface-neutral-lowest-disabled: var(--uy-color-grayscale-l4);
--uy-color-surface-neutral-lowest-selected: var(--uy-color-grayscale-l6);
--uy-color-surface-neutral-highest: var(--uy-color-grayscale-l12);
--uy-color-surface-neutral-highest-enabled: var(--uy-color-grayscale-l12);
--uy-color-surface-neutral-highest-hover: var(--uy-color-grayscale-l11);
--uy-color-surface-neutral-highest-pressed: var(--uy-color-grayscale-l12);
--uy-color-surface-neutral-highest-active: var(--uy-color-grayscale-l12);
--uy-color-surface-neutral-highest-focus: var(--uy-color-grayscale-l12);
--uy-color-surface-neutral-highest-disabled: var(--uy-color-grayscale-l5);
--uy-color-surface-neutral-highest-selected: var(--uy-color-grayscale-l12);
--uy-color-surface-danger: var(--uy-color-red-l7);
--uy-color-surface-danger-enabled: var(--uy-color-red-l7);
--uy-color-surface-danger-hover: var(--uy-color-red-l8);
--uy-color-surface-danger-pressed: var(--uy-color-red-l9);
--uy-color-surface-danger-focus: var(--uy-color-red-l7);
--uy-color-surface-danger-active: var(--uy-color-red-l7);
--uy-color-surface-danger-disabled: var(--uy-color-grayscale-l8);
--uy-color-surface-danger-low: var(--uy-color-red-l3);
--uy-color-surface-danger-lowest: var(--uy-color-red-l2);
--uy-color-surface-danger-lowest-enabled: var(--uy-color-red-l1);
--uy-color-surface-danger-lowest-hover: var(--uy-color-red-l2);
--uy-color-surface-danger-lowest-pressed: var(--uy-color-red-l3);
--uy-color-surface-danger-lowest-focus: var(--uy-color-grayscale-l0);
--uy-color-surface-danger-lowest-active: var(--uy-color-red-l2);
--uy-color-surface-danger-lowest-disabled: var(--uy-color-grayscale-l8);
--uy-color-surface-warning: var(--uy-color-yellow-l6);
--uy-color-surface-warning-enabled: var(--uy-color-yellow-l6);
--uy-color-surface-warning-hover: var(--uy-color-yellow-l7);
--uy-color-surface-warning-pressed: var(--uy-color-yellow-l8);
--uy-color-surface-warning-focus: var(--uy-color-yellow-l6);
--uy-color-surface-warning-active: var(--uy-color-yellow-l6);
--uy-color-surface-warning-disabled: var(--uy-color-grayscale-l8);
--uy-color-surface-warning-low: var(--uy-color-yellow-l3);
--uy-color-surface-warning-lowest: var(--uy-color-yellow-l2);
--uy-color-surface-warning-lowest-enabled: var(--uy-color-yellow-l2);
--uy-color-surface-warning-lowest-hover: var(--uy-color-yellow-l2);
--uy-color-surface-warning-lowest-pressed: var(--uy-color-yellow-l3);
--uy-color-surface-warning-lowest-focus: var(--uy-color-grayscale-l0);
--uy-color-surface-warning-lowest-active: var(--uy-color-yellow-l2);
--uy-color-surface-warning-lowest-disabled: var(--uy-color-grayscale-l8);
--uy-color-surface-success: var(--uy-color-green-l8);
--uy-color-surface-success-low: var(--uy-color-green-l3);
--uy-color-surface-success-lowest: var(--uy-color-green-l2);
--uy-color-surface-success-lowest-enabled: var(--uy-color-green-l2);
--uy-color-surface-success-lowest-hover: var(--uy-color-green-l2);
--uy-color-surface-success-lowest-pressed: var(--uy-color-green-l3);
--uy-color-surface-success-lowest-focus: var(--uy-color-green-l4);
--uy-color-surface-success-lowest-active: var(--uy-color-green-l2);
--uy-color-surface-success-lowest-disabled: var(--uy-color-grayscale-l8);
--uy-color-surface-info: var(--uy-color-blue-l4);
--uy-color-surface-info-low: var(--uy-color-blue-l3);
--uy-color-surface-info-lowest: var(--uy-color-blue-l2);
--uy-color-surface-info-lowest-enabled: var(--uy-color-blue-l2);
--uy-color-surface-info-lowest-hover: var(--uy-color-blue-l3);
--uy-color-surface-info-lowest-pressed: var(--uy-color-blue-l3);
--uy-color-surface-info-lowest-focus: var(--uy-color-blue-l2);
--uy-color-surface-info-lowest-active: var(--uy-color-blue-l2);
--uy-color-surface-info-lowest-disabled: var(--uy-color-grayscale-l8);
--uy-color-surface-promo: var(--uy-color-plum-l6);
--uy-color-surface-promo-low: var(--uy-color-plum-l3);
--uy-color-surface-promo-lowest: var(--uy-color-plum-l2);
--uy-color-surface-ai-low: var(--uy-color-purple-l6);
--uy-color-surface-form-enabled: var(--uy-color-grayscale-l0);
--uy-color-surface-form-hover: var(--uy-color-grayscale-l0);
--uy-color-surface-form-pressed: var(--uy-color-grayscale-l0);
--uy-color-surface-form-focus: var(--uy-color-grayscale-l0);
--uy-color-surface-form-active: var(--uy-color-plum-l6);
--uy-color-surface-form-selected: var(--uy-color-plum-l2);
--uy-color-surface-form-disabled: var(--uy-color-grayscale-l3);
--uy-color-surface-form-read-only: var(--uy-color-grayscale-l9);
--uy-color-surface-form-error: var(--uy-color-red-l2);
--uy-color-surface-form-high-enabled: var(--uy-color-grayscale-l3);
--uy-color-surface-form-high-hover: var(--uy-color-grayscale-l4);
--uy-color-surface-form-high-pressed: var(--uy-color-grayscale-l2);
--uy-color-surface-form-high-focus: var(--uy-color-grayscale-l3);
--uy-color-surface-form-high-active: var(--uy-color-grayscale-l0);
--uy-color-surface-form-high-selected: var(--uy-color-plum-l2);
--uy-color-surface-form-high-disabled: var(--uy-color-grayscale-l2);
--uy-color-surface-form-high-read-only: var(--uy-color-grayscale-l2);
--uy-color-surface-form-high-error: var(--uy-color-red-l2);
--uy-color-surface-inverted: var(--uy-color-grayscale-l12);
--uy-color-surface-inverted-enabled: var(--uy-color-grayscale-l12);
--uy-color-surface-inverted-hover: var(--uy-color-grayscale-l10);
--uy-color-surface-inverted-pressed: var(--uy-color-grayscale-l11);
--uy-color-surface-inverted-focus: var(--uy-color-grayscale-l12);
--uy-color-surface-inverted-active: var(--uy-color-grayscale-l11);
--uy-color-surface-inverted-low-enabled: var(--uy-color-grayscale-l11);
--uy-color-surface-inverted-low-hover: var(--uy-color-grayscale-l10);
--uy-color-surface-inverted-low-pressed: var(--uy-color-grayscale-l11);
--uy-color-surface-inverted-low-active: var(--uy-color-grayscale-l11);
--uy-color-surface-inverted-low-focus: var(--uy-color-grayscale-l11);
--uy-color-surface-inverted-low-disabled: var(--uy-color-grayscale-l10);
--uy-color-surface-decorative-teal: var(--uy-color-teal-l6);
--uy-color-surface-decorative-teal-high: var(--uy-color-teal-l9);
--uy-color-surface-decorative-teal-low: var(--uy-color-teal-l3);
--uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-l1);
--uy-color-surface-decorative-purple-high: var(--uy-color-purple-l9);
--uy-color-surface-decorative-purple: var(--uy-color-purple-l6);
--uy-color-surface-decorative-purple-low: var(--uy-color-purple-l3);
--uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-l1);
--uy-color-surface-decorative-plum: var(--uy-color-plum-l6);
--uy-color-surface-decorative-plum-high: var(--uy-color-plum-l9);
--uy-color-surface-decorative-plum-low: var(--uy-color-plum-l3);
--uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-l1);
--uy-color-surface-decorative-orange: var(--uy-color-orange-l6);
--uy-color-surface-decorative-orange-high: var(--uy-color-orange-l9);
--uy-color-surface-decorative-orange-low: var(--uy-color-orange-l3);
--uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-l1);
--uy-color-content-primary: var(--uy-color-plum-l6);
--uy-color-content-primary-enabled: var(--uy-color-plum-l8);
--uy-color-content-primary-hover: var(--uy-color-plum-l9);
--uy-color-content-primary-pressed: var(--uy-color-plum-l10);
--uy-color-content-primary-focus: var(--uy-color-plum-l8);
--uy-color-content-primary-active: var(--uy-color-plum-l8);
--uy-color-content-primary-disabled: var(--uy-color-grayscale-l7);
--uy-color-content-primary-high: var(--uy-color-plum-l10);
--uy-color-content-neutral: var(--uy-color-grayscale-l12);
--uy-color-content-neutral-enabled: var(--uy-color-grayscale-l12);
--uy-color-content-neutral-hover: var(--uy-color-grayscale-l12);
--uy-color-content-neutral-pressed: var(--uy-color-grayscale-l12);
--uy-color-content-neutral-focus: var(--uy-color-grayscale-l12);
--uy-color-content-neutral-active: var(--uy-color-grayscale-l12);
--uy-color-content-neutral-disabled: var(--uy-color-grayscale-l7);
--uy-color-content-neutral-low: var(--uy-color-grayscale-l11);
--uy-color-content-neutral-lowest: var(--uy-color-grayscale-l9);
--uy-color-content-neutral-lowest-enabled: var(--uy-color-grayscale-l9);
--uy-color-content-neutral-lowest-hover: var(--uy-color-grayscale-l10);
--uy-color-content-neutral-lowest-pressed: var(--uy-color-grayscale-l12);
--uy-color-content-neutral-lowest-focus: var(--uy-color-grayscale-l9);
--uy-color-content-neutral-lowest-active: var(--uy-color-grayscale-l9);
--uy-color-content-neutral-lowest-disabled: var(--uy-color-grayscale-l7);
--uy-color-content-danger: var(--uy-color-red-l8);
--uy-color-content-danger-enabled: var(--uy-color-red-l9);
--uy-color-content-danger-hover: var(--uy-color-red-l10);
--uy-color-content-danger-pressed: var(--uy-color-red-l11);
--uy-color-content-danger-focus: var(--uy-color-red-l9);
--uy-color-content-danger-active: var(--uy-color-red-l9);
--uy-color-content-danger-disabled: var(--uy-color-grayscale-l8);
--uy-color-content-danger-high: var(--uy-color-red-l10);
--uy-color-content-warning: var(--uy-color-yellow-l7);
--uy-color-content-warning-enabled: var(--uy-color-yellow-l11);
--uy-color-content-warning-hover: var(--uy-color-yellow-l11);
--uy-color-content-warning-pressed: var(--uy-color-yellow-l12);
--uy-color-content-warning-focus: var(--uy-color-yellow-l11);
--uy-color-content-warning-active: var(--uy-color-yellow-l11);
--uy-color-content-warning-disabled: var(--uy-color-grayscale-l8);
--uy-color-content-warning-high: var(--uy-color-yellow-l11);
--uy-color-content-success: var(--uy-color-green-l8);
--uy-color-content-success-enabled: var(--uy-color-green-l9);
--uy-color-content-success-hover: var(--uy-color-green-l10);
--uy-color-content-success-pressed: var(--uy-color-green-l11);
--uy-color-content-success-focus: var(--uy-color-green-l9);
--uy-color-content-success-active: var(--uy-color-green-l10);
--uy-color-content-success-disabled: var(--uy-color-grayscale-l8);
--uy-color-content-success-high: var(--uy-color-green-l11);
--uy-color-content-info: var(--uy-color-blue-l7);
--uy-color-content-info-enabled: var(--uy-color-blue-l9);
--uy-color-content-info-hover: var(--uy-color-blue-l10);
--uy-color-content-info-pressed: var(--uy-color-blue-l11);
--uy-color-content-info-focus: var(--uy-color-blue-l9);
--uy-color-content-info-active: var(--uy-color-blue-l10);
--uy-color-content-info-disabled: var(--uy-color-grayscale-l8);
--uy-color-content-info-high: var(--uy-color-blue-l11);
--uy-color-content-promo: var(--uy-color-plum-l6);
--uy-color-content-promo-high: var(--uy-color-plum-l10);
--uy-color-content-form-enabled: var(--uy-color-grayscale-l12);
--uy-color-content-form-hover: var(--uy-color-grayscale-l12);
--uy-color-content-form-pressed: var(--uy-color-grayscale-l12);
--uy-color-content-form-focus: var(--uy-color-grayscale-l12);
--uy-color-content-form-active: var(--uy-color-grayscale-l12);
--uy-color-content-form-selected: var(--uy-color-grayscale-l12);
--uy-color-content-form-disabled: var(--uy-color-grayscale-l8);
--uy-color-content-form-read-only: var(--uy-color-grayscale-l8);
--uy-color-content-form-invalid: var(--uy-color-red-l8);
--uy-color-content-inverted: var(--uy-color-grayscale-l0);
--uy-color-content-inverted-enabled: var(--uy-color-grayscale-l0);
--uy-color-content-inverted-hover: var(--uy-color-grayscale-l0);
--uy-color-content-inverted-pressed: var(--uy-color-grayscale-l0);
--uy-color-content-inverted-focus: var(--uy-color-grayscale-l0);
--uy-color-content-inverted-active: var(--uy-color-grayscale-l0);
--uy-color-content-inverted-disabled: var(--uy-color-grayscale-l7);
--uy-color-content-decorative-teal: var(--uy-color-teal-l6);
--uy-color-content-decorative-teal-high: var(--uy-color-teal-l10);
--uy-color-content-decorative-purple: var(--uy-color-purple-l6);
--uy-color-content-decorative-purple-high: var(--uy-color-purple-l10);
--uy-color-content-decorative-plum: var(--uy-color-plum-l6);
--uy-color-content-decorative-plum-high: var(--uy-color-plum-l10);
--uy-color-content-decorative-orange: var(--uy-color-orange-l6);
--uy-color-content-decorative-orange-high: var(--uy-color-orange-l10);
--uy-color-border-primary: var(--uy-color-plum-l7);
--uy-color-border-primary-enabled: var(--uy-color-plum-l7);
--uy-color-border-primary-hover: var(--uy-color-plum-l8);
--uy-color-border-primary-pressed: var(--uy-color-plum-l9);
--uy-color-border-primary-focus: var(--uy-color-plum-l7);
--uy-color-border-primary-active: var(--uy-color-plum-l7);
--uy-color-border-primary-disabled: var(--uy-color-grayscale-l4);
--uy-color-border-primary-lowest: var(--uy-color-plum-l3);
--uy-color-border-neutral-high: var(--uy-color-grayscale-l7);
--uy-color-border-neutral-high-enabled: var(--uy-color-grayscale-l8);
--uy-color-border-neutral-high-hover: var(--uy-color-grayscale-l9);
--uy-color-border-neutral-high-pressed: var(--uy-color-grayscale-l10);
--uy-color-border-neutral-high-focus: var(--uy-color-grayscale-l8);
--uy-color-border-neutral-high-active: var(--uy-color-grayscale-l8);
--uy-color-border-neutral-high-disabled: var(--uy-color-grayscale-l5);
--uy-color-border-neutral: var(--uy-color-grayscale-l5);
--uy-color-border-neutral-enabled: var(--uy-color-grayscale-l6);
--uy-color-border-neutral-hover: var(--uy-color-grayscale-l6);
--uy-color-border-neutral-active: var(--uy-color-grayscale-l7);
--uy-color-border-neutral-pressed: var(--uy-color-grayscale-l6);
--uy-color-border-neutral-selected: var(--uy-color-grayscale-l6);
--uy-color-border-neutral-disabled: var(--uy-color-grayscale-l5);
--uy-color-border-neutral-low: var(--uy-color-grayscale-l4);
--uy-color-border-neutral-highest: var(--uy-color-grayscale-l12);
--uy-color-border-neutral-highest-enabled: var(--uy-color-grayscale-l12);
--uy-color-border-neutral-highest-hover: var(--uy-color-grayscale-l11);
--uy-color-border-neutral-highest-pressed: var(--uy-color-grayscale-l12);
--uy-color-border-neutral-highest-active: var(--uy-color-grayscale-l12);
--uy-color-border-neutral-highest-focus: var(--uy-color-grayscale-l12);
--uy-color-border-neutral-highest-disabled: var(--uy-color-grayscale-l4);
--uy-color-border-danger: var(--uy-color-red-l4);
--uy-color-border-danger-lowest: var(--uy-color-red-l2);
--uy-color-border-warning: var(--uy-color-yellow-l4);
--uy-color-border-warning-lowest: var(--uy-color-yellow-l2);
--uy-color-border-success: var(--uy-color-green-l8);
--uy-color-border-success-low: var(--uy-color-green-l4);
--uy-color-border-success-lowest: var(--uy-color-green-l2);
--uy-color-border-info: var(--uy-color-blue-l4);
--uy-color-border-info-lowest: var(--uy-color-blue-l2);
--uy-color-border-promo: var(--uy-color-plum-l4);
--uy-color-border-promo-lowest: var(--uy-color-plum-l3);
--uy-color-border-form-enabled: var(--uy-color-grayscale-l8);
--uy-color-border-form-hover: var(--uy-color-grayscale-l9);
--uy-color-border-form-pressed: var(--uy-color-grayscale-l10);
--uy-color-border-form-focus: var(--uy-color-grayscale-l8);
--uy-color-border-form-active: var(--uy-color-grayscale-l12);
--uy-color-border-form-selected: var(--uy-color-plum-l6);
--uy-color-border-form-disabled: var(--uy-color-grayscale-l5);
--uy-color-border-form-read-only: var(--uy-color-grayscale-l5);
--uy-color-border-form-error: var(--uy-color-red-l8);
--uy-color-border-inverted: var(--uy-color-grayscale-l0);
--uy-color-border-inverted-enabled: var(--uy-color-grayscale-l2);
--uy-color-border-inverted-hover: var(--uy-color-grayscale-l3);
--uy-color-border-inverted-pressed: var(--uy-color-grayscale-l4);
--uy-color-border-inverted-focus: var(--uy-color-grayscale-l2);
--uy-color-border-inverted-active: var(--uy-color-grayscale-l1);
--uy-color-border-inverted-disabled: var(--uy-color-grayscale-l7);
--uy-color-border-inverted-high: var(--uy-color-grayscale-l2);
--uy-color-utility-focus-ring: var(--uy-color-blue-l7);
--uy-color-utility-inverted-focus-ring: var(--uy-color-yellow-l4);
--uy-gradient-payfit-ai:
var(--uy-color-yellow-l5) 0%, var(--uy-color-plum-l5) 50%, var(--uy-color-blue-l4) 100%; /** Gradients for Payfit AI effects and components */
--uy-gradient-payfit-ai-animated:
var(--uy-color-yellow-l5) 0%, var(--uy-color-plum-l5) 12.5%, var(--uy-color-blue-l4) 25%,
var(--uy-color-plum-l5) 37.5%, var(--uy-color-yellow-l5) 50%, var(--uy-color-plum-l5) 62.5%,
var(--uy-color-blue-l4) 75%, var(--uy-color-plum-l5) 87.5%, var(--uy-color-yellow-l5) 100%; /** Seamlessly repeating PayFit AI gradient for animated background-position effects */
--uy-shadow-100: 0px 1px 4px 1px var(--uy-color-utility-shadow-100);
--uy-shadow-200: 0px 2px 8px 1px var(--uy-color-utility-shadow-200);
--uy-shadow-300: 0px 5px 10px 1px var(--uy-color-utility-shadow-300);
--uy-shadow-400: 0px 8px 18px 2px var(--uy-color-utility-shadow-400);
--uy-shadow-500: 0px 8px 24px 4px var(--uy-color-utility-shadow-500);
--uy-shadow-600: 0px 15px 30px 5px var(--uy-color-utility-shadow-600);
--uy-typography-default-display-heading: var(--uy-font-weight-regular) var(--uy-text-1200)/1.1578
var(--uy-font-serif);
--uy-typography-sm-display-heading: var(--uy-font-weight-regular) var(--uy-text-1200)/1.1578 var(--uy-font-serif);
--uy-typography-default-h1: var(--uy-font-weight-regular) var(--uy-text-1000)/1.125 var(--uy-font-serif);
--uy-typography-sm-h1: var(--uy-font-weight-regular) var(--uy-text-1000)/1.125 var(--uy-font-serif);
--uy-typography-default-h2: var(--uy-font-weight-semibold) var(--uy-text-400)/1.273 var(--uy-font-sans);
--uy-typography-sm-h2: var(--uy-font-weight-semibold) var(--uy-text-500)/1.333 var(--uy-font-sans);
--uy-typography-default-h3: var(--uy-font-weight-semibold) var(--uy-text-200)/1.333 var(--uy-font-sans);
--uy-typography-sm-h3: var(--uy-font-weight-semibold) var(--uy-text-300)/1.2 var(--uy-font-sans);
--uy-typography-default-h4: var(--uy-font-weight-semibold) var(--uy-text-100)/1.125 var(--uy-font-sans);
--uy-typography-sm-h4: var(--uy-font-weight-semibold) var(--uy-text-200)/1.333 var(--uy-font-sans);
--uy-typography-default-overline: var(--uy-font-weight-medium) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-sm-overline: var(--uy-font-weight-medium) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-default-subtitle: var(--uy-font-weight-regular) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-sm-subtitle: var(--uy-font-weight-regular) var(--uy-text-100)/1.333 var(--uy-font-sans);
--uy-typography-default-display-title: var(--uy-font-weight-semibold) var(--uy-text-300)/1.4 var(--uy-font-sans);
--uy-typography-sm-display-title: var(--uy-font-weight-semibold) var(--uy-text-500)/1.333 var(--uy-font-sans);
--uy-typography-default-display-body: var(--uy-font-weight-regular) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-sm-display-body: var(--uy-font-weight-regular) var(--uy-text-200)/1.556 var(--uy-font-sans);
--uy-typography-default-body: var(--uy-font-weight-regular) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-sm-body: var(--uy-font-weight-regular) var(--uy-text-75)/1.571 var(--uy-font-sans);
--uy-typography-default-body-strong: var(--uy-font-weight-medium) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-sm-body-strong: var(--uy-font-weight-medium) var(--uy-text-75)/1.571 var(--uy-font-sans);
--uy-typography-default-body-small: var(--uy-font-weight-regular) var(--uy-text-50)/1.667 var(--uy-font-sans);
--uy-typography-sm-body-small: var(--uy-font-weight-regular) var(--uy-text-50)/1.667 var(--uy-font-sans);
--uy-typography-default-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50)/1.667 var(--uy-font-sans);
--uy-typography-sm-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50)/1.667 var(--uy-font-sans);
--uy-typography-default-body-large: var(--uy-font-weight-regular) var(--uy-text-200)/1.556 var(--uy-font-sans);
--uy-typography-sm-body-large: var(--uy-font-weight-regular) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-default-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-200)/1.556 var(--uy-font-sans);
--uy-typography-sm-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-default-action: var(--uy-font-weight-medium) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-typography-sm-action: var(--uy-font-weight-medium) var(--uy-text-75)/1.571 var(--uy-font-sans);
--uy-typography-default-action-small: var(--uy-font-weight-medium) var(--uy-text-50)/1.667 var(--uy-font-sans);
--uy-typography-sm-action-small: var(--uy-font-weight-medium) var(--uy-text-50)/1.667 var(--uy-font-sans);
--uy-typography-default-action-large: var(--uy-font-weight-medium) var(--uy-text-200)/1.556 var(--uy-font-sans);
--uy-typography-sm-action-large: var(--uy-font-weight-medium) var(--uy-text-100)/1.5 var(--uy-font-sans);
--uy-shadow-raising: var(--uy-shadow-100);
--uy-shadow-floating: var(--uy-shadow-200);
--uy-shadow-levitating: var(--uy-shadow-300);
--uy-shadow-flying: var(--uy-shadow-400);
--uy-shadow-soaring: var(--uy-shadow-500);
--uy-shadow-summit: var(--uy-shadow-600);
}
[data-unity-theme="compact"] {
--uy-animate-uy-ai-gradient-angle-rotate: 3s linear infinite uy-ai-gradient-angle-rotate;
--uy-animate-uy-ai-gradient-linear-sweep: 3s linear infinite uy-ai-gradient-linear-sweep;
--uy-animate-uy-ai-gradient-radial-pulse: 2s ease-in-out infinite uy-ai-gradient-radial-pulse;
--uy-animate-spin: 2s linear infinite spin;
--uy-animate-arc-shrink: 2s ease-in-out infinite arc-shrink;
--uy-animate-pulse: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse;
--uy-animate-slide: 4s cubic-bezier(1, 0, 0.36, 0.71) infinite slide;
--uy-animate-fade-in: 0.3s linear 1 fade-in;
--uy-animate-fade-out: 0.3s linear 1 fade-out;
--uy-animate-slide-right-fade-in: 0.3s ease-in 1 slide-right-fade-in;
--uy-animate-slide-right-fade-out: 0.3s ease-out 1 slide-right-fade-out;
--uy-animate-slide-up-fade-in: 0.3s ease-in 1 slide-up-fade-in;
--uy-animate-slide-down-fade-out: 0.3s ease-out 1 slide-down-fade-out;
--uy-animate-zoom-in: 0.3s ease-in 1 zoom-in;
--uy-animate-zoom-out: 0.3s ease-out 1 zoom-out;
--uy-aspect-video: 16 / 9;
--uy-aspect-square: 1 / 1;
--uy-breakpoint-sm: 490px;
--uy-breakpoint-md: 768px;
--uy-breakpoint-lg: 1280px;
--uy-breakpoint-xl: 1440px;
--uy-text-50: 12px;
--uy-text-75: 14px;
--uy-text-100: 16px;
--uy-text-200: 18px;
--uy-text-300: 20px;
--uy-text-400: 22px;
--uy-text-500: 24px;
--uy-text-600: 28px;
--uy-text-800: 30px;
--uy-text-1000: 32px;
--uy-text-1200: 38px;
--uy-text-1400: 52px;
--uy-text-1600: 66px;
--uy-font-weight-regular: 400;
--uy-font-weight-medium: 500;
--uy-font-weight-semibold: 600;
--uy-font-weight-bold: 700;
--uy-grid-layout-columns--default: 6;
--uy-grid-layout-columns--md: 12;
--uy-grid-layout-columns--lg: 12;
--uy-radius-0: 0;
--uy-radius-25: 2px;
--uy-radius-50: 4px;
--uy-radius-75: 6px;
--uy-radius-100: 8px;
--uy-radius-125: 10px;
--uy-radius-150: 12px;
--uy-radius-200: 16px;
--uy-radius-300: 24px;
--uy-radius-400: 32px;
--uy-radius-circle: 50%;
--uy-radius-pill: 9999px;
--uy-container-app-menu: 296px; /** Width of the main menu in global App layout */
--uy-container-lg: 984px; /** Maximum width for layout containers at large resolutions */
--uy-container-xl: 1360px; /** Maximum width for layout containers at extra-large resolutions */
--uy-container-content: 523px; /** Maximum width for content containers */
--uy-container-section: 703px; /** Maximum width for section containers */
--uy-container-page: 1063px; /** Maximum width for page containers */
--uy-container-app: 1439px; /** Maximum width for app containers */
--uy-spacing-0: 0;
--uy-spacing-25: 1.5px;
--uy-spacing-50: 3px;
--uy-spacing-75: 4.5px;
--uy-spacing-100: 6px;
--uy-spacing-125: 7.5px;
--uy-spacing-150: 9px;
--uy-spacing-200: 12px;
--uy-spacing-250: 15px;
--uy-spacing-300: 18px;
--uy-spacing-400: 24px;
--uy-spacing-500: 30px;
--uy-spacing-600: 36px;
--uy-spacing-800: 48px;
--uy-spacing-1000: 60px;
--uy-spacing: 6px; /** Compact base spacing value */
--uy-grid-layout-gutter--default: calc(var(--uy-spacing) * 2);
--uy-grid-layout-margin--default: calc(var(--uy-spacing) * 2);
--uy-grid-layout-gutter--md: calc(var(--uy-spacing) * 2);
--uy-grid-layout-margin--md: calc(var(--uy-spacing) * 3);
--uy-grid-layout-gutter--lg: calc(var(--uy-spacing) * 2);
--uy-grid-layout-margin--lg: calc(var(--uy-spacing) * 5);
}
}
@theme {
--color-*: initial;
--animate-uy-ai-gradient-angle-rotate: var(--uy-animate-uy-ai-gradient-angle-rotate);
--animate-uy-ai-gradient-linear-sweep: var(--uy-animate-uy-ai-gradient-linear-sweep);
--animate-uy-ai-gradient-radial-pulse: var(--uy-animate-uy-ai-gradient-radial-pulse);
--animate-spin: var(--uy-animate-spin);
--animate-arc-shrink: var(--uy-animate-arc-shrink);
--animate-pulse: var(--uy-animate-pulse);
--animate-slide: var(--uy-animate-slide);
--animate-fade-in: var(--uy-animate-fade-in);
--animate-fade-out: var(--uy-animate-fade-out);
--animate-slide-right-fade-in: var(--uy-animate-slide-right-fade-in);
--animate-slide-right-fade-out: var(--uy-animate-slide-right-fade-out);
--animate-slide-up-fade-in: var(--uy-animate-slide-up-fade-in);
--animate-slide-down-fade-out: var(--uy-animate-slide-down-fade-out);
--animate-zoom-in: var(--uy-animate-zoom-in);
--animate-zoom-out: var(--uy-animate-zoom-out);
--aspect-video: var(--uy-aspect-video);
--aspect-square: var(--uy-aspect-square);
--breakpoint-sm: 490px;
--breakpoint-md: 768px;
--breakpoint-lg: 1280px;
--breakpoint-xl: 1440px;
--text-50: var(--uy-text-50);
--text-75: var(--uy-text-75);
--text-100: var(--uy-text-100);
--text-200: var(--uy-text-200);
--text-300: var(--uy-text-300);
--text-400: var(--uy-text-400);
--text-500: var(--uy-text-500);
--text-600: var(--uy-text-600);
--text-800: var(--uy-text-800);
--text-1000: var(--uy-text-1000);
--text-1200: var(--uy-text-1200);
--text-1400: var(--uy-text-1400);
--text-1600: var(--uy-text-1600);
--font-weight-regular: var(--uy-font-weight-regular);
--font-weight-medium: var(--uy-font-weight-medium);
--font-weight-semibold: var(--uy-font-weight-semibold);
--font-weight-bold: var(--uy-font-weight-bold);
--grid-layout-columns--default: var(--uy-grid-layout-columns--default);
--grid-layout-gutter--default: var(--uy-grid-layout-gutter--default);
--grid-layout-margin--default: var(--uy-grid-layout-margin--default);
--grid-layout-columns--md: var(--uy-grid-layout-columns--md);
--grid-layout-gutter--md: var(--uy-grid-layout-gutter--md);
--grid-layout-margin--md: var(--uy-grid-layout-margin--md);
--grid-layout-columns--lg: var(--uy-grid-layout-columns--lg);
--grid-layout-gutter--lg: var(--uy-grid-layout-gutter--lg);
--grid-layout-margin--lg: var(--uy-grid-layout-margin--lg);
--radius-0: var(--uy-radius-0);
--radius-25: var(--uy-radius-25);
--radius-50: var(--uy-radius-50);
--radius-75: var(--uy-radius-75);
--radius-100: var(--uy-radius-100);
--radius-125: var(--uy-radius-125);
--radius-150: var(--uy-radius-150);
--radius-200: var(--uy-radius-200);
--radius-300: var(--uy-radius-300);
--radius-400: var(--uy-radius-400);
--radius-circle: var(--uy-radius-circle);
--radius-pill: var(--uy-radius-pill);
--radius-xs: var(--uy-radius-xs);
--radius-sm: var(--uy-radius-sm);
--radius-md: var(--uy-radius-md);
--radius-lg: var(--uy-radius-lg);
--radius-xl: var(--uy-radius-xl);
--container-app-menu: 296px;
--container-lg: 984px;
--container-xl: 1360px;
--container-content: 523px;
--container-section: 703px;
--container-page: 1063px;
--container-app: 1439px;
--spacing-0: var(--uy-spacing-0);
--spacing-25: var(--uy-spacing-25);
--spacing-50: var(--uy-spacing-50);
--spacing-75: var(--uy-spacing-75);
--spacing-100: var(--uy-spacing-100);
--spacing-125: var(--uy-spacing-125);
--spacing-150: var(--uy-spacing-150);
--spacing-200: var(--uy-spacing-200);
--spacing-250: var(--uy-spacing-250);
--spacing-300: var(--uy-spacing-300);
--spacing-400: var(--uy-spacing-400);
--spacing-500: var(--uy-spacing-500);
--spacing-600: var(--uy-spacing-600);
--spacing-800: var(--uy-spacing-800);
--spacing-1000: var(--uy-spacing-1000);
--spacing: var(--uy-spacing);
--color-grayscale-l1: var(--uy-color-grayscale-l1);
--color-grayscale-l2: var(--uy-color-grayscale-l2);
--color-grayscale-l3: var(--uy-color-grayscale-l3);
--color-grayscale-l4: var(--uy-color-grayscale-l4);
--color-grayscale-l5: var(--uy-color-grayscale-l5);
--color-grayscale-l6: var(--uy-color-grayscale-l6);
--color-grayscale-l7: var(--uy-color-grayscale-l7);
--color-grayscale-l8: var(--uy-color-grayscale-l8);
--color-grayscale-l9: var(--uy-color-grayscale-l9);
--color-grayscale-l10: var(--uy-color-grayscale-l10);
--color-grayscale-l11: var(--uy-color-grayscale-l11);
--color-grayscale-l12: var(--uy-color-grayscale-l12);
--color-grayscale-l0: var(--uy-color-grayscale-l0);
--color-red-l1: var(--uy-color-red-l1);
--color-red-l2: var(--uy-color-red-l2);
--color-red-l3: var(--uy-color-red-l3);
--color-red-l4: var(--uy-color-red-l4);
--color-red-l5: var(--uy-color-red-l5);
--color-red-l6: var(--uy-color-red-l6);
--color-red-l7: var(--uy-color-red-l7);
--color-red-l8: var(--uy-color-red-l8);
--color-red-l9: var(--uy-color-red-l9);
--color-red-l10: var(--uy-color-red-l10);
--color-red-l11: var(--uy-color-red-l11);
--color-red-l12: var(--uy-color-red-l12);
--color-green-l1: var(--uy-color-green-l1);
--color-green-l2: var(--uy-color-green-l2);
--color-green-l3: var(--uy-color-green-l3);
--color-green-l4: var(--uy-color-green-l4);
--color-green-l5: var(--uy-color-green-l5);
--color-green-l6: var(--uy-color-green-l6);
--color-green-l7: var(--uy-color-green-l7);
--color-green-l8: var(--uy-color-green-l8);
--color-green-l9: var(--uy-color-green-l9);
--color-green-l10: var(--uy-color-green-l10);
--color-green-l11: var(--uy-color-green-l11);
--color-green-l12: var(--uy-color-green-l12);
--color-yellow-l1: var(--uy-color-yellow-l1);
--color-yellow-l2: var(--uy-color-yellow-l2);
--color-yellow-l3: var(--uy-color-yellow-l3);
--color-yellow-l4: var(--uy-color-yellow-l4);
--color-yellow-l5: var(--uy-color-yellow-l5);
--color-yellow-l6: var(--uy-color-yellow-l6);
--color-yellow-l7: var(--uy-color-yellow-l7);
--color-yellow-l8: var(--uy-color-yellow-l8);
--color-yellow-l9: var(--uy-color-yellow-l9);
--color-yellow-l10: var(--uy-color-yellow-l10);
--color-yellow-l11: var(--uy-color-yellow-l11);
--color-yellow-l12: var(--uy-color-yellow-l12);
--color-cyan-l1: var(--uy-color-cyan-l1);
--color-cyan-l2: var(--uy-color-cyan-l2);
--color-cyan-l3: var(--uy-color-cyan-l3);
--color-cyan-l4: var(--uy-color-cyan-l4);
--color-cyan-l5: var(--uy-color-cyan-l5);
--color-cyan-l6: var(--uy-color-cyan-l6);
--color-cyan-l7: var(--uy-color-cyan-l7);
--color-cyan-l8: var(--uy-color-cyan-l8);
--color-cyan-l9: var(--uy-color-cyan-l9);
--color-cyan-l10: var(--uy-color-cyan-l10);
--color-cyan-l11: var(--uy-color-cyan-l11);
--color-cyan-l12: var(--uy-color-cyan-l12);
--color-blue-l1: var(--uy-color-blue-l1);
--color-blue-l2: var(--uy-color-blue-l2);
--color-blue-l3: var(--uy-color-blue-l3);
--color-blue-l4: var(--uy-color-blue-l4);
--color-blue-l5: var(--uy-color-blue-l5);
--color-blue-l6: var(--uy-color-blue-l6);
--color-blue-l7: var(--uy-color-blue-l7);
--color-blue-l8: var(--uy-color-blue-l8);
--color-blue-l9: var(--uy-color-blue-l9);
--color-blue-l10: var(--uy-color-blue-l10);
--color-blue-l11: var(--uy-color-blue-l11);
--color-blue-l12: var(--uy-color-blue-l12);
--color-purple-l1: var(--uy-color-purple-l1);
--color-purple-l2: var(--uy-color-purple-l2);
--color-purple-l3: var(--uy-color-purple-l3);
--color-purple-l4: var(--uy-color-purple-l4);
--color-purple-l5: var(--uy-color-purple-l5);
--color-purple-l6: var(--uy-color-purple-l6);
--color-purple-l7: var(--uy-color-purple-l7);
--color-purple-l8: var(--uy-color-purple-l8);
--color-purple-l9: var(--uy-color-purple-l9);
--color-purple-l10: var(--uy-color-purple-l10);
--color-purple-l11: var(--uy-color-purple-l11);
--color-purple-l12: var(--uy-color-purple-l12);
--color-plum-l1: var(--uy-color-plum-l1);
--color-plum-l2: var(--uy-color-plum-l2);
--color-plum-l3: var(--uy-color-plum-l3);
--color-plum-l4: var(--uy-color-plum-l4);
--color-plum-l5: var(--uy-color-plum-l5);
--color-plum-l6: var(--uy-color-plum-l6);
--color-plum-l7: var(--uy-color-plum-l7);
--color-plum-l8: var(--uy-color-plum-l8);
--color-plum-l9: var(--uy-color-plum-l9);
--color-plum-l10: var(--uy-color-plum-l10);
--color-plum-l11: var(--uy-color-plum-l11);
--color-plum-l12: var(--uy-color-plum-l12);
--color-peach-l1: var(--uy-color-peach-l1);
--color-peach-l2: var(--uy-color-peach-l2);
--color-peach-l3: var(--uy-color-peach-l3);
--color-peach-l9: var(--uy-color-peach-l9);
--color-peach-l10: var(--uy-color-peach-l10);
--color-peach-l11: var(--uy-color-peach-l11);
--color-peach-l12: var(--uy-color-peach-l12);
--color-sunglow-l1: var(--uy-color-sunglow-l1);
--color-sunglow-l2: var(--uy-color-sunglow-l2);
--color-sunglow-l3: var(--uy-color-sunglow-l3);
--color-sunglow-l9: var(--uy-color-sunglow-l9);
--color-sunglow-l10: var(--uy-color-sunglow-l10);
--color-sunglow-l11: var(--uy-color-sunglow-l11);
--color-sunglow-l12: var(--uy-color-sunglow-l12);
--color-teal-l1: var(--uy-color-teal-l1);
--color-teal-l2: var(--uy-color-teal-l2);
--color-teal-l3: var(--uy-color-teal-l3);
--color-teal-l4: var(--uy-color-teal-l4);
--color-teal-l5: var(--uy-color-teal-l5);
--color-teal-l6: var(--uy-color-teal-l6);
--color-teal-l7: var(--uy-color-teal-l7);
--color-teal-l8: var(--uy-color-teal-l8);
--color-teal-l9: var(--uy-color-teal-l9);
--color-teal-l10: var(--uy-color-teal-l10);
--color-teal-l11: var(--uy-color-teal-l11);
--color-teal-l12: var(--uy-color-teal-l12);
--color-orange-l1: var(--uy-color-orange-l1);
--color-orange-l2: var(--uy-color-orange-l2);
--color-orange-l3: var(--uy-color-orange-l3);
--color-orange-l4: var(--uy-color-orange-l4);
--color-orange-l5: var(--uy-color-orange-l5);
--color-orange-l6: var(--uy-color-orange-l6);
--color-orange-l7: var(--uy-color-orange-l7);
--color-orange-l8: var(--uy-color-orange-l8);
--color-orange-l9: var(--uy-color-orange-l9);
--color-orange-l10: var(--uy-color-orange-l10);
--color-orange-l11: var(--uy-color-orange-l11);
--color-orange-l12: var(--uy-color-orange-l12);
--color-canvas: var(--uy-color-canvas);
--color-surface-primary-highest: var(--uy-color-surface-primary-highest);
--color-surface-primary-high: var(--uy-color-surface-primary-high);
--color-surface-primary: var(--uy-color-surface-primary);
--color-surface-primary-enabled: var(--uy-color-surface-primary-enabled);
--color-surface-primary-hover: var(--uy-color-surface-primary-hover);
--color-surface-primary-pressed: var(--uy-color-surface-primary-pressed);
--color-surface-primary-focus: var(--uy-color-surface-primary-focus);
--color-surface-primary-active: var(--uy-color-surface-primary-active);
--color-surface-primary-disabled: var(--uy-color-surface-primary-disabled);
--color-surface-primary-low: var(--uy-color-surface-primary-low);
--color-surface-primary-lowest: var(--uy-color-surface-primary-lowest);
--color-surface-primary-lowest-enabled: var(--uy-color-surface-primary-lowest-enabled);
--color-surface-primary-lowest-hover: var(--uy-color-surface-primary-lowest-hover);
--color-surface-primary-lowest-pressed: var(--uy-color-surface-primary-lowest-pressed);
--color-surface-primary-lowest-focus: var(--uy-color-surface-primary-lowest-focus);
--color-surface-primary-lowest-active: var(--uy-color-surface-primary-lowest-active);
--color-surface-primary-lowest-disabled: var(--uy-color-surface-primary-lowest-disabled);
--color-surface-neutral: var(--uy-color-surface-neutral);
--color-surface-neutral-enabled: var(--uy-color-surface-neutral-enabled);
--color-surface-neutral-hover: var(--uy-color-surface-neutral-hover);
--color-surface-neutral-pressed: var(--uy-color-surface-neutral-pressed);
--color-surface-neutral-focus: var(--uy-color-surface-neutral-focus);
--color-surface-neutral-active: var(--uy-color-surface-neutral-active);
--color-surface-neutral-selected: var(--uy-color-surface-neutral-selected);
--color-surface-neutral-disabled: var(--uy-color-surface-neutral-disabled);
--color-surface-neutral-low: var(--uy-color-surface-neutral-low);
--color-surface-neutral-low-enabled: var(--uy-color-surface-neutral-low-enabled);
--color-surface-neutral-low-hover: var(--uy-color-surface-neutral-low-hover);
--color-surface-neutral-low-pressed: var(--uy-color-surface-neutral-low-pressed);
--color-surface-neutral-low-focus: var(--uy-color-surface-neutral-low-focus);
--color-surface-neutral-low-active: var(--uy-color-surface-neutral-low-active);
--color-surface-neutral-low-disabled: var(--uy-color-surface-neutral-low-disabled);
--color-surface-neutral-low-selected: var(--uy-color-surface-neutral-low-selected);
--color-surface-neutral-lowest: var(--uy-color-surface-neutral-lowest);
--color-surface-neutral-lowest-enabled: var(--uy-color-surface-neutral-lowest-enabled);
--color-surface-neutral-lowest-hover: var(--uy-color-surface-neutral-lowest-hover);
--color-surface-neutral-lowest-pressed: var(--uy-color-surface-neutral-lowest-pressed);
--color-surface-neutral-lowest-focus: var(--uy-color-surface-neutral-lowest-focus);
--color-surface-neutral-lowest-active: var(--uy-color-surface-neutral-lowest-active);
--color-surface-neutral-lowest-disabled: var(--uy-color-surface-neutral-lowest-disabled);
--color-surface-neutral-lowest-selected: var(--uy-color-surface-neutral-lowest-selected);
--color-surface-neutral-highest: var(--uy-color-surface-neutral-highest);
--color-surface-neutral-highest-enabled: var(--uy-color-surface-neutral-highest-enabled);
--color-surface-neutral-highest-hover: var(--uy-color-surface-neutral-highest-hover);
--color-surface-neutral-highest-pressed: var(--uy-color-surface-neutral-highest-pressed);
--color-surface-neutral-highest-active: var(--uy-color-surface-neutral-highest-active);
--color-surface-neutral-highest-focus: var(--uy-color-surface-neutral-highest-focus);
--color-surface-neutral-highest-disabled: var(--uy-color-surface-neutral-highest-disabled);
--color-surface-neutral-highest-selected: var(--uy-color-surface-neutral-highest-selected);
--color-surface-danger: var(--uy-color-surface-danger);
--color-surface-danger-enabled: var(--uy-color-surface-danger-enabled);
--color-surface-danger-hover: var(--uy-color-surface-danger-hover);
--color-surface-danger-pressed: var(--uy-color-surface-danger-pressed);
--color-surface-danger-focus: var(--uy-color-surface-danger-focus);
--color-surface-danger-active: var(--uy-color-surface-danger-active);
--color-surface-danger-disabled: var(--uy-color-surface-danger-disabled);
--color-surface-danger-low: var(--uy-color-surface-danger-low);
--color-surface-danger-lowest: var(--uy-color-surface-danger-lowest);
--color-surface-danger-lowest-enabled: var(--uy-color-surface-danger-lowest-enabled);
--color-surface-danger-lowest-hover: var(--uy-color-surface-danger-lowest-hover);
--color-surface-danger-lowest-pressed: var(--uy-color-surface-danger-lowest-pressed);
--color-surface-danger-lowest-focus: var(--uy-color-surface-danger-lowest-focus);
--color-surface-danger-lowest-active: var(--uy-color-surface-danger-lowest-active);
--color-surface-danger-lowest-disabled: var(--uy-color-surface-danger-lowest-disabled);
--color-surface-warning: var(--uy-color-surface-warning);
--color-surface-warning-enabled: var(--uy-color-surface-warning-enabled);
--color-surface-warning-hover: var(--uy-color-surface-warning-hover);
--color-surface-warning-pressed: var(--uy-color-surface-warning-pressed);
--color-surface-warning-focus: var(--uy-color-surface-warning-focus);
--color-surface-warning-active: var(--uy-color-surface-warning-active);
--color-surface-warning-disabled: var(--uy-color-surface-warning-disabled);
--color-surface-warning-low: var(--uy-color-surface-warning-low);
--color-surface-warning-lowest: var(--uy-color-surface-warning-lowest);
--color-surface-warning-lowest-enabled: var(--uy-color-surface-warning-lowest-enabled);
--color-surface-warning-lowest-hover: var(--uy-color-surface-warning-lowest-hover);
--color-surface-warning-lowest-pressed: var(--uy-color-surface-warning-lowest-pressed);
--color-surface-warning-lowest-focus: var(--uy-color-surface-warning-lowest-focus);
--color-surface-warning-lowest-active: var(--uy-color-surface-warning-lowest-active);
--color-surface-warning-lowest-disabled: var(--uy-color-surface-warning-lowest-disabled);
--color-surface-success: var(--uy-color-surface-success);
--color-surface-success-low: var(--uy-color-surface-success-low);
--color-surface-success-lowest: var(--uy-color-surface-success-lowest);
--color-surface-success-lowest-enabled: var(--uy-color-surface-success-lowest-enabled);
--color-surface-success-lowest-hover: var(--uy-color-surface-success-lowest-hover);
--color-surface-success-lowest-pressed: var(--uy-color-surface-success-lowest-pressed);
--color-surface-success-lowest-focus: var(--uy-color-surface-success-lowest-focus);
--color-surface-success-lowest-active: var(--uy-color-surface-success-lowest-active);
--color-surface-success-lowest-disabled: var(--uy-color-surface-success-lowest-disabled);
--color-surface-info: var(--uy-color-surface-info);
--color-surface-info-low: var(--uy-color-surface-info-low);
--color-surface-info-lowest: var(--uy-color-surface-info-lowest);
--color-surface-info-lowest-enabled: var(--uy-color-surface-info-lowest-enabled);
--color-surface-info-lowest-hover: var(--uy-color-surface-info-lowest-hover);
--color-surface-info-lowest-pressed: var(--uy-color-surface-info-lowest-pressed);
--color-surface-info-lowest-focus: var(--uy-color-surface-info-lowest-focus);
--color-surface-info-lowest-active: var(--uy-color-surface-info-lowest-active);
--color-surface-info-lowest-disabled: var(--uy-color-surface-info-lowest-disabled);
--color-surface-promo: var(--uy-color-surface-promo);
--color-surface-promo-low: var(--uy-color-surface-promo-low);
--color-surface-promo-lowest: var(--uy-color-surface-promo-lowest);
--color-surface-ai-low: var(--uy-color-surface-ai-low);
--color-surface-form-enabled: var(--uy-color-surface-form-enabled);
--color-surface-form-hover: var(--uy-color-surface-form-hover);
--color-surface-form-pressed: var(--uy-color-surface-form-pressed);
--color-surface-form-focus: var(--uy-color-surface-form-focus);
--color-surface-form-active: var(--uy-color-surface-form-active);
--color-surface-form-selected: var(--uy-color-surface-form-selected);
--color-surface-form-disabled: var(--uy-color-surface-form-disabled);
--color-surface-form-read-only: var(--uy-color-surface-form-read-only);
--color-surface-form-error: var(--uy-color-surface-form-error);
--color-surface-form-high-enabled: var(--uy-color-surface-form-high-enabled);
--color-surface-form-high-hover: var(--uy-color-surface-form-high-hover);
--color-surface-form-high-pressed: var(--uy-color-surface-form-high-pressed);
--color-surface-form-high-focus: var(--uy-color-surface-form-high-focus);
--color-surface-form-high-active: var(--uy-color-surface-form-high-active);
--color-surface-form-high-selected: var(--uy-color-surface-form-high-selected);
--color-surface-form-high-disabled: var(--uy-color-surface-form-high-disabled);
--color-surface-form-high-read-only: var(--uy-color-surface-form-high-read-only);
--color-surface-form-high-error: var(--uy-color-surface-form-high-error);
--color-surface-inverted: var(--uy-color-surface-inverted);
--color-surface-inverted-enabled: var(--uy-color-surface-inverted-enabled);
--color-surface-inverted-hover: var(--uy-color-surface-inverted-hover);
--color-surface-inverted-pressed: var(--uy-color-surface-inverted-pressed);
--color-surface-inverted-focus: var(--uy-color-surface-inverted-focus);
--color-surface-inverted-active: var(--uy-color-surface-inverted-active);
--color-surface-inverted-low-enabled: var(--uy-color-surface-inverted-low-enabled);
--color-surface-inverted-low-hover: var(--uy-color-surface-inverted-low-hover);
--color-surface-inverted-low-pressed: var(--uy-color-surface-inverted-low-pressed);
--color-surface-inverted-low-active: var(--uy-color-surface-inverted-low-active);
--color-surface-inverted-low-focus: var(--uy-color-surface-inverted-low-focus);
--color-surface-inverted-low-disabled: var(--uy-color-surface-inverted-low-disabled);
--color-surface-decorative-teal: var(--uy-color-surface-decorative-teal);
--color-surface-decorative-teal-high: var(--uy-color-surface-decorative-teal-high);
--color-surface-decorative-teal-low: var(--uy-color-surface-decorative-teal-low);
--color-surface-decorative-teal-lowest: var(--uy-color-surface-decorative-teal-lowest);
--color-surface-decorative-purple-high: var(--uy-color-surface-decorative-purple-high);
--color-surface-decorative-purple: var(--uy-color-surface-decorative-purple);
--color-surface-decorative-purple-low: var(--uy-color-surface-decorative-purple-low);
--color-surface-decorative-purple-lowest: var(--uy-color-surface-decorative-purple-lowest);
--color-surface-decorative-plum: var(--uy-color-surface-decorative-plum);
--color-surface-decorative-plum-high: var(--uy-color-surface-decorative-plum-high);
--color-surface-decorative-plum-low: var(--uy-color-surface-decorative-plum-low);
--color-surface-decorative-plum-lowest: var(--uy-color-surface-decorative-plum-lowest);
--color-surface-decorative-orange: var(--uy-color-surface-decorative-orange);
--color-surface-decorative-orange-high: var(--uy-color-surface-decorative-orange-high);
--color-surface-decorative-orange-low: var(--uy-color-surface-decorative-orange-low);
--color-surface-decorative-orange-lowest: var(--uy-color-surface-decorative-orange-lowest);
--color-content-primary: var(--uy-color-content-primary);
--color-content-primary-enabled: var(--uy-color-content-primary-enabled);
--color-content-primary-hover: var(--uy-color-content-primary-hover);
--color-content-primary-pressed: var(--uy-color-content-primary-pressed);
--color-content-primary-focus: var(--uy-color-content-primary-focus);
--color-content-primary-active: var(--uy-color-content-primary-active);
--color-content-primary-disabled: var(--uy-color-content-primary-disabled);
--color-content-primary-high: var(--uy-color-content-primary-high);
--color-content-neutral: var(--uy-color-content-neutral);
--color-content-neutral-enabled: var(--uy-color-content-neutral-enabled);
--color-content-neutral-hover: var(--uy-color-content-neutral-hover);
--color-content-neutral-pressed: var(--uy-color-content-neutral-pressed);
--color-content-neutral-focus: var(--uy-color-content-neutral-focus);
--color-content-neutral-active: var(--uy-color-content-neutral-active);
--color-content-neutral-disabled: var(--uy-color-content-neutral-disabled);
--color-content-neutral-low: var(--uy-color-content-neutral-low);
--color-content-neutral-lowest: var(--uy-color-content-neutral-lowest);
--color-content-neutral-lowest-enabled: var(--uy-color-content-neutral-lowest-enabled);
--color-content-neutral-lowest-hover: var(--uy-color-content-neutral-lowest-hover);
--color-content-neutral-lowest-pressed: var(--uy-color-content-neutral-lowest-pressed);
--color-content-neutral-lowest-focus: var(--uy-color-content-neutral-lowest-focus);
--color-content-neutral-lowest-active: var(--uy-color-content-neutral-lowest-active);
--color-content-neutral-lowest-disabled: var(--uy-color-content-neutral-lowest-disabled);
--color-content-danger: var(--uy-color-content-danger);
--color-content-danger-enabled: var(--uy-color-content-danger-enabled);
--color-content-danger-hover: var(--uy-color-content-danger-hover);
--color-content-danger-pressed: var(--uy-color-content-danger-pressed);
--color-content-danger-focus: var(--uy-color-content-danger-focus);
--color-content-danger-active: var(--uy-color-content-danger-active);
--color-content-danger-disabled: var(--uy-color-content-danger-disabled);
--color-content-danger-high: var(--uy-color-content-danger-high);
--color-content-warning: var(--uy-color-content-warning);
--color-content-warning-enabled: var(--uy-color-content-warning-enabled);
--color-content-warning-hover: var(--uy-color-content-warning-hover);
--color-content-warning-pressed: var(--uy-color-content-warning-pressed);
--color-content-warning-focus: var(--uy-color-content-warning-focus);
--color-content-warning-active: var(--uy-color-content-warning-active);
--color-content-warning-disabled: var(--uy-color-content-warning-disabled);
--color-content-warning-high: var(--uy-color-content-warning-high);
--color-content-success: var(--uy-color-content-success);
--color-content-success-enabled: var(--uy-color-content-success-enabled);
--color-content-success-hover: var(--uy-color-content-success-hover);
--color-content-success-pressed: var(--uy-color-content-success-pressed);
--color-content-success-focus: var(--uy-color-content-success-focus);
--color-content-success-active: var(--uy-color-content-success-active);
--color-content-success-disabled: var(--uy-color-content-success-disabled);
--color-content-success-high: var(--uy-color-content-success-high);
--color-content-info: var(--uy-color-content-info);
--color-content-info-enabled: var(--uy-color-content-info-enabled);
--color-content-info-hover: var(--uy-color-content-info-hover);
--color-content-info-pressed: var(--uy-color-content-info-pressed);
--color-content-info-focus: var(--uy-color-content-info-focus);
--color-content-info-active: var(--uy-color-content-info-active);
--color-content-info-disabled: var(--uy-color-content-info-disabled);
--color-content-info-high: var(--uy-color-content-info-high);
--color-content-promo: var(--uy-color-content-promo);
--color-content-promo-high: var(--uy-color-content-promo-high);
--color-content-form-enabled: var(--uy-color-content-form-enabled);
--color-content-form-hover: var(--uy-color-content-form-hover);
--color-content-form-pressed: var(--uy-color-content-form-pressed);
--color-content-form-focus: var(--uy-color-content-form-focus);
--color-content-form-active: var(--uy-color-content-form-active);
--color-content-form-selected: var(--uy-color-content-form-selected);
--color-content-form-disabled: var(--uy-color-content-form-disabled);
--color-content-form-read-only: var(--uy-color-content-form-read-only);
--color-content-form-invalid: var(--uy-color-content-form-invalid);
--color-content-inverted: var(--uy-color-content-inverted);
--color-content-inverted-enabled: var(--uy-color-content-inverted-enabled);
--color-content-inverted-hover: var(--uy-color-content-inverted-hover);
--color-content-inverted-pressed: var(--uy-color-content-inverted-pressed);
--color-content-inverted-focus: var(--uy-color-content-inverted-focus);
--color-content-inverted-active: var(--uy-color-content-inverted-active);
--color-content-inverted-disabled: var(--uy-color-content-inverted-disabled);
--color-content-decorative-teal: var(--uy-color-content-decorative-teal);
--color-content-decorative-teal-high: var(--uy-color-content-decorative-teal-high);
--color-content-decorative-purple: var(--uy-color-content-decorative-purple);
--color-content-decorative-purple-high: var(--uy-color-content-decorative-purple-high);
--color-content-decorative-plum: var(--uy-color-content-decorative-plum);
--color-content-decorative-plum-high: var(--uy-color-content-decorative-plum-high);
--color-content-decorative-orange: var(--uy-color-content-decorative-orange);
--color-content-decorative-orange-high: var(--uy-color-content-decorative-orange-high);
--color-border-primary: var(--uy-color-border-primary);
--color-border-primary-enabled: var(--uy-color-border-primary-enabled);
--color-border-primary-hover: var(--uy-color-border-primary-hover);
--color-border-primary-pressed: var(--uy-color-border-primary-pressed);
--color-border-primary-focus: var(--uy-color-border-primary-focus);
--color-border-primary-active: var(--uy-color-border-primary-active);
--color-border-primary-disabled: var(--uy-color-border-primary-disabled);
--color-border-primary-lowest: var(--uy-color-border-primary-lowest);
--color-border-neutral-high: var(--uy-color-border-neutral-high);
--color-border-neutral-high-enabled: var(--uy-color-border-neutral-high-enabled);
--color-border-neutral-high-hover: var(--uy-color-border-neutral-high-hover);
--color-border-neutral-high-pressed: var(--uy-color-border-neutral-high-pressed);
--color-border-neutral-high-focus: var(--uy-color-border-neutral-high-focus);
--color-border-neutral-high-active: var(--uy-color-border-neutral-high-active);
--color-border-neutral-high-disabled: var(--uy-color-border-neutral-high-disabled);
--color-border-neutral: var(--uy-color-border-neutral);
--color-border-neutral-enabled: var(--uy-color-border-neutral-enabled);
--color-border-neutral-hover: var(--uy-color-border-neutral-hover);
--color-border-neutral-active: var(--uy-color-border-neutral-active);
--color-border-neutral-pressed: var(--uy-color-border-neutral-pressed);
--color-border-neutral-selected: var(--uy-color-border-neutral-selected);
--color-border-neutral-disabled: var(--uy-color-border-neutral-disabled);
--color-border-neutral-low: var(--uy-color-border-neutral-low);
--color-border-neutral-highest: var(--uy-color-border-neutral-highest);
--color-border-neutral-highest-enabled: var(--uy-color-border-neutral-highest-enabled);
--color-border-neutral-highest-hover: var(--uy-color-border-neutral-highest-hover);
--color-border-neutral-highest-pressed: var(--uy-color-border-neutral-highest-pressed);
--color-border-neutral-highest-active: var(--uy-color-border-neutral-highest-active);
--color-border-neutral-highest-focus: var(--uy-color-border-neutral-highest-focus);
--color-border-neutral-highest-disabled: var(--uy-color-border-neutral-highest-disabled);
--color-border-danger: var(--uy-color-border-danger);
--color-border-danger-lowest: var(--uy-color-border-danger-lowest);
--color-border-warning: var(--uy-color-border-warning);
--color-border-warning-lowest: var(--uy-color-border-warning-lowest);
--color-border-success: var(--uy-color-border-success);
--color-border-success-low: var(--uy-color-border-success-low);
--color-border-success-lowest: var(--uy-color-border-success-lowest);
--color-border-info: var(--uy-color-border-info);
--color-border-info-lowest: var(--uy-color-border-info-lowest);
--color-border-promo: var(--uy-color-border-promo);
--color-border-promo-lowest: var(--uy-color-border-promo-lowest);
--color-border-form-enabled: var(--uy-color-border-form-enabled);
--color-border-form-hover: var(--uy-color-border-form-hover);
--color-border-form-pressed: var(--uy-color-border-form-pressed);
--color-border-form-focus: var(--uy-color-border-form-focus);
--color-border-form-active: var(--uy-color-border-form-active);
--color-border-form-selected: var(--uy-color-border-form-selected);
--color-border-form-disabled: var(--uy-color-border-form-disabled);
--color-border-form-read-only: var(--uy-color-border-form-read-only);
--color-border-form-error: var(--uy-color-border-form-error);
--color-border-inverted: var(--uy-color-border-inverted);
--color-border-inverted-enabled: var(--uy-color-border-inverted-enabled);
--color-border-inverted-hover: var(--uy-color-border-inverted-hover);
--color-border-inverted-pressed: var(--uy-color-border-inverted-pressed);
--color-border-inverted-focus: var(--uy-color-border-inverted-focus);
--color-border-inverted-active: var(--uy-color-border-inverted-active);
--color-border-inverted-disabled: var(--uy-color-border-inverted-disabled);
--color-border-inverted-high: var(--uy-color-border-inverted-high);
--color-utility-focus-ring: var(--uy-color-utility-focus-ring);
--color-utility-inverted-focus-ring: var(--uy-color-utility-inverted-focus-ring);
--color-utility-backdrop: var(--uy-color-utility-backdrop);
--color-utility-shadow-100: var(--uy-color-utility-shadow-100);
--color-utility-shadow-200: var(--uy-color-utility-shadow-200);
--color-utility-shadow-300: var(--uy-color-utility-shadow-300);
--color-utility-shadow-400: var(--uy-color-utility-shadow-400);
--color-utility-shadow-500: var(--uy-color-utility-shadow-500);
--color-utility-shadow-600: var(--uy-color-utility-shadow-600);
--gradient-payfit-ai: var(--uy-gradient-payfit-ai);
--gradient-payfit-ai-animated: var(--uy-gradient-payfit-ai-animated);
--shadow-100: var(--uy-shadow-100);
--shadow-200: var(--uy-shadow-200);
--shadow-300: var(--uy-shadow-300);
--shadow-400: var(--uy-shadow-400);
--shadow-500: var(--uy-shadow-500);
--shadow-600: var(--uy-shadow-600);
--shadow-canvas: var(--uy-shadow-canvas);
--shadow-raising: var(--uy-shadow-raising);
--shadow-floating: var(--uy-shadow-floating);
--shadow-levitating: var(--uy-shadow-levitating);
--shadow-flying: var(--uy-shadow-flying);
--shadow-soaring: var(--uy-shadow-soaring);
--shadow-summit: var(--uy-shadow-summit);
--font-serif: var(--uy-font-serif);
--font-sans: var(--uy-font-sans);
--font-mono: var(--uy-font-mono);
--typography-default-display-heading: var(--uy-typography-default-display-heading);
--typography-sm-display-heading: var(--uy-typography-sm-display-heading);
--typography-default-h1: var(--uy-typography-default-h1);
--typography-sm-h1: var(--uy-typography-sm-h1);
--typography-default-h2: var(--uy-typography-default-h2);
--typography-sm-h2: var(--uy-typography-sm-h2);
--typography-default-h3: var(--uy-typography-default-h3);
--typography-sm-h3: var(--uy-typography-sm-h3);
--typography-default-h4: var(--uy-typography-default-h4);
--typography-sm-h4: var(--uy-typography-sm-h4);
--typography-default-overline: var(--uy-typography-default-overline);
--typography-sm-overline: var(--uy-typography-sm-overline);
--typography-default-subtitle: var(--uy-typography-default-subtitle);
--typography-sm-subtitle: var(--uy-typography-sm-subtitle);
--typography-default-display-title: var(--uy-typography-default-display-title);
--typography-sm-display-title: var(--uy-typography-sm-display-title);
--typography-default-display-body: var(--uy-typography-default-display-body);
--typography-sm-display-body: var(--uy-typography-sm-display-body);
--typography-default-body: var(--uy-typography-default-body);
--typography-sm-body: var(--uy-typography-sm-body);
--typography-default-body-strong: var(--uy-typography-default-body-strong);
--typography-sm-body-strong: var(--uy-typography-sm-body-strong);
--typography-default-body-small: var(--uy-typography-default-body-small);
--typography-sm-body-small: var(--uy-typography-sm-body-small);
--typography-default-body-small-strong: var(--uy-typography-default-body-small-strong);
--typography-sm-body-small-strong: var(--uy-typography-sm-body-small-strong);
--typography-default-body-large: var(--uy-typography-default-body-large);
--typography-sm-body-large: var(--uy-typography-sm-body-large);
--typography-default-body-large-strong: var(--uy-typography-default-body-large-strong);
--typography-sm-body-large-strong: var(--uy-typography-sm-body-large-strong);
--typography-default-action: var(--uy-typography-default-action);
--typography-sm-action: var(--uy-typography-sm-action);
--typography-default-action-small: var(--uy-typography-default-action-small);
--typography-sm-action-small: var(--uy-typography-sm-action-small);
--typography-default-action-large: var(--uy-typography-default-action-large);
--typography-sm-action-large: var(--uy-typography-sm-action-large);
}
@utility grid-layout {
display: grid;
grid-template-columns: repeat(var(--uy-grid-layout-columns--default), 1fr);
grid-gap: var(--uy-grid-layout-gutter--default);
margin: 0 var(--uy-grid-layout-margin--default);
@media screen and (min-width: 768px) {
grid-template-columns: repeat(var(--uy-grid-layout-columns--md), 1fr);
grid-gap: var(--uy-grid-layout-gutter--md);
margin: 0 var(--uy-grid-layout-margin--md);
}
@media screen and (min-width: 1280px) {
grid-template-columns: repeat(var(--uy-grid-layout-columns--lg), 1fr);
grid-gap: var(--uy-grid-layout-gutter--lg);
margin: 0 var(--uy-grid-layout-margin--lg);
}
}
@utility gradient-stops-* {
--tw-gradient-stops: var(--tw-gradient-position), --value(--gradient-*);
}
@utility typography-* {
font: --value(--typography-default-*);
@media screen and (min-width: 490px) {
font: --value(--typography-sm- *);
}
}
@custom-variant supports-mask-border {
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
@slot;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes arc-shrink {
0% {
stroke-dasharray: calc(2 * var(--1deg, 1rad)) calc(358 * var(--1deg, 1rad));
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: calc(290 * var(--1deg, 1rad))
calc(358 * var(--1deg, 1rad));
stroke-dashoffset: calc(-35 * var(--1deg, 1rad));
}
100% {
stroke-dasharray: calc(2 * var(--1deg, 1rad)) calc(358 * var(--1deg, 1rad));
stroke-dashoffset: calc(-358 * var(--1deg, 1rad));
}
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes slide-right-fade-in {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slide-right-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
@keyframes slide-up-fade-in {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slide-down-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
@keyframes slide {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
25% {
opacity: 0.2;
transform: translate3d(-100%, 0, 0);
}
50% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0.2;
transform: translate3d(100%, 0, 0);
}
}
@keyframes zoom-in {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes zoom-out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
/**
* Payfit AI gradient effects.
*
* This asset contains the registered custom properties, base-layer glow
* recipe, and keyframes consumed by the AI gradient border utilities used in ai-kit components.
* It is intentionally separate from general-purpose animations so the effect can be
* maintained as one cohesive unit.
*
* Consumers use the defined custom properties to animate or control specific part of each
* effect that can be applied. It is particularly important for allowing interpolation
* of properties that would not normally animate, such as an angle in a gradient declaration.
*/
/**
* The current orientation of a conic Payfit AI gradient and its orbital glow.
* This registered property makes angle interpolation continuous while the
* `uy-ai-gradient-angle-rotate` keyframe is running.
*/
@property --uy-ai-gradient-angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
/**
* The host-controlled gradient border width. The masked border reads this
* value for its inset and padding, so changing it keeps the border aligned
* without changing the host's padding, radius, or background.
*/
@property --uy-ai-gradient-border-width {
syntax: '<length>';
inherits: true;
initial-value: 1px;
}
/**
* Opacity contribution of each colour in `--uy-ai-gradient-glow`.
* Override it on the interactive host to tune glow strength independently of
* the host and its content opacity. Defaults to 20%.
*/
@property --uy-ai-gradient-glow-opacity {
syntax: '<percentage>';
inherits: true;
initial-value: 20%;
}
/**
* Unwrapped angle and scale for the interactive Payfit AI brand motion.
* Registering them lets the browser interpolate the two full turns in either
* direction as the trigger's hover or focus-visible state changes.
*/
@property --uy-payfit-ai-brand-rotation {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@property --uy-payfit-ai-brand-scale {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
@layer base {
:root {
/** Distance from the host at which each glow colour orbits. */
--uy-ai-gradient-glow-orbit-radius: 6px;
/** Softness of each glow shadow. This is the box-shadow blur radius. */
--uy-ai-gradient-glow-blur-radius: 12px;
/** Angular offset for the plum glow, relative to the yellow glow. */
--uy-ai-gradient-glow-plum-phase-offset: 120deg;
/** Angular offset for the blue glow, relative to the yellow glow. */
--uy-ai-gradient-glow-blue-phase-offset: 240deg;
/**
* Three coloured box shadows that orbit the host as the gradient angle
* changes. `cos(angle)` supplies each horizontal offset and `sin(angle)`
* its vertical offset, tracing a circular path. The two additional
* shadows are phase-shifted by 120deg and 240deg, producing an evenly
* spaced yellow, plum, and blue glow.
*
* Use through `box-shadow: var(--uy-ai-gradient-glow)`. This property is
* only applied by `aiGradientEffect({ glow: true })` on hover or focus.
*/
--uy-ai-gradient-glow:
calc(
cos(var(--uy-ai-gradient-angle)) *
var(--uy-ai-gradient-glow-orbit-radius)
)
calc(
sin(var(--uy-ai-gradient-angle)) *
var(--uy-ai-gradient-glow-orbit-radius)
)
var(--uy-ai-gradient-glow-blur-radius)
color-mix(
in srgb,
var(--uy-color-yellow-l5) var(--uy-ai-gradient-glow-opacity),
transparent
),
calc(
cos(
calc(
var(--uy-ai-gradient-angle) +
var(--uy-ai-gradient-glow-plum-phase-offset)
)
) *
var(--uy-ai-gradient-glow-orbit-radius)
)
calc(
sin(
calc(
var(--uy-ai-gradient-angle) +
var(--uy-ai-gradient-glow-plum-phase-offset)
)
) *
var(--uy-ai-gradient-glow-orbit-radius)
)
var(--uy-ai-gradient-glow-blur-radius)
color-mix(
in srgb,
var(--uy-color-plum-l5) var(--uy-ai-gradient-glow-opacity),
transparent
),
calc(
cos(
calc(
var(--uy-ai-gradient-angle) +
var(--uy-ai-gradient-glow-blue-phase-offset)
)
) *
var(--uy-ai-gradient-glow-orbit-radius)
)
calc(
sin(
calc(
var(--uy-ai-gradient-angle) +
var(--uy-ai-gradient-glow-blue-phase-offset)
)
) *
var(--uy-ai-gradient-glow-orbit-radius)
)
var(--uy-ai-gradient-glow-blur-radius)
color-mix(
in srgb,
var(--uy-color-blue-l4) var(--uy-ai-gradient-glow-opacity),
transparent
);
}
}
/** Rotates the conic gradient and the orbital glow angle once per cycle. */
@keyframes uy-ai-gradient-angle-rotate {
to {
--uy-ai-gradient-angle: 360deg;
}
}
/** Sweeps the repeating linear gradient through its seamless repeat point. */
@keyframes uy-ai-gradient-linear-sweep {
to {
background-position: 66.666667% 50%;
}
}
/** Expands and contracts the radial gradient to create a breathing effect. */
@keyframes uy-ai-gradient-radial-pulse {
0%,
100% {
background-size: 100% 100%;
}
50% {
background-size: 200% 200%;
}
}
/* this is Midnight css reset */
@layer base {
html {
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-moz-osx-font-smoothing: grayscale;
}
/* Set core body defaults */
body {
font-family: var(--uy-font-sans);
font-size: 100%;
line-height: 1.5;
color: var(--uy-color-content-neutral);
background-color: var(--uy-color-canvas);
min-height: 100vh;
margin: 0;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
-webkit-text-size-adjust: 100%;
}
/* Remove default margin */
h1,
h2,
h3,
h4,
figure,
figcaption,
blockquote {
margin: 0;
}
/* Make images easier to work with */
img {
max-width: 100%;
display: block;
}
svg:not(:root) {
overflow: visible;
}
a {
text-decoration: none;
}
table {
border-spacing: 0;
}
iframe {
border: 0;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
b,
strong {
font-weight: var(--uy-font-weight-bold);
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
}