@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
:root,
:host {
/* —————————— */
/* COLORS */
/* —————————— */
/* Base colors */
--color-white: #ffffff;
--color-black: #000000;
--color-transparent: #ffffff00;
/* Neutral colors */
--color-neutral-25: #fdfdfd;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e9eaeb;
--color-neutral-300: #d5d7da;
--color-neutral-400: #a4a7ae;
--color-neutral-500: #717680;
--color-neutral-600: #535862;
--color-neutral-700: #414651;
--color-neutral-800: #252b37;
--color-neutral-900: #181d27;
--color-neutral-950: #0a0d12;
/* Brand colors */
--color-brand-25: #fff3ee;
--color-brand-50: #ffe6dd;
--color-brand-100: #ffc9b3;
--color-brand-200: #ffa37c;
--color-brand-300: #ff7746;
--color-brand-400: #ff5323;
--color-brand-500: #fb4520;
--color-brand-600: #f84d23;
--color-brand-700: #d63d1b;
--color-brand-800: #a72f14;
--color-brand-900: #761f0d;
--color-brand-950: #541508;
/* Error colors */
--color-error-25: #fff8fa;
--color-error-50: #fef3f2;
--color-error-100: #fee4e2;
--color-error-200: #fecdca;
--color-error-300: #fda29b;
--color-error-400: #f97066;
--color-error-500: #f04438;
--color-error-600: #d92d20;
--color-error-700: #b42318;
--color-error-800: #912018;
--color-error-900: #7a271a;
--color-error-950: #55160c;
/* Success colors */
--color-success-25: #F6FEF9;
--color-success-50: #ECFDF3;
--color-success-100: #DCFAE6;
--color-success-200: #ABEFC6;
--color-success-300: #75E0A7;
--color-success-400: #47CD89;
--color-success-500: #17B26A;
--color-success-600: #079455;
--color-success-700: #067647;
--color-success-800: #085D3A;
--color-success-900: #074D31;
--color-success-950: #053321;
/* Warning colors */
--color-warning-25: #FFFCF5;
--color-warning-50: #FFFAEB;
--color-warning-100: #FEF0C7;
--color-warning-200: #FEDF89;
--color-warning-300: #FEC84B;
--color-warning-400: #FDB022;
--color-warning-500: #F79009;
--color-warning-600: #DC6803;
--color-warning-700: #B54708;
--color-warning-800: #93370D;
--color-warning-900: #7A2E0E;
--color-warning-950: #4E1D09;
/* ——————————————— */
/* Semantic colors */
/* ——————————————— */
/* Background and borders */
--color-white-50: rgba(255, 255, 255, 0.5);
--color-white-100: var(--color-white);
--color-gray-light: var(--color-neutral-100);
--color-gray-solid: var(--color-neutral-600);
--color-brand-light: var(--color-brand-50);
--color-brand-solid: var(--color-brand-600);
--color-error-solid: var(--color-error-600);
/* Foreground colors */
--color-fg-white: var(--color-white);
--color-fg-black: var(--color-neutral-900);
--color-fg-gray: var(--color-neutral-400);
/* ———————— */
/* BODY */
/* ———————— */
--body-padding-mobile: 0;
--body-padding-desktop: 0;
--main-padding-mobile: 16px 16px 40px 16px;
--main-padding-desktop: 32px 32px 80px 32px;
/* —————————— */
/* MARGINS */
/* —————————— */
--default-margin-top: 48px;
--buttons-margin-top: 20px;
--badges-margin-top: 20px;
/* —————————— */
/* TEXT */
/* —————————— */
/* Font family */
--font-family-sans: "Inter Tight", sans-serif;
--font-family-serif: serif;
--font-family-mono: monospace;
--font-size: inherit;
--font-weight: inherit;
--font-feature-settings: 'liga' on, 'calt' on;
--line-height: inherit;
--text-color: var(--foreground-style-dark);
/* Display text styles */
/* Display XS */
--display-xs-font-size-mobile: 20px;
--display-xs-line-height-mobile: 24px;
--display-xs-letter-spacing-mobile: 0;
--display-xs-font-size-desktop: 24px;
--display-xs-line-height-desktop: 30px;
--display-xs-letter-spacing-desktop: 0;
/* Display SM */
--display-sm-font-size-mobile: 24px;
--display-sm-line-height-mobile: 28px;
--display-sm-letter-spacing-mobile: 0;
--display-sm-font-size-desktop: 28px;
--display-sm-line-height-desktop: 36px;
--display-sm-letter-spacing-desktop: 0;
/* Display MD */
--display-md-font-size-mobile: 28px;
--display-md-line-height-mobile: 36px;
--display-md-letter-spacing-mobile: 0;
--display-md-font-size-desktop: 36px;
--display-md-line-height-desktop: 44px;
--display-md-letter-spacing-desktop: 0;
/* Display LG */
--display-lg-font-size-mobile: 36px;
--display-lg-line-height-mobile: 36px;
--display-lg-letter-spacing-mobile: 0;
--display-lg-font-size-desktop: 48px;
--display-lg-line-height-desktop: 48px;
--display-lg-letter-spacing-desktop: 0;
/* Display XL */
--display-xl-font-size-mobile: 48px;
--display-xl-line-height-mobile: 60px;
--display-xl-letter-spacing-mobile: 0;
--display-xl-font-size-desktop: 60px;
--display-xl-line-height-desktop: 72px;
--display-xl-letter-spacing-desktop: 0;
/* Display 2XL */
--display-2xl-font-size-mobile: 60px;
--display-2xl-line-height-mobile: 72px;
--display-2xl-letter-spacing-mobile: 0;
--display-2xl-font-size-desktop: 72px;
--display-2xl-line-height-desktop: 90px;
--display-2xl-letter-spacing-desktop: 0;
/* Text font sizes */
--text-xs-font-size: 12px;
--text-sm-font-size: 14px;
--text-md-font-size: 16px;
--text-lg-font-size: 18px;
--text-xl-font-size: 20px;
/* Text line heights */
--text-xs-line-height: 16px;
--text-sm-line-height: 20px;
--text-md-line-height: 24px;
--text-lg-line-height: 28px;
--text-xl-line-height: 30px;
/* ———————— */
/* HEADINGS */
/* ———————— */
/* H1 */
--h1-font-size-mobile: 36px;
--h1-font-weight-mobile: 500;
--h1-line-height-mobile: 44px;
--h1-letter-spacing-mobile: 0;
--h1-margin-top-mobile: 40px;
--h1-margin-bottom-mobile: 20px;
--h1-font-size-desktop: 56px;
--h1-font-weight-desktop: 500;
--h1-line-height-desktop: 64px;
--h1-letter-spacing-desktop: 0;
--h1-margin-top-desktop: 48px;
--h1-margin-bottom-desktop: 24px;
/* H2 */
--h2-font-size-mobile: 28px;
--h2-font-weight-mobile: 500;
--h2-line-height-mobile: 36px;
--h2-letter-spacing-mobile: 0;
--h2-margin-top-mobile: 32px;
--h2-margin-bottom-mobile: 16px;
--h2-font-size-desktop: 40px;
--h2-font-weight-desktop: 500;
--h2-line-height-desktop: 48px;
--h2-letter-spacing-desktop: 0;
--h2-margin-top-desktop: 40px;
--h2-margin-bottom-desktop: 20px;
/* H3 */
--h3-font-size-mobile: 22px;
--h3-font-weight-mobile: 500;
--h3-line-height-mobile: 28px;
--h3-letter-spacing-mobile: 0;
--h3-margin-top-mobile: 32px;
--h3-margin-bottom-mobile: 12px;
--h3-font-size-desktop: 28px;
--h3-font-weight-desktop: 500;
--h3-line-height-desktop: 36px;
--h3-letter-spacing-desktop: 0;
--h3-margin-top-desktop: 32px;
--h3-margin-bottom-desktop: 16px;
/* H4 */
--h4-font-size-mobile: 18px;
--h4-font-weight-mobile: 500;
--h4-line-height-mobile: 24px;
--h4-letter-spacing-mobile: 0;
--h4-margin-top-mobile: 20px;
--h4-margin-bottom-mobile: 8px;
--h4-font-size-desktop: 22px;
--h4-font-weight-desktop: 500;
--h4-line-height-desktop: 30px;
--h4-letter-spacing-desktop: 0;
--h4-margin-top-desktop: 32px;
--h4-margin-bottom-desktop: 12px;
/* —————————— */
/* PARAGRAPHS */
/* —————————— */
--p-margin-top-mobile: 0;
--p-margin-bottom-mobile: 16px;
--p-margin-top-desktop: 0;
--p-margin-bottom-desktop: 16px;
/* Lists */
--list-padding: 0 0 0 .5em;
--list-margin: 0;
--list-nested-margin: 0.5em 0 1em 1em;
--list-item-margin-bottom: 0.5em;
/* ol */
--list-ordered-item-padding-left-level-1: 1.5em;
--list-ordered-item-padding-left-level-2: 1.5em;
/* ul */
--list-unsorted-item-padding-left-level-1: 1em;
--list-unsorted-item-padding-left-level-2: 1em;
--list-unsorted-bullet-symbol-level-1: '•';
--list-unsorted-bullet-symbol-level-2: '•';
/* Checklist */
--list-checklist-item-gap: 12px;
--list-checklist-bullet-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z' fill='%23FFE6DD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z' fill='%23F84D23'/%3E%3C/svg%3E");
--list-checklist-bullet-vertical-offset: -2px;
/* —————————— */
/* SPACING */
/* —————————— */
--spacing-3x-small: 8px;
--spacing-2x-small: 12px;
--spacing-x-small: 16px;
--spacing-small: 20px;
--spacing-medium: 24px;
--spacing-large: 32px;
--spacing-x-large: 40px;
--spacing-2x-large: 48px;
--spacing-3x-large: 64px;
--spacing-4x-large: 80px;
/* ————————————————————— */
/* MAX CONTENT WIDTH */
/* ————————————————————— */
--max-content-width: 740px;
/* ————————————— */
/* FOCUS EFFECTS */
/* ————————————— */
--focus-ring-border: solid 1px transparent;
--focus-ring-shadow: 0px 0px 0px 1px white, 0px 0px 0px 4px #0A74FF;
/* —————————————————————————————— */
/* BACKGROUND & FOREGROUND STYLES */
/* —————————————————————————————— */
/* Background styles */
--background-style-light: #FFFFFF;
--background-style-dark: #F8F9FC;
--background-style-dark-alt: #EAECF5;
--background-style-accent: gold;
--background-style-accent-alt: rgba(240, 204, 0, 0.2);
/* Text colors */
--foreground-style-light: #FAFAFA;
--foreground-style-dark: #181D27;
--foreground-style-dark-alt: #414651;
--foreground-style-accent: #0047A3;
--foreground-style-accent-alt: #0058CC;
--success-color: #067647;
/* Green */
--warning-color: #B54708;
/* Yellow */
--danger-color: #D92D20;
/* Red */
--faded-color: #717680;
/* ———— */
/* LINK */
/* ———— */
--link-gap: 4px;
--link-font-family: inherit;
--link-font-weight: 600;
--link-font-size: inherit;
--link-line-height: inherit;
/* Link Brand */
--link-brand-foreground: var(--color-brand-600);
--link-brand-background: transparent;
--link-brand-border: none;
--link-brand-box-shadow: none;
--link-brand-border-radius: 0;
--link-brand-padding: 0;
--link-brand-decoration: none;
--link-brand-foreground-hover: var(--link-brand-foreground);
--link-brand-background-hover: transparent;
--link-brand-border-hover: none;
--link-brand-box-shadow-hover: none;
--link-brand-border-radius-hover: var(--link-brand-border-radius);
--link-brand-padding-hover: 0;
--link-brand-decoration-hover: underline;
/* Link BW */
--link-bw-foreground: var(--color-fg-black);
--link-bw-background: transparent;
--link-bw-border: none;
--link-bw-box-shadow: none;
--link-bw-border-radius: 0;
--link-bw-padding: 0;
--link-bw-decoration: inherit;
--link-bw-foreground-hover: var(--link-bw-foreground);
--link-bw-background-hover: transparent;
--link-bw-border-hover: none;
--link-bw-box-shadow-hover: none;
--link-bw-border-radius-hover: var(--link-bw-border-radius);
--link-bw-padding-hover: 0;
--link-bw-decoration-hover: underline;
/* Link Inverse */
--link-inverse-foreground: white;
--link-inverse-background: transparent;
--link-inverse-border: none;
--link-inverse-box-shadow: none;
--link-inverse-border-radius: 0;
--link-inverse-padding: 0;
--link-inverse-decoration: inherit;
--link-inverse-foreground-hover: var(--link-inverse-foreground);
--link-inverse-background-hover: transparent;
--link-inverse-border-hover: none;
--link-inverse-box-shadow-hover: none;
--link-inverse-border-radius-hover: var(--link-inverse-border-radius);
--link-inverse-padding-hover: 0;
--link-inverse-decoration-hover: underline;
/* ———————— */
/* BIG LINK */
/* ———————— */
/* Link color A */
--big-link-color-a-foreground: var(--link-color-a-foreground);
--big-link-color-a-background: var(--link-color-a-background);
--big-link-color-a-border: var(--link-color-a-border);
--big-link-color-a-box-shadow: var(--link-color-a-box-shadow);
--big-link-color-a-border-radius: var(--link-color-a-border-radius);
--big-link-color-a-padding: var(--link-color-a-padding);
--big-link-color-a-decoration: var(--link-color-a-decoration);
--big-link-color-a-foreground-hover: var(--link-color-a-foreground-hover);
--big-link-color-a-background-hover: var(--link-color-a-background-hover);
--big-link-color-a-border-hover: var(--link-color-a-border-hover);
--big-link-color-a-box-shadow-hover: var(--link-color-a-box-shadow-hover);
--big-link-color-a-border-radius-hover: var(--link-color-a-border-radius-hover);
--big-link-color-a-padding-hover: var(--link-color-a-padding-hover);
--big-link-color-a-decoration-hover: var(--link-color-a-decoration-hover);
/* Link color B */
--big-link-bw-foreground: var(--link-bw-foreground);
--big-link-bw-background: var(--link-bw-background);
--big-link-bw-border: var(--link-bw-border);
--big-link-bw-box-shadow: var(--link-bw-box-shadow);
--big-link-bw-border-radius: var(--link-bw-border-radius);
--big-link-bw-padding: var(--link-bw-padding);
--big-link-bw-decoration: var(--link-bw-decoration);
--big-link-bw-foreground-hover: var(--link-bw-foreground-hover);
--big-link-bw-background-hover: var(--link-bw-background-hover);
--big-link-bw-border-hover: var(--link-bw-border-hover);
--big-link-bw-box-shadow-hover: var(--link-bw-box-shadow-hover);
--big-link-bw-border-radius-hover: var(--link-bw-border-radius-hover);
--big-link-bw-padding-hover: var(--link-bw-padding-hover);
--big-link-bw-decoration-hover: var(--link-bw-decoration-hover);
/* Link inverse */
--big-link-inverse-foreground: var(--link-inverse-foreground);
--big-link-inverse-background: var(--link-inverse-background);
--big-link-inverse-border: var(--link-inverse-border);
--big-link-inverse-box-shadow: var(--link-inverse-box-shadow);
--big-link-inverse-border-radius: var(--link-inverse-border-radius);
--big-link-inverse-padding: var(--link-inverse-padding);
--big-link-inverse-decoration: var(--link-inverse-decoration);
--big-link-inverse-foreground-hover: var(--link-inverse-foreground-hover);
--big-link-inverse-background-hover: var(--link-inverse-background-hover);
--big-link-inverse-border-hover: var(--link-inverse-border-hover);
--big-link-inverse-box-shadow-hover: var(--link-inverse-box-shadow-hover);
--big-link-inverse-border-radius-hover: var(--link-inverse-border-radius-hover);
--big-link-inverse-padding-hover: var(--link-inverse-padding-hover);
--big-link-inverse-decoration-hover: var(--link-inverse-decoration-hover);
/* ——————————— */
/* LINK BUTTON */
/* ——————————— */
--link-button-brand-color: var(--color-brand-600);
--link-button-brand-border: none;
--link-button-brand-box-shadow: none;
--link-button-brand-color-hover: var(--link-button-brand-color);
--link-button-brand-border-hover: none;
--link-button-brand-box-shadow-hover: none;
--link-button-bw-color: inherit;
--link-button-bw-border: none;
--link-button-bw-box-shadow: none;
--link-button-bw-color-hover: inherit;
--link-button-bw-border-hover: none;
--link-button-bw-box-shadow-hover: none;
--link-button-inverse-color: inherit;
--link-button-inverse-border: none;
--link-button-inverse-box-shadow: none;
--link-button-inverse-color-hover: inherit;
--link-button-inverse-border-hover: none;
--link-button-inverse-box-shadow-hover: none;
/* —————————— */
/* BOX BUTTON */
/* —————————— */
--default-button-box-shadow: none;
--button-font-family: var(--font-family-sans);
--button-font-weight: 500;
--button-box-shadow: none;
/* Solid Brand */
--button-brand-solid-background: var(--color-brand-600);
--button-brand-solid-background-hover: var(--color-brand-700);
--button-brand-solid-color: var(--color-fg-white);
--button-brand-solid-color-hover: var(--color-fg-white);
--button-brand-solid-border: 2px solid var(--Gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12));
--button-brand-solid-border-hover: var(--button-brand-solid-border);
--button-brand-solid-box-shadow: var(--default-button-box-shadow);
--button-brand-solid-box-shadow-hover: var(--button-brand-solid-box-shadow);
/* Solid BW */
--button-bw-solid-background: var(--color-neutral-950);
--button-bw-solid-background-hover: var(--button-bw-solid-background);
--button-bw-solid-color: var(--color-white);
--button-bw-solid-color-hover: var(--button-bw-solid-color);
--button-bw-solid-border: 2px solid var(--Gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12));
--button-bw-solid-border-hover: var(--button-bw-solid-border);
--button-bw-solid-box-shadow: var(--default-button-box-shadow);
--button-bw-solid-box-shadow-hover: var(--button-bw-solid-box-shadow);
/* Solid Inverse */
--button-inverse-solid-background: var(--color-white);
--button-inverse-solid-background-hover: var(--button-inverse-solid-background);
--button-inverse-solid-color: var(--color-brand-600);
--button-inverse-solid-color-hover: var(--button-inverse-solid-color);
--button-inverse-solid-border: 1px solid rgba(10, 13, 18, 0.18);
--button-inverse-solid-border-hover: var(--button-inverse-solid-border);
--button-inverse-solid-box-shadow: var(--default-button-box-shadow);
--button-inverse-solid-box-shadow-hover: var(--button-inverse-solid-box-shadow);
/* Solid Disabled */
--button-disabled-solid-background: #e5e7eb;
--button-disabled-solid-color: #9ca3af;
--button-disabled-solid-border: none;
--button-disabled-solid-box-shadow: none;
/* Outline Brand */
--button-brand-outline-background: transparent;
--button-brand-outline-background-hover: var(--color-brand-light);
--button-brand-outline-color: #414651;
--button-brand-outline-color-hover: var(--button-brand-outline-color);
--button-brand-outline-border: 1px solid var(--Colors-Border-border-primary, #D5D7DA);
--button-brand-outline-border-hover: var(--button-brand-outline-border);
--button-brand-outline-box-shadow: var(--default-button-box-shadow);
--button-brand-outline-box-shadow-hover: var(--button-brand-outline-box-shadow);
/* Outline BW */
--button-bw-outline-background: transparent;
--button-bw-outline-background-hover: rgba(0, 0, 0, 0.10);
--button-bw-outline-color: #181D27;
--button-bw-outline-color-hover: #0A0D12;
--button-bw-outline-border: 1px solid #181D27;
--button-bw-outline-border-hover: var(--button-bw-outline-border);
--button-bw-outline-box-shadow: var(--default-button-box-shadow);
--button-bw-outline-box-shadow-hover: var(--button-bw-outline-box-shadow);
/* Outline Inverse */
--button-inverse-outline-background: transparent;
--button-inverse-outline-background-hover: rgba(255, 255, 255, 0.10);
--button-inverse-outline-color: var(--color-white);
--button-inverse-outline-color-hover: var(--button-inverse-outline-color);
--button-inverse-outline-border: 1px solid var(--color-white);
--button-inverse-outline-border-hover: var(--button-inverse-outline-border);
--button-inverse-outline-box-shadow: var(--default-button-box-shadow);
--button-inverse-outline-box-shadow-hover: var(--button-inverse-outline-box-shadow);
/* Outline Disabled */
--button-disabled-outline-background: #f3f4f6;
--button-disabled-outline-color: #9ca3af;
--button-disabled-outline-border: 1px solid #e5e7eb;
--button-disabled-outline-box-shadow: none;
/* Ghost Brand */
--button-brand-ghost-background: transparent;
--button-brand-ghost-background-hover: var(--button-brand-outline-background-hover);
--button-brand-ghost-color: var(--button-brand-outline-color);
--button-brand-ghost-color-hover: var(--button-brand-outline-color-hover);
--button-brand-ghost-border: solid 1px transparent;
--button-brand-ghost-border-hover: solid 1px transparent;
--button-brand-ghost-box-shadow: none;
--button-brand-ghost-box-shadow-hover: none;
/* Ghost BW */
--button-bw-ghost-background: transparent;
--button-bw-ghost-background-hover: var(--button-bw-outline-background-hover);
--button-bw-ghost-color: #181D27;
--button-bw-ghost-color-hover: #0A0D12;
--button-bw-ghost-border: solid 1px transparent;
--button-bw-ghost-border-hover: solid 1px transparent;
--button-bw-ghost-box-shadow: none;
--button-bw-ghost-box-shadow-hover: none;
/* Ghost Inverse */
--button-inverse-ghost-background: transparent;
--button-inverse-ghost-background-hover: var(--button-inverse-outline-background-hover);
--button-inverse-ghost-color: var(--button-inverse-outline-color);
--button-inverse-ghost-color-hover: var(--button-inverse-ghost-color);
--button-inverse-ghost-border: solid 1px transparent;
--button-inverse-ghost-border-hover: solid 1px transparent;
--button-inverse-ghost-box-shadow: none;
--button-inverse-ghost-box-shadow-hover: none;
/* Ghost Disabled */
--button-disabled-ghost-background: transparent;
--button-disabled-ghost-color: #9ca3af;
--button-disabled-ghost-border: none;
--button-disabled-ghost-box-shadow: none;
/* Sizes */
--button-small-height: 36px;
--button-small-padding: 8px 12px;
--button-small-gap: 4px;
--button-small-icon-size: 16px;
--button-small-font-size: 12px;
--button-small-line-height: 16px;
--button-small-border-radius: 9999px;
--button-medium-height: 40px;
--button-medium-padding: 10px 16px;
--button-medium-gap: 6px;
--button-medium-icon-size: 20px;
--button-medium-font-size: 14px;
--button-medium-line-height: 20px;
--button-medium-border-radius: 9999px;
--button-large-height: 48px;
--button-large-padding: 12px 20px;
--button-large-gap: 8px;
--button-large-icon-size: 24px;
--button-large-font-size: 16px;
--button-large-line-height: 24px;
--button-large-border-radius: 9999px;
/* ———————————— */
/* Extra button */
/* ———————————— */
/* Extra Brand */
--button-brand-extra-background: var(--button-brand-solid-background);
--button-brand-extra-color: var(--button-brand-solid-color);
--button-brand-extra-border: var(--button-brand-solid-border);
--button-brand-extra-box-shadow: var(--button-brand-solid-box-shadow);
--button-brand-extra-background-hover: var(--button-brand-solid-background-hover);
--button-brand-extra-color-hover: var(--button-brand-solid-color-hover);
--button-brand-extra-border-hover: var(--button-brand-solid-border-hover);
--button-brand-extra-box-shadow-hover: var(--button-brand-solid-box-shadow-hover);
--button-small-brand-extra-border-radius: inherit;
--button-small-brand-extra-height: inherit;
--button-small-brand-extra-padding: inherit;
--button-small-brand-extra-gap: inherit;
--button-small-brand-extra-icon-size: inherit;
--button-small-brand-extra-font-size: inherit;
--button-small-brand-extra-line-height: inherit;
--button-small-brand-extra-border-radius-hover: inherit;
--button-small-brand-extra-height-hover: inherit;
--button-small-brand-extra-padding-hover: inherit;
--button-small-brand-extra-gap-hover: inherit;
--button-small-brand-extra-icon-size-hover: inherit;
--button-small-brand-extra-font-size-hover: inherit;
--button-small-brand-extra-line-height-hover: inherit;
--button-medium-brand-extra-border-radius: inherit;
--button-medium-brand-extra-height: inherit;
--button-medium-brand-extra-padding: inherit;
--button-medium-brand-extra-gap: inherit;
--button-medium-brand-extra-icon-size: inherit;
--button-medium-brand-extra-font-size: inherit;
--button-medium-brand-extra-line-height: inherit;
--button-medium-brand-extra-border-radius-hover: inherit;
--button-medium-brand-extra-height-hover: inherit;
--button-medium-brand-extra-padding-hover: inherit;
--button-medium-brand-extra-gap-hover: inherit;
--button-medium-brand-extra-icon-size-hover: inherit;
--button-medium-brand-extra-font-size-hover: inherit;
--button-medium-brand-extra-line-height-hover: inherit;
--button-large-brand-extra-border-radius: inherit;
--button-large-brand-extra-height: inherit;
--button-large-brand-extra-padding: inherit;
--button-large-brand-extra-gap: inherit;
--button-large-brand-extra-icon-size: inherit;
--button-large-brand-extra-font-size: inherit;
--button-large-brand-extra-line-height: inherit;
--button-large-brand-extra-border-radius-hover: inherit;
--button-large-brand-extra-height-hover: inherit;
--button-large-brand-extra-padding-hover: inherit;
--button-large-brand-extra-gap-hover: inherit;
--button-large-brand-extra-icon-size-hover: inherit;
--button-large-brand-extra-font-size-hover: inherit;
--button-large-brand-extra-line-height-hover: inherit;
/* Extra Color B */
--button-bw-extra-background: var(--button-bw-solid-background);
--button-bw-extra-color: var(--button-bw-solid-color);
--button-bw-extra-border: var(--button-bw-solid-border);
--button-bw-extra-box-shadow: var(--button-bw-solid-box-shadow);
--button-bw-extra-background-hover: var(--button-bw-solid-background-hover);
--button-bw-extra-color-hover: var(--button-bw-solid-color-hover);
--button-bw-extra-border-hover: var(--button-bw-solid-border-hover);
--button-bw-extra-box-shadow-hover: var(--button-bw-solid-box-shadow-hover);
--button-small-bw-extra-border-radius: inherit;
--button-small-bw-extra-height: inherit;
--button-small-bw-extra-padding: inherit;
--button-small-bw-extra-gap: inherit;
--button-small-bw-extra-icon-size: inherit;
--button-small-bw-extra-font-size: inherit;
--button-small-bw-extra-line-height: inherit;
--button-small-bw-extra-border-radius-hover: inherit;
--button-small-bw-extra-height-hover: inherit;
--button-small-bw-extra-padding-hover: inherit;
--button-small-bw-extra-gap-hover: inherit;
--button-small-bw-extra-icon-size-hover: inherit;
--button-small-bw-extra-font-size-hover: inherit;
--button-small-bw-extra-line-height-hover: inherit;
--button-medium-bw-extra-border-radius: inherit;
--button-medium-bw-extra-height: inherit;
--button-medium-bw-extra-padding: inherit;
--button-medium-bw-extra-gap: inherit;
--button-medium-bw-extra-icon-size: inherit;
--button-medium-bw-extra-font-size: inherit;
--button-medium-bw-extra-line-height: inherit;
--button-medium-bw-extra-border-radius-hover: inherit;
--button-medium-bw-extra-height-hover: inherit;
--button-medium-bw-extra-padding-hover: inherit;
--button-medium-bw-extra-gap-hover: inherit;
--button-medium-bw-extra-icon-size-hover: inherit;
--button-medium-bw-extra-font-size-hover: inherit;
--button-medium-bw-extra-line-height-hover: inherit;
--button-large-bw-extra-border-radius: inherit;
--button-large-bw-extra-height: inherit;
--button-large-bw-extra-padding: inherit;
--button-large-bw-extra-gap: inherit;
--button-large-bw-extra-icon-size: inherit;
--button-large-bw-extra-font-size: inherit;
--button-large-bw-extra-line-height: inherit;
--button-large-bw-extra-border-radius-hover: inherit;
--button-large-bw-extra-height-hover: inherit;
--button-large-bw-extra-padding-hover: inherit;
--button-large-bw-extra-gap-hover: inherit;
--button-large-bw-extra-icon-size-hover: inherit;
--button-large-bw-extra-font-size-hover: inherit;
--button-large-bw-extra-line-height-hover: inherit;
/* Extra Inverse */
--button-inverse-extra-background: var(--button-inverse-solid-background);
--button-inverse-extra-color: var(--button-inverse-solid-color);
--button-inverse-extra-border: var(--button-inverse-solid-border);
--button-inverse-extra-box-shadow: var(--button-inverse-solid-box-shadow);
--button-inverse-extra-background-hover: var(--button-inverse-solid-background-hover);
--button-inverse-extra-color-hover: var(--button-inverse-solid-color-hover);
--button-inverse-extra-border-hover: var(--button-inverse-solid-border-hover);
--button-inverse-extra-box-shadow-hover: var(--button-inverse-solid-box-shadow-hover);
--button-small-inverse-extra-border-radius: inherit;
--button-small-inverse-extra-height: inherit;
--button-small-inverse-extra-padding: inherit;
--button-small-inverse-extra-gap: inherit;
--button-small-inverse-extra-icon-size: inherit;
--button-small-inverse-extra-font-size: inherit;
--button-small-inverse-extra-line-height: inherit;
--button-small-inverse-extra-border-radius-hover: inherit;
--button-small-inverse-extra-height-hover: inherit;
--button-small-inverse-extra-padding-hover: inherit;
--button-small-inverse-extra-gap-hover: inherit;
--button-small-inverse-extra-icon-size-hover: inherit;
--button-small-inverse-extra-font-size-hover: inherit;
--button-small-inverse-extra-line-height-hover: inherit;
--button-medium-inverse-extra-border-radius: inherit;
--button-medium-inverse-extra-height: inherit;
--button-medium-inverse-extra-padding: inherit;
--button-medium-inverse-extra-gap: inherit;
--button-medium-inverse-extra-icon-size: inherit;
--button-medium-inverse-extra-font-size: inherit;
--button-medium-inverse-extra-line-height: inherit;
--button-medium-inverse-extra-border-radius-hover: inherit;
--button-medium-inverse-extra-height-hover: inherit;
--button-medium-inverse-extra-padding-hover: inherit;
--button-medium-inverse-extra-gap-hover: inherit;
--button-medium-inverse-extra-icon-size-hover: inherit;
--button-medium-inverse-extra-font-size-hover: inherit;
--button-medium-inverse-extra-line-height-hover: inherit;
--button-large-inverse-extra-border-radius: inherit;
--button-large-inverse-extra-height: inherit;
--button-large-inverse-extra-padding: inherit;
--button-large-inverse-extra-gap: inherit;
--button-large-inverse-extra-icon-size: inherit;
--button-large-inverse-extra-font-size: inherit;
--button-large-inverse-extra-line-height: inherit;
--button-large-inverse-extra-border-radius-hover: inherit;
--button-large-inverse-extra-height-hover: inherit;
--button-large-inverse-extra-padding-hover: inherit;
--button-large-inverse-extra-gap-hover: inherit;
--button-large-inverse-extra-icon-size-hover: inherit;
--button-large-inverse-extra-font-size-hover: inherit;
--button-large-inverse-extra-line-height-hover: inherit;
/* Extra Disabled */
--button-disabled-extra-background: var(--button-disabled-ghost-background);
--button-disabled-extra-color: var(--button-disabled-ghost-color);
--button-disabled-extra-border: var(--button-disabled-ghost-border);
--button-disabled-extra-box-shadow: var(--button-disabled-ghost-box-shadow);
/* ————— */
/* IMAGE */
/* ————— */
--image-border-radius: 12px;
--image-aspect-ratio: auto;
--image-transform: scale(1.05);
--image-overlay-background: rgba(0, 0, 0, 0.5);
--image-overlay-color: white;
--image-overlay-size: 4rem;
--image-overlay-font-weight: var(--font-weight-regular);
--image-overlay-line-height: var(--line-height-x-large);
--image-row-gap: 32px;
--image-column-gap: 32px;
/* ————— */
/* VIDEO */
/* ————— */
--video-border-radius: 8px;
/* ————————— */
/* LIST ITEM */
/* ————————— */
--list-item-gap: 20px 40px;
--list-item-thumb-aspect-ratio: 3/2;
--list-item-body-gap: 8px;
--list-item-body-padding: 0 48px 0 0;
--list-item-horizontal-thumb-width: 360px;
/* ———— */
/* CARD */
/* ———— */
--card-border-width: 1px;
--card-border-style: solid;
--card-border-radius: 12px;
--card-min-height: auto;
--card-height: max-content;
--card-image-border-radius: 12px;
--card-horizontal-gap-desktop: 0;
--card-horizontal-body-padding-desktop: 56px 56px 56px 56px;
--card-horizontal-reversed-body-padding-desktop: 56px 56px 56px 56px;
--card-horizontal-image-padding-desktop: 40px 0 40px 40px;
--card-horizontal-reversed-image-padding-desktop: 40px 40px 40px 0;
--card-horizontal-gap-mobile: 32px;
--card-horizontal-body-padding-mobile: 0px 20px 20px 20px;
--card-horizontal-image-padding-mobile: 0 20px 20px 20px;
--card-vertical-gap: 32px;
--card-vertical-body-padding: 0 20px 20px 20px;
--card-vertical-image-padding: 20px 20px 0 20px;
/* —————————————— */
/* IDENTITY CARD */
/* —————————————— */
--identity-card-border-width: 1px;
--identity-card-border-style: solid;
--identity-card-border-radius: var(--card-border-radius);
--identity-card-min-height: auto;
--identity-card-height: max-content;
--identity-card-image-border-radius: var(--image-border-radius);
--identity-card-horizontal-gap-desktop: 24px;
--identity-card-horizontal-body-padding-desktop: 0;
--identity-card-horizontal-reversed-body-padding-desktop: 0;
--identity-card-horizontal-image-padding-desktop: 0;
--identity-card-horizontal-reversed-image-padding-desktop: 0;
--identity-card-horizontal-gap-mobile: 16px;
--identity-card-horizontal-body-padding-mobile: 0 20px 20px 20px;
--identity-card-horizontal-image-padding-mobile: 20px 20px 0 20px;
--identity-card-vertical-gap: 16px;
--identity-card-vertical-body-padding: 0 20px 20px 20px;
--identity-card-vertical-image-padding: 20px 20px 0 20px;
/* ———————————— */
/* FORM CONTROL */
/* ———————————— */
--form-control-flex-direction: column;
--form-control-gap: 6px;
--form-control-body-width: auto;
--form-control-label-font-family: var(--font-family-sans);
--form-control-label-font-size: 14px;
--form-control-label-font-weight: 500;
--form-control-label-line-height: 20px;
--form-control-label-letter-spacing: var(--letter-spacing-normal);
--form-control-label-color: var(--text-color);
--form-control-label-text-transform: none;
--form-control-input-divider-color: #B3B8DB;
--form-control-supporting-text-font-family: var(--font-family-sans);
--form-control-supporting-text-font-size: 14px;
--form-control-supporting-text-font-weight: 400;
--form-control-supporting-text-line-height: 20px;
--form-control-supporting-text-color: #535862;
--form-control-supporting-text-invalid-color: #D92D20;
--form-control-help-icon-color: #A4A7AE;
/* ———————————————————— */
/* FORM CONTROL — INPUT */
/* ———————————————————— */
--form-control-input-width: 320px;
--form-control-input-height: 44px;
--form-control-input-font-family: var(--font-family-sans);
--form-control-input-font-size: var(--text-md-font-size);
--form-control-input-line-height: var(--text-md-line-height);
--form-control-input-body-gap: 8px;
--form-control-input-body-padding: 10px 14px;
--form-control-input-border-radius: 8px;
--form-control-input-border: 1px solid #B3B8DB;
--form-control-input-background: transparent;
--form-control-input-color: var(--text-color);
--form-control-input-placeholder-color: #717680;
--form-control-input-shadow: none;
--form-control-input-prefix-color: rgba(0, 0, 0, 0.54);
--form-control-input-suffix-color: rgba(0, 0, 0, 0.54);
--form-control-input-invalid-border: solid 1px #F04438;
--form-control-input-invalid-shadow: 0 0 0 1px #F04438;
--form-control-input-invalid-background: transparent;
--form-control-input-invalid-color: inherit;
--form-control-input-disabled-border: solid 1px #B3B8DB;
--form-control-input-disabled-shadow: none;
--form-control-input-disabled-background: #F8F9FC;
--form-control-input-disabled-color: #717680;
/* ——————— */
/* SECTION */
/* ——————— */
--section-wide-content-width: 1616px;
--section-narrow-content-width: var(--max-content-width);
--section-main-navigation-border-style: solid;
--section-main-navigation-border-width: 0 0 1px 0;
--section-main-navigation-border-color: var(--color-neutral-200);
--section-main-navigation-fixed-background: var(--color-white);
--section-border-width: 0;
--section-border-style: none;
--section-border-radius: 32px;
--section-shadow: none;
--section-width: 100%;
--section-padding-block-mobile: 40px;
--section-padding-inline-mobile: 0;
--section-padding-block-desktop: 80px;
--section-padding-inline-desktop: 0;
--section-extra-padding-inline-mobile: 40px;
--section-extra-padding-inline-desktop: 80px;
/* ——————— */
/* BOX */
/* ——————— */
--box-padding-mobile: 24px 20px;
--box-padding-desktop: 32px;
--box-border-width: 1px;
--box-border-style: solid;
--box-border-radius: 16px;
--box-shadow: 0 8px 54.5px -1px rgba(0, 0, 0, 0.22);
/* ————————— */
/* AVATAR */
/* ————————— */
/* Style */
--avatar-background: #f0f0f0;
--avatar-foreground: #000000;
--avatar-border: 1px solid #ccc;
--avatar-border-radius: 9999px;
--avatar-aspect-ratio: 1/1;
/* Size */
--avatar-size-xxs: 24px;
--avatar-size-xs: 32px;
--avatar-size-sm: 40px;
--avatar-size-md: 64px;
--avatar-size-lg: 80px;
--avatar-size-xl: 96px;
--avatar-size-xxl: 128px;
/* Button size */
--avatar-button-size-xxs: 16px;
--avatar-button-size-xs: 20px;
--avatar-button-size-sm: 24px;
--avatar-button-size-md: 28px;
--avatar-button-size-lg: 32px;
--avatar-button-size-xl: 48px;
--avatar-button-size-xxl: 64px;
/* Font size */
--avatar-font-size-xxs: 12px;
--avatar-font-size-xs: 14px;
--avatar-font-size-sm: 16px;
--avatar-font-size-md: 18px;
--avatar-font-size-lg: 28px;
--avatar-font-size-xl: 38px;
--avatar-font-size-xxl: 67px;
/* ———————————— */
/* AVATAR NAME */
/* ———————————— */
--avatar-name-background: transparent;
--avatar-name-foreground: var(--text-color);
--avatar-name-border: none;
--avatar-name-border-radius: 0;
--avatar-name-box-shadow: none;
--avatar-name-padding: 0;
--avatar-name-gap: var(--spacing-medium);
--avatar-name-flex-direction: row;
--avatar-name-align-items: center;
--avatar-name-justify-content: flex-start;
/* —————————————————— */
/* ACCORDION ITEM */
/* —————————————————— */
--accordion-item-border-radius: 0;
--accordion-item-padding: 32px 24px;
--accordion-item-heading-padding: 0;
--accordion-item-body-padding: 12px 0 0 0;
/* Numbering */
--accordion-item-numbering-margin: 8px;
--accordion-item-numbering-font-size: var(--text-xl-font-size);
--accordion-item-numbering-font-weight: var(--font-weight-light);
--accordion-item-numbering-line-height: var(--text-xl-line-height);
/* Spacing */
--accordion-spacing: 0;
/* Black style */
--accordion-item-black-border: solid 1px var(--color-neutral-300);
--accordion-item-black-border-width: 1px 0 0 0;
--accordion-item-black-background: #fff;
--accordion-item-black-box-shadow: none;
--accordion-item-black-heading-color: var(--text-color);
--accordion-item-black-numbering-color: var(--accordion-item-black-heading-color);
--accordion-item-black-body-color: #535862;
/* Black style - expanded */
--accordion-item-black-expanded-border: var(--accordion-item-black-border);
--accordion-item-black-expanded-border-width: var(--accordion-item-black-border-width);
--accordion-item-black-expanded-background: var(--accordion-item-black-background);
--accordion-item-black-expanded-box-shadow: var(--accordion-item-black-box-shadow);
--accordion-item-black-expanded-heading-color: var(--accordion-item-black-heading-color);
--accordion-item-black-expanded-numbering-color: var(--accordion-item-black-numbering-color);
--accordion-item-black-expanded-body-color: var(--accordion-item-black-body-color);
/* Black style :hover */
--accordion-item-black-border-hover: var(--accordion-item-black-border);
--accordion-item-black-border-width-hover: var(--accordion-item-black-border-width);
--accordion-item-black-background-hover: var(--accordion-item-black-background);
--accordion-item-black-box-shadow-hover: var(--accordion-item-black-box-shadow);
--accordion-item-black-heading-color-hover: var(--accordion-item-black-heading-color);
--accordion-item-black-numbering-color-hover: var(--accordion-item-black-numbering-color);
--accordion-item-black-body-color-hover: var(--accordion-item-black-body-color);
/* Black style - expanded :hover */
--accordion-item-black-expanded-border-hover: var(--accordion-item-black-border);
--accordion-item-black-expanded-border-width-hover: var(--accordion-item-black-border-width);
--accordion-item-black-expanded-background-hover: var(--accordion-item-black-background);
--accordion-item-black-expanded-box-shadow-hover: var(--accordion-item-black-box-shadow);
--accordion-item-black-expanded-heading-color-hover: var(--accordion-item-black-heading-color);
--accordion-item-black-expanded-numbering-color-hover: var(--accordion-item-black-numbering-color);
--accordion-item-black-expanded-body-color-hover: var(--accordion-item-black-body-color);
/* White style */
--accordion-item-white-border: solid 1px rgba(255, 255, 255, 0.15);
--accordion-item-white-border-width: 1px 0 0 0;
--accordion-item-white-background: transparent;
--accordion-item-white-box-shadow: none;
--accordion-item-white-heading-color: #fff;
--accordion-item-white-numbering-color: var(--accordion-item-white-heading-color);
--accordion-item-white-body-color: rgba(255, 255, 255, 0.75);
/* White style - expanded */
--accordion-item-white-expanded-border: var(--accordion-item-white-border);
--accordion-item-white-expanded-border-width: var(--accordion-item-white-border-width);
--accordion-item-white-expanded-background: var(--accordion-item-white-background);
--accordion-item-white-expanded-box-shadow: var(--accordion-item-white-box-shadow);
--accordion-item-white-expanded-heading-color: var(--accordion-item-white-heading-color);
--accordion-item-white-expanded-numbering-color: var(--accordion-item-white-numbering-color);
--accordion-item-white-expanded-body-color: var(--accordion-item-white-body-color);
/* White style :hover */
--accordion-item-white-border-hover: var(--accordion-item-white-border);
--accordion-item-white-border-width-hover: var(--accordion-item-white-border-width);
--accordion-item-white-background-hover: var(--accordion-item-white-background);
--accordion-item-white-box-shadow-hover: var(--accordion-item-white-box-shadow);
--accordion-item-white-heading-color-hover: var(--accordion-item-white-heading-color);
--accordion-item-white-numbering-color-hover: var(--accordion-item-white-numbering-color);
--accordion-item-white-body-color-hover: var(--accordion-item-white-body-color);
/* White style - expanded :hover */
--accordion-item-white-expanded-border-hover: var(--accordion-item-white-border);
--accordion-item-white-expanded-border-width-hover: var(--accordion-item-white-border-width);
--accordion-item-white-expanded-background-hover: var(--accordion-item-white-background);
--accordion-item-white-expanded-box-shadow-hover: var(--accordion-item-white-box-shadow);
--accordion-item-white-expanded-heading-color-hover: var(--accordion-item-white-heading-color);
--accordion-item-white-expanded-numbering-color-hover: var(--accordion-item-white-numbering-color);
--accordion-item-white-expanded-body-color-hover: var(--accordion-item-white-body-color);
/* ————————— */
/* BADGE */
/* ————————— */
--badge-font-weight: var(--font-weight-medium);
--badge-close-button-color: inherit;
--badge-close-button-size: 1em;
/* Sizes */
--badge-padding-sm: 2px 8px;
--badge-font-size-sm: 12px;
--badge-line-height-sm: 18px;
--badge-gap-sm: 4px;
--badge-border-radius-sm: var(--border-radius-full);
--badge-padding-md: 2px 10px;
--badge-font-size-md: 14px;
--badge-line-height-md: 20px;
--badge-gap-md: 6px;
--badge-border-radius-md: var(--border-radius-full);
--badge-padding-lg: 4px 12px;
--badge-font-size-lg: 14px;
--badge-line-height-lg: 20px;
--badge-gap-lg: 6px;
--badge-border-radius-lg: var(--border-radius-full);
/* Styles */
--badge-gray-background: var(--color-neutral-50);
--badge-gray-color: var(--color-neutral-700);
--badge-gray-border: 1px solid var(--color-neutral-200);
--badge-brand-background: var(--color-brand-50);
--badge-brand-color: var(--color-brand-700);
--badge-brand-border: 1px solid var(--color-brand-200);
--badge-inverse-background: rgba(255, 255, 255, 0.30);
--badge-inverse-color: var(--color-white);
--badge-inverse-border: 1px solid var(--color-white);
--badge-bw-background: rgba(0, 0, 0, 0.10);
--badge-bw-color: var(--color-neutral-900);
--badge-bw-border: 1px solid var(--color-neutral-900);
--badge-success-background: var(--color-success-50);
--badge-success-color: var(--color-success-700);
--badge-success-border: 1px solid var(--color-success-200);
--badge-warning-background: var(--color-warning-50);
--badge-warning-color: var(--color-warning-700);
--badge-warning-border: 1px solid var(--color-warning-200);
--badge-danger-background: var(--color-error-50);
--badge-danger-color: var(--color-error-700);
--badge-danger-border: 1px solid var(--color-error-200);
/* ————————————— */
/* BADGE SET */
/* ————————————— */
--badge-set-column-gap: 4px;
--badge-set-row-gap: 4px;
--badge-set-margin-bottom-mobile: 12px;
--badge-set-margin-bottom-desktop: 12px;
/* ———————— */
/* LINE */
/* ———————— */
--line-black-width: 1px;
--line-black-length-mobile: 100px;
--line-black-length-desktop: 160px;
--line-black-color: var(--color-black);
--line-black-background-image: none;
--line-black-background-repeat: no-repeat;
--line-black-margin: 48px 0;
--line-white-width: var(--line-black-width);
--line-white-length-mobile: var(--line-black-length-mobile);
--line-white-length-desktop: var(--line-black-length-desktop);
--line-white-color: var(--color-fg-white);
--line-white-background-image: var(--line-black-background-image);
--line-white-background-repeat: var(--line-black-background-repeat);
--line-white-margin: var(--line-black-margin);
--line-gray-width: var(--line-black-width);
--line-gray-length-mobile: var(--line-black-length-mobile);
--line-gray-length-desktop: var(--line-black-length-desktop);
--line-gray-color: var(--color-neutral-200);
--line-gray-background-image: var(--line-black-background-image);
--line-gray-background-repeat: var(--line-black-background-repeat);
--line-gray-margin: var(--line-black-margin);
/* ——————————————————— */
/* TAB & TAB GROUP */
/* ——————————————————— */
--tab-background: transparent;
--tab-foreground: #717680;
--tab-border: none;
--tab-border-radius: none;
--tab-box-shadow: none;
--tab-font-weight: var(--font-weight-semibold);
--tab-font-size: 16px;
--tab-line-height: 24px;
--tab-padding: 8px 12px;
--tab-gap: 8px;
--tab-active-border-width: 2px;
--tab-group-gap: 12px;
--tab-group-box-shadow: inset 0 -1px 0 0 var(--line-gray-color);
--tab-background-active: var(--tab-background);
--tab-foreground-active: var(--color-brand-600);
--tab-border-active: var(--tab-border);
--tab-border-radius-active: var(--tab-border-radius);
--tab-box-shadow-active: 0 2px 0 0 var(--tab-foreground-active);
--tab-font-weight-active: var(--tab-font-weight);
--tab-font-size-active: var(--tab-font-size);
--tab-line-height-active: var(--tab-line-height);
/* ————— */
/* QUOTE */
/* ————— */
--quote-blockquote-paragraph-gap: 16px;
--quote-caption-align-self: flex-start;
--quote-caption-justify-self: flex-start;
--quote-caption-text-align: left;
/* Layout */
--quote-full-padding-mobile: 0;
--quote-full-gap-mobile: 24px;
--quote-full-border-radius-mobile: 0;
--quote-full-padding-desktop: 0;
--quote-full-gap-desktop: 24px;
--quote-full-border-radius-desktop: 0;
--quote-card-padding-mobile: 32px;
--quote-card-gap-mobile: 32px;
--quote-card-border-radius-mobile: 12px;
--quote-card-padding-desktop: 32px;
--quote-card-gap-desktop: 32px;
--quote-card-border-radius-desktop: 12px;
/* Styles */
--quote-full-black-background: transparent;
--quote-full-black-foreground: #000000;
--quote-full-black-message-foreground: inherit;
--quote-full-black-shadow: none;
--quote-full-black-border: none;
--quote-full-white-background: transparent;
--quote-full-white-foreground: #ffffff;
--quote-full-white-message-foreground: inherit;
--quote-full-white-shadow: none;
--quote-full-white-border: none;
--quote-card-black-background: #f9f9f9;
--quote-card-black-foreground: #000000;
--quote-card-black-message-foreground: inherit;
--quote-card-black-shadow: none;
--quote-card-black-border: none;
--quote-card-white-background: rgba(255, 255, 255, 0.20);
--quote-card-white-foreground: #ffffff;
--quote-card-white-message-foreground: inherit;
--quote-card-white-shadow: none;
--quote-card-white-border: none;
/* ———————————— */
/* RADIO BUTTON */
/* ———————————— */
--radio-button-size: 20px;
--radio-button-indicator-size: 8px;
--radio-button-gap: 8px;
--radio-button-border-radius: var(--border-radius-full);
--radio-button-border: 1px solid #B3B8DB;
--radio-button-background: transparent;
--radio-button-border-hover: inherit;
--radio-button-background-hover: inherit;
--radio-button-border-checked: solid 1px var(--color-brand-600);
--radio-button-background-checked: var(--color-brand-600);
--radio-button-indicator-color: #fff;
--radio-button-border-checked-hover: var(--radio-button-border-checked);
--radio-button-background-checked-hover: var(--radio-button-background-checked);
--radio-button-indicator-color-hover: var(--radio-button-indicator-color);
--radio-button-border-disabled: inherit;
--radio-button-background-disabled: inherit;
--radio-button-indicator-color-disabled: #D5D7DA;
--radio-button-foreground-disabled: var(--radio-button-border-disabled);
/* ———————————— */
/* CHECKBOX */
/* ———————————— */
--checkbox-size: 20px;
--checkbox-indicator-size: 14px;
--checkbox-gap: 8px;
--checkbox-background: transparent;
--checkbox-border: solid 1px #B3B8DB;
--checkbox-border-radius: 4px;
--checkbox-indicator-color: white;
--checkbox-checked-icon: url('data:image/svg+xml;charset=UTF-8,');
--checkbox-indeterminate-icon: url('data:image/svg+xml;charset=UTF-8,');
--checkbox-border-hover: var(--checkbox-border);
--checkbox-background-hover: inherit;
--checkbox-border-checked: solid 1px var(--checkbox-background-checked);
--checkbox-background-checked: var(--color-brand-600);
--checkbox-border-checked-hover: solid 1px var(--foreground-style-accent-dark);
--checkbox-background-checked-hover: var(--checkbox-background-checked);
--checkbox-indicator-color-hover: var(--checkbox-indicator-color);
--checkbox-border-disabled: solid 1px var(--foreground-disabled);
--checkbox-background-disabled: transparent;
--checkbox-indicator-color-disabled: var(--foreground-disabled);
--checkbox-foreground-disabled: lightgray;
/* ——————————————— */
/* BREADCRUMBS */
/* ——————————————— */
/* #717680 */
--breadcrumbs-gap: 4px;
--breadcrumbs-separator-color: #D5D7DA;
--breadcrumbs-link-text-decoration: none;
--breadcrumbs-link-text-decoration-hover: underline;
--breadcrumbs-link-color: inherit;
--breadcrumbs-link-color-hover: var(--breadcrumbs-link-color);
--breadcrumbs-link-font-family: var(--font-family-sans);
--breadcrumbs-link-font-weight: 500;
--breadcrumbs-link-font-size: 12px;
--breadcrumbs-link-line-height: 18px;
--breadcrumbs-link-last-color: #717680;
--breadcrumbs-link-last-color-hover: var(--breadcrumbs-link-last-color);
/* —————————————— */
/* BUTTON SET */
/* —————————————— */
--button-set-column-gap-mobile: 8px;
--button-set-row-gap-mobile: 8px;
--button-set-column-gap-desktop: 8px;
--button-set-row-gap-desktop: 8px;
/* —————————— */
/* LAYOUT */
/* —————————— */
--layout-columns-align-items: stretch;
--layout-columns-justify-content: flex-start;
--layout-flexible-align-items: stretch;
--layout-flexible-justify-content: flex-start;
--layout-scrollable-col-size: 90%;
--layout-default-column-gap-desktop: 64px;
--layout-default-row-gap-desktop: 64px;
--layout-default-column-gap-mobile: 48px;
--layout-default-row-gap-mobile: 48px;
--layout-cards-column-gap-mobile: 32px;
--layout-cards-row-gap-mobile: 64px;
--layout-cards-column-gap-desktop: 32px;
--layout-cards-row-gap-desktop: 64px;
--layout-tiles-column-gap-mobile: 8px;
--layout-tiles-row-gap-mobile: 8px;
--layout-tiles-column-gap-desktop: 8px;
--layout-tiles-row-gap-desktop: 8px;
--layout-mixed-column-gap-mobile: var(--layout-tiles-column-gap-mobile);
--layout-mixed-row-gap-mobile: var(--layout-tiles-row-gap-mobile);
--layout-mixed-column-gap-desktop: var(--layout-tiles-column-gap-desktop);
--layout-mixed-row-gap-desktop: var(--layout-tiles-row-gap-desktop);
--layout-quotes-full-column-gap-mobile: var(--layout-cards-column-gap-mobile);
--layout-quotes-full-row-gap-mobile: var(--layout-cards-row-gap-mobile);
--layout-quotes-full-column-gap-desktop: var(--layout-cards-column-gap-desktop);
--layout-quotes-full-row-gap-desktop: var(--layout-cards-row-gap-desktop);
--layout-quotes-card-column-gap-mobile: var(--layout-tiles-column-gap-mobile);
--layout-quotes-card-row-gap-mobile: var(--layout-tiles-row-gap-mobile);
--layout-quotes-card-column-gap-desktop: var(--layout-tiles-column-gap-desktop);
--layout-quotes-card-row-gap-desktop: var(--layout-tiles-row-gap-desktop);
--layout-text-blocks-column-gap-mobile: var(--layout-cards-column-gap-mobile);
--layout-text-blocks-row-gap-mobile: var(--layout-cards-row-gap-mobile);
--layout-text-blocks-column-gap-desktop: var(--layout-cards-column-gap-desktop);
--layout-text-blocks-row-gap-desktop: var(--layout-cards-row-gap-desktop);
/* ——————————— */
/* GALLERY */
/* ——————————— */
--gallery-column-gap-mobile: 8px;
--gallery-row-gap-mobile: 9px;
--gallery-column-gap-desktop: 8px;
--gallery-row-gap-desktop: 9px;
/* Gallery collage */
--gallery-collage-group-2-columns-mobile: 2fr;
--gallery-collage-group-2-columns-tablet: 1fr 1fr;
--gallery-collage-group-2-columns-desktop: 1fr 1fr;
--gallery-collage-group-2-columns-wide: 1fr 1fr;
--gallery-collage-group-3-columns-mobile: 2fr;
--gallery-collage-group-3-columns-tablet: 1fr 1fr 1fr;
--gallery-collage-group-3-columns-desktop: 1fr 1fr 1fr;
--gallery-collage-group-3-columns-wide: 1fr 1fr 1fr;
--gallery-collage-group-4-columns-mobile: 2fr;
--gallery-collage-group-4-columns-tablet: 1fr 1fr 1fr 1fr;
--gallery-collage-group-4-columns-desktop: 1fr 1fr 1fr 1fr;
--gallery-collage-group-4-columns-wide: 1fr 1fr 1fr 1fr;
--gallery-collage-group-5-columns-mobile: 2fr;
--gallery-collage-group-5-columns-tablet: 1fr 1fr 1fr 1fr 1fr;
--gallery-collage-group-5-columns-desktop: 1fr 1fr 1fr 1fr 1fr;
--gallery-collage-group-5-columns-wide: 1fr 1fr 1fr 1fr 1fr;
--gallery-collage-group-6-columns-mobile: 2fr;
--gallery-collage-group-6-columns-tablet: 1fr 1fr 1fr 1fr 1fr 1fr;
--gallery-collage-group-6-columns-desktop: 1fr 1fr 1fr 1fr 1fr 1fr;
--gallery-collage-group-6-columns-wide: 1fr 1fr 1fr 1fr 1fr 1fr;
/* ———————— */
/* GRID */
/* ———————— */
--grid-scrollable-col-size: 90%;
--grid-column-gap-mobile: var(--layout-mixed-column-gap-mobile);
--grid-row-gap-mobile: var(--layout-mixed-row-gap-mobile);
--grid-column-gap-desktop: var(--layout-mixed-column-gap-desktop);
--grid-row-gap-desktop: var(--layout-mixed-row-gap-desktop);
/* ———————————————— */
/* HERO SECTION */
/* ———————————————— */
--hero-section-padding: 0;
--hero-section-column-gap-mobile: 8px;
--hero-section-row-gap-mobile: 8px;
--hero-section-column-gap-desktop: var(--hero-section-column-gap-mobile);
--hero-section-row-gap-desktop: var(--hero-section-row-gap-mobile);
/* ———————————— */
/* SIGNPOST */
/* ———————————— */
--signpost-column-gap-mobile: 8px;
--signpost-row-gap-mobile: 8px;
--signpost-column-gap-desktop: 8px;
--signpost-row-gap-desktop: 8px;
/* ———————————— */
/* SUB-MENU */
/* ———————————— */
--sub-menu-background: var(--color-white);
--sub-menu-border: solid 1px var(--color-neutral-200);
--sub-menu-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04);
--sub-menu-border-radius: var(--box-border-radius);
--sub-menu-padding: 48px;
--sub-menu-max-width: 1024px;
--sub-menu-margin: 0 auto;
--sub-menu-item-padding: 12px;
--sub-menu-column-gap: 24px;
--sub-menu-row-gap: 24px;
--sub-menu-min-column-size: 250px;
--sub-menu-max-column-count: 3;
--sub-menu-signpost-item-background: transparent;
--sub-menu-signpost-item-foreground: inherit;
--sub-menu-signpost-item-border: none;
--sub-menu-signpost-item-border-radius: 8px;
--sub-menu-signpost-item-box-shadow: none;
--sub-menu-signpost-item-p-margin-bottom: 12px;
--sub-menu-signpost-item-background-hover: var(--color-brand-light);
--sub-menu-signpost-item-foreground-hover: inherit;
--sub-menu-signpost-item-hover-border: none;
--sub-menu-signpost-item-hover-box-shadow: none;
--sub-menu-signpost-item-background-active: var(--sub-menu-signpost-item-background-hover);
--sub-menu-signpost-item-foreground-active: var(--sub-menu-signpost-item-foreground);
--sub-menu-signpost-item-active-border: none;
--sub-menu-signpost-item-active-box-shadow: none;
/* —————————————— */
/* ICON LABEL */
/* —————————————— */
--icon-label-text-color: var(--text-color);
--icon-label-icon-color: var(--icon-label-text-color);
--icon-label-gap: var(--spacing-3x-small);
/* ————————— */
/* MODAL */
/* ————————— */
--modal-padding: 24px;
--modal-background: #FFF;
--modal-foreground: var(--text-color);
--modal-border-radius: 12px;
--modal-border: none;
--modal-box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
--modal-width: 720px;
--modal-height: auto;
--modal-header-background: var(--modal-background);
--modal-header-foreground: var(--modal-foreground);
--modal-header-border: none;
--modal-header-padding: 0 0 24px 0;
--modal-header-justify-content: space-between;
--modal-body-background: var(--modal-background);
--modal-body-foreground: var(--modal-foreground);
--modal-body-padding: 0;
--modal-body-overflow: auto;
--modal-footer-background: var(--modal-background);
--modal-footer-foreground: var(--modal-foreground);
--modal-footer-border: none;
--modal-footer-padding: 32px 0 0 0;
--modal-footer-justify-content: flex-end;
/* ————————— */
/* TABLE */
/* ————————— */
--table-background: transparent;
--table-foreground: var(--text-color, inherit);
--table-box-shadow: none;
--table-border: 1px solid #D5D9EB;
--table-border-radius: 12px;
--table-spacing: 0;
--table-caption-text-align: left;
--table-cell-padding: 16px 24px;
--table-cell-text-align: left;
--table-cell-vertical-align: middle;
--table-font-family: var(--font-family-sans, sans-serif);
--table-font-size: 1rem;
--table-font-weight: normal;
--table-line-height: 1.5;
--table-row-hover-background: #F8F9FC;
--table-row-hover-foreground: #181D27;
--table-header-background: #F8F9FC;
--table-header-foreground: #717680;
--table-header-font-family: var(--table-font-family);
--table-header-font-size: 12px;
--table-header-font-weight: 600;
--table-header-line-height: 18px;
--table-header-horizontal-separator: var(--table-border);
--table-header-vertical-separator: none;
--table-body-background: transparent;
--table-body-foreground: #535862;
--table-body-font-family: var(--table-font-family);
--table-body-font-size: 14px;
--table-body-font-weight: 400;
--table-body-line-height: 20px;
--table-body-horizontal-separator: var(--table-border);
--table-body-vertical-separator: none;
--table-footer-background: transparent;
--table-footer-foreground: #414651;
--table-footer-font-family: var(--table-font-family);
--table-footer-font-size: 14px;
--table-footer-font-weight: 400;
--table-footer-line-height: 20px;
--table-footer-horizontal-separator: var(--table-header-horizontal-separator);
--table-footer-vertical-separator: var(--table-header-vertical-separator);
/* ————————————— */
/* TILES */
/* ————————————— */
--tile-border-width: 1px;
--tile-border-style: solid;
--tile-border-radius: 12px;
--tile-box-shadow: none;
--tile-image-light-gradient-color-transparent: rgba(255, 255, 255, 0);
--tile-image-light-gradient-color-solid: rgba(255, 255, 255, 0.75);
--tile-image-dark-gradient-color-transparent: rgba(0, 0, 0, 0);
--tile-image-dark-gradient-color-solid: rgba(0, 0, 0, 0.75);
--tile-padding-mobile: 20px;
--tile-gap-mobile: 24px;
--tile-padding-desktop: 40px;
--tile-gap-desktop: 24px;
/* ————————— */
/* EVENT */
/* ————————— */
--event-background: transparent;
--event-background-hover: var(--event-background);
--event-foreground: inherit;
--event-foreground-hover: inherit;
--event-border: none;
--event-shadow: none;
--event-shadow-hover: none;
--event-padding-mobile: 0;
--event-padding-tablet: 0;
--event-padding-desktop: 0;
--event-border-radius-mobile: 0;
--event-border-radius-tablet: 0;
--event-border-radius-desktop: 0;
--event-gap-mobile: 24px;
--event-gap-tablet: 24px;
--event-gap-desktop: 32px;
--event-grid-areas-mobile: "image" "dates" "headline" "tags" "body" "buttons";
--event-grid-areas-tablet:
"image dates"
"image headline"
"image tags"
"image body"
"image buttons"
"image ."
;
--event-grid-areas-desktop:
"dates image headline"
"dates image tags"
"dates image body"
"dates image buttons"
". image ."
;
--event-grid-columns-mobile: 1fr;
--event-grid-columns-tablet: 1fr 2fr;
--event-grid-columns-desktop: 257px 398px auto;
--event-grid-rows-mobile: auto;
--event-grid-rows-tablet: auto;
--event-grid-rows-desktop: max-content;
/* Spacing – mobile */
--event-dates-top-spacing-mobile: 24px;
--event-tags-top-spacing-mobile: 12px;
--event-headline-top-spacing-mobile: 24px;
--event-body-top-spacing-mobile: 12px;
--event-image-top-spacing-mobile: 0;
--event-buttons-top-spacing-mobile: 24px;
/* Spacing – tablet */
--event-dates-top-spacing-tablet: 0;
--event-tags-top-spacing-tablet: 24px;
--event-headline-top-spacing-tablet: 24px;
--event-body-top-spacing-tablet: 24px;
--event-image-top-spacing-tablet: 0;
--event-buttons-top-spacing-tablet: 24px;
/* Spacing – desktop */
--event-dates-top-spacing-desktop: 0;
--event-tags-top-spacing-desktop: 24px;
--event-headline-top-spacing-desktop: 0;
--event-body-top-spacing-desktop: 24px;
--event-image-top-spacing-desktop: 0;
--event-buttons-top-spacing-desktop: 24px;
/* Padding */
--event-dates-padding: 0;
--event-tags-padding: 0;
--event-headline-padding: 0;
--event-body-padding: 0;
--event-image-padding: 0;
--event-image-aspect-ratio: 3/2;
--event-buttons-padding: 0;
--event-buttons-gap: 0;
/* —————————————— */
/* NAVIGATION */
/* —————————————— */
--navigation-gap: 12px;
/* ————————————————————— */
/* NAVIGATION MOBILE */
/* ————————————————————— */
--navigation-mobile-background: #fff;
--navigation-mobile-padding: 16px;
--navigation-mobile-gap: 4px;
--navigation-mobile-header-gap: 4px;
--navigation-mobile-header-padding: 0;
--navigation-mobile-footer-gap: 4px;
--navigation-mobile-footer-padding: 0;
--navigation-mobile-menu-padding: 0;
--navigation-mobile-menu-gap: 4px;
--navigation-mobile-submenu-padding: 4px 0;
--navigation-mobile-submenu-gap: 4px;
--navigation-mobile-submenu-button-background: var(--color-brand-25);
--navigation-mobile-submenu-margin: 0;
--navigation-mobile-submenuitem-margin-left: 20px;
/* —————————— */
/* FOOTER */
/* —————————— */
--site-footer-background: #F5F5F5;
--site-footer-foreground: inherit;
--site-footer-border: none;
--site-footer-border-radius: 0;
--site-footer-box-shadow: none;
--site-footer-gap-mobile: 64px 32px;
--site-footer-gap-tablet: 64px 32px;
--site-footer-gap-desktop: 64px 32px;
--site-footer-container-gap-mobile: 32px 32px;
--site-footer-container-gap-tablet: 48px 32px;
--site-footer-container-gap-desktop: 48px 32px;
--site-footer-logo-height: 24px;
--site-footer-logo-width: auto;
--site-footer-logo-color: inherit;
--site-footer-padding-mobile: 48px;
--site-footer-padding-tablet: 48px;
--site-footer-padding-desktop: 48px;
--site-footer-slot-1-flex: 0 1 240px;
--site-footer-slot-1-justify-content: flex-start;
--site-footer-slot-2-flex: 0 1 240px;
--site-footer-slot-2-justify-content: flex-start;
--site-footer-slot-3-flex: 0 1 240px;
--site-footer-slot-3-justify-content: flex-start;
--site-footer-slot-4-flex: 0 1 240px;
--site-footer-slot-4-justify-content: flex-start;
--site-footer-slot-5-flex: 0 1 240px;
--site-footer-slot-5-justify-content: flex-start;
/* ——————————————————— */
/* SITE NAVIGATION */
/* ——————————————————— */
--site-navigation-height-mobile: 80px;
--site-navigation-height-desktop: 80px;
--site-navigation-padding-mobile: 0;
--site-navigation-padding-desktop: 0;
--site-navigation-background: transparent;
--site-navigation-border-style: none;
--site-navigation-border-width: 0 0 0 0;
--site-navigation-border-color: transparent;
--site-navigation-border-radius: 0;
--site-navigation-box-shadow: none;
--site-navigation-justify-content: space-between;
--site-navigation-container-gap: 24px;
--site-navigation-slot-1-flex: 0 0 auto;
--site-navigation-slot-1-justify-content: flex-start;
--site-navigation-slot-2-flex: 0 1 auto;
--site-navigation-slot-2-justify-content: center;
--site-navigation-slot-3-flex: 0 0 auto;
--site-navigation-slot-3-justify-content: center;
--site-navigation-slot-4-flex: 0 0 auto;
--site-navigation-slot-4-justify-content: flex-end;
/* —————————— */
/* PAGING */
/* —————————— */
--paging-column-gap: 0;
--paging-background: transparent;
--paging-foreground: inherit;
--paging-border: 1px solid #B3B8DB;
--paging-padding: 0;
--paging-button-background: transparent;
--paging-button-foreground: inherit;
--paging-button-width: 40px;
--paging-button-border-separator: 1px solid #B3B8DB;
--paging-button-background-hover: #F8F9FC;
--paging-button-foreground-hover: inherit;
--paging-button-background-active: var(--paging-button-background-hover);
--paging-button-foreground-active: var(--paging-button-foreground-hover);
--paging-margin: 24px auto 0 auto;
/* ————————————— */
/* PAGING DOTS */
/* ————————————— */
--paging-dots-column-gap: var(--spacing-md, 7px);
--paging-dot-width: 8px;
--paging-dots-padding: 0;
--paging-dots-radius: 0;
--paging-dots-border: none;
--paging-dots-background: inherit;
--paging-dots-box-shadow: none;
--paging-dot-height: 8px;
--paging-dot-background: rgba(0, 0, 0, 0.20);
--paging-dot-background-active: rgba(0, 0, 0, 0.90);
--paging-dot-width-active: 24px;
/* ——————————————— */
/* PAGING ARROWS */
/* ——————————————— */
--paging-arrows-column-gap: 16px;
--paging-arrows-padding: 0;
--paging-arrows-radius: 0;
--paging-arrows-border: none;
--paging-arrows-background: inherit;
--paging-arrows-counter-color: gray;
--paging-arrows-box-shadow: none;
--paging-arrows-button-background: transparent;
--paging-arrows-button-foreground: inherit;
--paging-arrows-button-border: none;
--paging-arrows-button-background-hover: rgba(0, 0, 0, 0.05);
--paging-arrows-button-foreground-hover: inherit;
--paging-arrows-button-border-hover: none;
--paging-arrows-button-background-active: rgba(0, 0, 0, 0.1);
--paging-arrows-button-foreground-active: inherit;
--paging-arrows-button-border-active: none;
--paging-arrows-button-background-disabled: transparent;
--paging-arrows-button-foreground-disabled: rgba(0, 0, 0, 0.3);
--paging-arrows-button-border-disabled: none;
/* ———————————————— */
/* BUTTON GROUP */
/* ———————————————— */
--button-group-vertical-link-justify-content: space-between;
--button-group-width: max-content;
/* Skupina - default */
--button-group-default-padding: 0;
--button-group-default-background: transparent;
--button-group-default-foreground: #181D27;
--button-group-default-border: 1px solid #181D27;
--button-group-default-border-radius: 8px;
--button-group-default-shadow: none;
--button-group-horizontal-default-separator: solid 1px #181D27;
--button-group-vertical-default-separator: none;
--button-group-default-gap: 0;
/* Tlačítka - default */
--button-group-default-button-background: inherit;
--button-group-default-button-foreground: inherit;
--button-group-default-button-border: none;
--button-group-default-button-border-radius: 0;
--button-group-default-button-background-hover: #0A0D12;
--button-group-default-button-foreground-hover: #FFFFFF;
--button-group-default-button-border-hover: inherit;
--button-group-default-button-border-radius-hover: 0;
--button-group-default-button-background-active: #0A0D12;
--button-group-default-button-foreground-active: #FFFFFF;
--button-group-default-button-border-active: inherit;
--button-group-default-button-border-radius-active: 0;
/* Skupina - alt-a */
--button-group-alt-a-padding: 0;
--button-group-alt-a-background: transparent;
--button-group-alt-a-foreground: #181D27;
--button-group-alt-a-border: 1px solid #B3B8DB;
--button-group-alt-a-border-radius: 8px;
--button-group-alt-a-shadow: none;
--button-group-horizontal-alt-a-separator: solid 1px #B3B8DB;
--button-group-vertical-alt-a-separator: none;
--button-group-alt-a-gap: 0;
/* Tlačítka - alt-a */
--button-group-alt-a-button-background: #fff;
--button-group-alt-a-button-foreground: #252B37;
--button-group-alt-a-button-border: none;
--button-group-alt-a-button-border-radius: 0;
--button-group-alt-a-button-background-hover: #F8F9FC;
--button-group-alt-a-button-foreground-hover: inherit;
--button-group-alt-a-button-border-hover: inherit;
--button-group-alt-a-button-border-radius-hover: inherit;
--button-group-alt-a-button-background-active: #F8F9FC;
--button-group-alt-a-button-foreground-active: inherit;
--button-group-alt-a-button-border-active: inherit;
--button-group-alt-a-button-border-radius-active: inherit;
/* Skupina - alt-b */
--button-group-alt-b-padding: 4px;
--button-group-alt-b-background: #F8F9FC;
--button-group-alt-b-foreground: #181D27;
--button-group-alt-b-border: 1px solid #D5D9EB;
--button-group-alt-b-border-radius: 10px;
--button-group-alt-b-shadow: none;
--button-group-horizontal-alt-b-separator: none;
--button-group-vertical-alt-b-separator: none;
--button-group-alt-b-gap: 4px;
/* Tlačítka - alt-b */
--button-group-alt-b-button-background: transparent;
--button-group-alt-b-button-foreground: #717680;
--button-group-alt-b-button-border: solid 1px transparent;
--button-group-alt-b-button-border-radius: 10px;
--button-group-alt-b-button-background-hover: #fff;
--button-group-alt-b-button-foreground-hover: #414651;
--button-group-alt-b-button-border-hover: solid 1px #D5D9EB;
--button-group-alt-b-button-border-radius-hover: inherit;
--button-group-alt-b-button-background-active: #fff;
--button-group-alt-b-button-foreground-active: #414651;
--button-group-alt-b-button-border-active: solid 1px #D5D9EB;
--button-group-alt-b-button-border-radius-active: inherit;
/* Skupina - alt-c */
--button-group-alt-c-padding: 0;
--button-group-alt-c-background: transparent;
--button-group-alt-c-foreground: #181D27;
--button-group-alt-c-border: none;
--button-group-alt-c-border-radius: 0;
--button-group-alt-c-shadow: none;
--button-group-horizontal-alt-c-separator: none;
--button-group-vertical-alt-c-separator: none;
--button-group-alt-c-gap: 8px;
/* Tlačítka - alt-c */
--button-group-alt-c-button-background: transparent;
--button-group-alt-c-button-foreground: var(--text-color);
--button-group-alt-c-button-border: solid 1px #D5D9EB;
--button-group-alt-c-button-border-radius: 8px;
--button-group-alt-c-button-background-hover: #F8F9FC;
--button-group-alt-c-button-foreground-hover: inherit;
--button-group-alt-c-button-border-hover: inherit;
--button-group-alt-c-button-border-radius-hover: inherit;
--button-group-alt-c-button-background-active: #222425;
--button-group-alt-c-button-foreground-active: #fff;
--button-group-alt-c-button-border-active: inherit;
--button-group-alt-c-button-border-radius-active: inherit;
/* Skupina - alt-d */
--button-group-alt-d-padding: 0;
--button-group-alt-d-background: inherit;
--button-group-alt-d-foreground: inherit;
--button-group-alt-d-border: inherit;
--button-group-alt-d-border-radius: inherit;
--button-group-alt-d-shadow: inherit;
--button-group-horizontal-alt-d-separator: inherit;
--button-group-vertical-alt-d-separator: inherit;
--button-group-alt-d-gap: 8px;
/* Tlačítka - alt-d */
--button-group-alt-d-button-background: inherit;
--button-group-alt-d-button-foreground: var(--text-color);
--button-group-alt-d-button-border: inherit;
--button-group-alt-d-button-border-radius: inherit;
--button-group-alt-d-button-background-hover: inherit;
--button-group-alt-d-button-foreground-hover: inherit;
--button-group-alt-d-button-border-hover: inherit;
--button-group-alt-d-button-border-radius-hover: inherit;
--button-group-alt-d-button-background-active: inherit;
--button-group-alt-d-button-foreground-active: inherit;
--button-group-alt-d-button-border-active: inherit;
--button-group-alt-d-button-border-radius-active: inherit;
/* ———————————— */
/* DROPDOWN */
/* ———————————— */
--dropdown-item-gap: 8px;
--dropdown-item-border-radius: 0;
--dropdown-item-padding: 9px 14px;
--dropdown-item-background: white;
--dropdown-item-foreground: inherit;
--dropdown-item-height: auto;
--dropdown-item-min-height: 40px;
--dropdown-item-delimeter: solid 1px #E9EAEB;
--dropdown-item-background-hover: #F8F9FC;
--dropdown-item-foreground-hover: inherit;
--dropdown-item-prefix-color-hover: var(--color-brand-800);
--dropdown-item-suffix-color-hover: var(--color-brand-800);
--dropdown-item-background-selected: #F8F9FC;
--dropdown-item-foreground-selected: inherit;
--dropdown-item-prefix-color-selected: var(--color-brand-600);
--dropdown-item-suffix-color-selected: var(--color-brand-600);
--dropdown-item-background-disabled: transparent;
--dropdown-item-foreground-disabled: #717680;
--dropdown-item-prefix-color-disabled: #A4A7AE;
--dropdown-item-suffix-color-disabled: #A4A7AE;
--dropdown-item-prefix-color: inherit;
--dropdown-item-suffix-color: inherit;
/* ————————————————— */
/* DROPDOWN LIST */
/* ————————————————— */
--dropdown-list-row-gap: 4px;
--dropdown-list-top-position: 80%;
--dropdown-list-width: 100%;
--dropdown-list-max-height: 240px;
--dropdown-list-min-width: 200px;
--dropdown-list-background: white;
--dropdown-list-border: solid 1px rgba(0, 0, 0, 0.12);
--dropdown-list-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
--dropdown-list-border-radius: 8px;
--dropdown-list-padding: 0;
--dropdown-list-all-results-padding: 8px;
--dropdown-list-all-results-background: white;
--dropdown-list-all-results-delimeter: solid 1px #E9EAEB;
/* ——————————————— */
/* PRODUCT SET */
/* ——————————————— */
--product-set-column-gap: 8px;
--product-set-row-gap: 8px;
--product-set-card-image-padding: 24px 24px 0 24px;
--product-set-card-image-border-radius: 8px;
/* ——————————————— */
/* VIDEO EMBED */
/* ——————————————— */
--video-embed-border-radius: var(--image-border-radius);
/* ———————— */
/* CHAT */
/* ———————— */
/* Chat container */
--chat-gap: 12px;
--chat-padding: 0;
--chat-background: inherit;
--chat-border: none;
--chat-border-radius: inherit;
--chat-box-shadow: none;
--chat-max-width: var(--max-content-width);
/* Chat message layout */
--chat-column-gap: 12px;
--chat-row-gap: 8px;
/* Chat bubble default */
--chat-bubble-margin: 0;
--chat-bubble-padding: 16px;
--chat-bubble-border-radius: 0 16px 16px 16px;
--chat-bubble-box-shadow: none;
--chat-bubble-border: none;
--chat-bubble-background: inherit;
--chat-bubble-foreground: var(--text-color);
/* Chat bubble odd */
--chat-bubble-odd-margin: inherit;
--chat-bubble-odd-padding: var(--chat-bubble-padding);
--chat-bubble-odd-border-radius: var(--chat-bubble-border-radius);
--chat-bubble-odd-box-shadow: none;
--chat-bubble-odd-border: solid 1px #eaecf0;
--chat-bubble-odd-background: #f2f4f7;
--chat-bubble-odd-foreground: inherit;
/* Chat bubble even */
--chat-bubble-even-margin: inherit;
--chat-bubble-even-padding: var(--chat-bubble-padding);
--chat-bubble-even-border-radius: var(--chat-bubble-border-radius);
--chat-bubble-even-box-shadow: none;
--chat-bubble-even-border: solid 1px #d6e8ff;
--chat-bubble-even-background: #ebf3ff;
--chat-bubble-even-foreground: inherit;
/* —————————— */
/* SLIDER */
/* —————————— */
--slider-gap: 40px;
--slider-padding: 0;
--slider-slide-padding: 0;
--slider-slide-gap: 40px;
/* ——————————————— */
/* BENTO BOXES */
/* ——————————————— */
--bento-boxes-column-gap: 8px;
--bento-boxes-row-gap: 8px;
/* —————————————————— */
/* COOKIES BANNER */
/* —————————————————— */
--cookies-banner-background: #fff;
--cookies-banner-foreground: #222;
--cookies-banner-padding: 32px 32px;
--cookies-banner-border: 1px solid #e0e0e0;
--cookies-banner-border-radius: 8px;
--cookies-banner-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--cookies-banner-width: 1440px;
--cookies-banner-gap: 24px;
/* —————————————— */
/* STATISTICS */
/* —————————————— */
--statistics-stat-gap: 12px;
--statistics-stat-label-gap: 4px;
--statistics-value-color: inherit;
--statistics-label-color: inherit;
--statistics-description-color: inherit;
--statistics-black-value-color: var(--color-brand-600);
--statistics-black-label-color: var(--statistics-label-color);
--statistics-black-description-color: var(--statistics-description-color);
--statistics-white-value-color: var(--color-white);
--statistics-white-label-color: var(--color-white);
--statistics-white-description-color: var(--color-white);
/* —————— */
/* BANNER */
/* —————— */
--banner-border-radius: var(--image-border-radius);
/* ——————————— */
/* STAR RATING */
/* ——————————— */
--star-size: 20px;
/* ———————————————— */
/* ANNOUNCEMENT */
/* ———————————————— */
--announcement-padding-block: 16px;
--announcement-padding-inline: 24px;
--announcement-margin: 0 auto 24px auto;
--announcement-background: transparent;
--announcement-foreground: var(--text-color, #000);
--announcement-border: none;
--announcement-border-radius: 16px;
--announcement-box-shadow: none;
--announcement-column-gap: 16px;
--announcement-row-gap: 16px;
--announcement-default-background: #f6f6f6;
--announcement-default-foreground: var(--announcement-foreground);
--announcement-default-border: none;
--announcement-default-box-shadow: none;
--announcement-success-background: #ecfdf3;
--announcement-success-foreground: darkgreen;
--announcement-success-border: none;
--announcement-success-box-shadow: none;
--announcement-warning-background: #fffaeb;
--announcement-warning-foreground: rgb(180, 99, 1);
--announcement-warning-border: none;
--announcement-warning-box-shadow: none;
--announcement-danger-background: #fef3f2;
--announcement-danger-foreground: darkred;
--announcement-danger-border: none;
--announcement-danger-box-shadow: none;
/* ——————————————————— */
/* VIDEO COMPONENT */
/* ——————————————————— */
--video-component-gap: 24px;
/* ———————————–— */
/* BLOG POST */
/* ———————————–— */
--post-background: honeydew;
--post-foreground: inherit;
--post-border: solid 1px #D6E8FF;
--post-border-radius: 8px;
--post-shadow: none;
--post-padding: 0;
--post-header-padding: 24px;
--post-header-gap: 8px;
--post-body-padding: 0;
--post-body-gap: 8px;
--post-footer-padding: 24px;
--post-footer-gap: 8px;
--post-controls-gap: 16px;
--post-image-border-radius: 0;
/* ———————————— */
/* LIGHTBOX */
/* ———————————— */
--lightbox-background: rgba(0, 0, 0, 0.8);
--lightbox-foreground: #fff;
--lightbox-content-padding-inline: 4rem;
--lightbox-content-size: 100%;
--lightbox-content-gap: 32px;
--lightbox-caption-width: 320px;
--lightbox-caption-color: #ccc;
--lightbox-thumbnails-margin-top: 24px;
--lightbox-thumbnails-gap: 16px;
--lightbox-thumbnails-height: 48px;
--lightbox-thumbnail-aspect-ratio: 1/1;
--lightbox-padding-desktop-top: 64px;
--lightbox-padding-desktop-bottom: 64px;
--lightbox-padding-desktop-right: 64px;
--lightbox-padding-desktop-left: 64px;
--lightbox-padding-mobile-top: 64px;
--lightbox-padding-mobile-bottom: 16px;
--lightbox-padding-mobile-right: 16px;
--lightbox-padding-mobile-left: 16px;
--bottom-caption-height: 96px;
/* Paging colors */
--lightbox-paging-dot-color: rgba(255, 255, 255, 0.25);
--lightbox-paging-dot-active-color: #ffffff;
--lightbox-paging-arrows-counter-color: gray;
--lightbox-paging-arrows-button-background: transparent;
--lightbox-paging-arrows-button-foreground: gray;
--lightbox-paging-arrows-button-border: none;
--lightbox-paging-arrows-button-background-hover: rgba(255, 255, 255, 0.05);
--lightbox-paging-arrows-button-foreground-hover: white;
--lightbox-paging-arrows-button-border-hover: none;
/* Perspectivo’s Lit components */
--switch-font-family: var(--font-family-sans);
--switch-foreground: var(--text-color);
--switch-background: #e0e0e0;
--switch-background-checked: #4caf50;
}
/* ———————————— */
/* CUSTOM */
/* ———————————— */
.layout--signpost {
height: 100%;
}
.layout--signpost > * {
min-height: 100%;
}
.layout--signpost > .grid-column {
height: auto;
align-self: stretch;
}
.layout--signpost .tile .tile__wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.layout--signpost .tile .tile__body {
align-self: start;
}
.layout--signpost .tile .tile__icon {
--foreground: var(--color-brand-600);
align-self: end;
}
.layout--signpost .tile .tile__icon #arrow {
--foreground: var(--color-fg-white);
}
.layout--signpost .tile:hover {
--background: var(--color-brand-solid);
--foreground: var(--color-fg-white);
transition: background 0.3s ease, color 0.3s ease;
}
.layout--signpost .tile:hover .tile__icon {
--foreground: var(--color-white);
}
.layout--signpost .tile:hover .tile__icon #arrow {
--foreground: var(--color-brand-600);
}
.section-main-navigation {
--section-padding-inline-mobile: 16px;
--section-padding-inline-desktop: 32px;
}
main > .background-layer > img {
width: auto;
height: auto;
right: 0;
left: auto;
@media screen and (max-width: 1279px) {
right: auto;
left: -20%;
}
}
.box.form {
--shadow: 0 8px 54.5px -1px rgba(203, 56, 20, 0.22);
}
@media screen and (min-width: 768px) {
.box.form {
max-width: 480px;
}
}