/** Theme Name: Perennial Power Child Author: Atvise - Next Level E-Commerce Author URI: https://www.atvise.nl Description: This theme is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. This theme is fast, fully customizable and beautiful theme! Version: 1.0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: perennial-power-child Template: astra */ /* Variable Weight Fix */ /* ------------------------------------- Satoshi & Bevellier Variable Font (auto-maps font-weight 100–900 to wght axis) ------------------------------------- */ @font-face { font-family: "Satoshi"; src: url("/wp-content/uploads/2025/10/Satoshi-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Bevellier"; src: url("/wp-content/uploads/2025/10/Bevellier-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Apply to Global Kit Styles */ /*****************/ /* Inhoudsopgave */ /*****************/ /* 000 | Globale CSS ------------------------------- 010 | Header | 010.01 | Logo 020 | Fonts | 020.01 | Presets & Skins | Mapping 050 | WooCommerce | 050.01 | Products */ /* 000 | Globale CSS */ .ast-title-bar-wrap { background-size: auto; background-position: top left; } .ast-title-bar-wrap h1 { color: #fff !important; } .bdt-fancy-slider-title { position: absolute; margin-top: -3.1em !important; max-width: 70%; } .bdt-fancy-slider-description { padding-top: 26px !important; } .bdt-fancy-slider .swiper-wrapper .bdt-fancy-slider-item .bdt-slide-image { width: 100% !important; } ..uael-imgicon-wrap { height: 420px !important; overflow: hidden; } .count { display: none; } .nofollow { color: #444; } .elementor-widget-theme-post-content :not(h1, h2, h3, h4, h5, h6) a { color: #0FA636 !important; } .elementor-widget-theme-post-content a:hover { color: #61CE70 !important; } .uael-post-grid ul.slick-dots li button:before { font-family: 'Font Awesome 5 Pro' !important; } .archive.post-type-archive h1.ast-advanced-headers-title { font-size: 0px; } .archive.post-type-archive h1.ast-advanced-headers-title>span { font-size: 24px; font-weight: 800; text-transform: uppercase; line-height: 1.1em; } /* 010 | Header */ /* | 010.01 | Logo */ .ast-site-identity { display: inline-block !important; } span.site-logo-img { display: inline-block; padding: 0 !important; } .ast-site-title-wrap { display: inline-block; float: left; padding: 10px 10px 10px 0px; } .site-header .site-description { text-align: right; } /* 020 | Fonts | 020.01 | Presets & Skins | Mapping */ /* Root HTML */ html, body { font-size: 16px; } /* Containers, Scales & Radii */ :root { /* Containers */ --main-container-px: 1rem; --boxed-container: 1280px; --narrow-container: 960px; --extra-narrow-container: 736px; /* Text Scales */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --text-8xl: 6rem; --text-9xl: 8rem; /* Relative Leading & (Letter) Spacing */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.8; --text-optical-tight: -0.0325em; --text-spacing-relaxed: 0.14em; --text-spacing-loose: 0.16em; --text-spacing-none: 0; /* Radii */ --rounded-none: 0px; --rounded-sm: 0.125rem; --rounded: 0.25rem; --rounded-md: 0.375rem; --rounded-lg: 0.5rem; --rounded-xl: 0.75rem; --rounded-2xl: 1rem; --rounded-3xl: 1.5rem; --rounded-full: 100%; --rounded-img: var(--rounded-lg); --input-radius: var(--rounded); } @media screen and (min-width: 1920px) { /* breakpoint overrides */ :root { /* Containers */ --main-container-px: 1rem; --boxed-container: 1536px; --narrow-container: 1280px; --extra-narrow-container: 960px; } } :root { --typefaces-display: var(--typefaces-body); --typefaces-body: "Satoshi"; --typefaces-accent: "Bevellier"; --typefaces-btn: var(--typefaces-body); --body-weight: 500; --btn-weight: 700; --btn-leading: var(--leading-normal); --heading-font-weight: 900; --heading-a-font-weight: 400; --heading-font-family: var(--typefaces-display); --heading-margin-bottom: var(--text-base); --heading-transform: none; --heading-leading: 1; --heading-spacing: 0; --heading-h1-font-size: var(--text-5xl); --heading-1--font: var(--heading-font-family); --heading-1--transform: var(--heading-transform); --heading-1--weight: var(--heading-font-weight); --heading-1--leading: var(--heading-leading); --heading-h2-font-size: var(--text-4xl); --heading-2--font: var(--heading-font-family); --heading-2--transform: var(--heading-transform); --heading-2--weight: var(--heading-font-weight); --heading-2--leading: var(--heading-leading); --heading-h3-font-size: var(--text-3xl); --heading-3--font: var(--heading-font-family); --heading-3--transform: var(--heading-transform); --heading-3--weight: var(--heading-font-weight); --heading-3--leading: var(--heading-leading); --heading-h4-font-size: var(--text-2xl); --heading-4--font: var(--heading-font-family); --heading-4--transform: var(--heading-transform); --heading-4--weight: var(--heading-font-weight); --heading-4--leading: var(--heading-leading); --heading-h5-font-size: var(--text-xl); --heading-5--font: var(--heading-font-family); --heading-5--transform: var(--heading-transform); --heading-5--weight: var(--heading-font-weight); --heading-5--leading: var(--heading-leading); --heading-h6-font-size: var(--text-lg); --heading-6--font: var(--heading-font-family); --heading-6--transform: var(--heading-transform); --heading-6--weight: var(--heading-font-weight); --heading-6--leading: var(--heading-leading); --title-pagetitle-font-size: var(--text-8xl); --title-p--font: var(--heading-font-family); --title-p--transform: var(--heading-transform); --title-p--weight: var(--heading-font-weight); --title-p--leading: var(--heading-leading); --title-subtitle-font-size: var(--text-6xl); --title-sub--font: var(--heading-font-family); --title-sub--transform: var(--heading-transform); --title-sub--weight: var(--heading-font-weight); --title-sub--leading: var(--heading-leading); /* Text Presets */ /* Font Sizes */ --text-preset-1--size: var(--text-2xl); --text-preset-2--size: var(--text-xl); --text-preset-3--size: var(--text-lg); --text-preset-4--size: var(--text-base); --text-preset-5--size: var(--text-sm); --text-preset-6--size: var(--text-xs); --text-preset-7--size: 0.6875rem; /* Line-heights */ --text-preset-1--leading: var(--leading-relaxed); --text-preset-2--leading: var(--leading-relaxed); --text-preset-3--leading: var(--leading-relaxed); --text-preset-4--leading: var(--leading-relaxed); --text-preset-5--leading: var(--leading-normal); --text-preset-6--leading: var(--leading-normal); --text-preset-7--leading: var(--leading-normal); /* Letter-spacing */ --text-preset-1--spacing: var(--text-spacing-none); --text-preset-2--spacing: var(--text-spacing-none); --text-preset-3--spacing: var(--text-spacing-none); --text-preset-4--spacing: var(--text-spacing-none); --text-preset-5--spacing: var(--text-spacing-none); --text-preset-6--spacing: var(--text-spacing-none); --text-preset-7--spacing: var(--text-spacing-none); /* Input */ --input-field-font-family: var(--typefaces-body); --input-field-dropdown-font-family: var(--typefaces-body); --input-field-dropdown-font-size: var(--text-base); --input-field-dropdown-font-weight: var(--font-weight-Normal-(or-Regular)); --input-field-font-size: var(--text-base); --input-field-font-weight: var(--font-weight-Normal-(or-Regular)); --input-label-font-family: var(--typefaces-body); --input-label-font-weight: var(--font-weight-Semi-Bold-(or-Demi-Bold)); --input-label-font-size: var(--text-base); --input-hint-text-font-family: var(--typefaces-body); --input-hint-text-font-weight: var(--font-weight-Normal-(or-Regular)); --input-hint-text-font-size: var(--text-xs); --input-field-prefix-font-family: var(--typefaces-body); --input-field-prefix-font-size: var(--text-base); --input-field-prefix-font-weight: 500; } :root { /* mobile-first defaults */ /* Fontfaces and default scales & styles */ --fallback-stack: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --display-font: var(--typefaces-display), var(--fallback-stack); --body-font: var(--typefaces-body), var(--fallback-stack); --accent-font: var(--typefaces-accent), var(--fallback-stack); --btn-font: var(--typefaces-btn), var(--fallback-stack); --heading-1--size: var(--text-4xl); --heading-2--size: var(--text-3xl); --heading-3--size: var(--text-2xl); --heading-4--size: var(--text-xl); --heading-5--size: var(--text-lg); --heading-6--size: var(--text-base); --title-p--size: var(--heading-1--size); --title-sub--size: var(--heading-2--size); --heading-weight: var(--heading-font-weight); --heading-a-weight: var(--heading-a-font-weight); --h-transform: var(--heading-transform); } /* Design System Mapping */ @media screen and (min-width: 1200px) { /* breakpoint overrides */ :root { --heading-1--size: var(--heading-h1-font-size); --heading-2--size: var(--heading-h2-font-size); --heading-3--size: var(--heading-h3-font-size); --heading-4--size: var(--heading-h4-font-size); --heading-5--size: var(--heading-h5-font-size); --heading-6--size: var(--heading-h6-font-size); --title-p--size: var(--title-pagetitle-font-size); --title-sub--size: var(--title-subtitle-font-size); } } /* Skins / Presets */ .t-pretty { text-wrap: pretty; } .t-balance { text-wrap: balance; } .font-display { --_font: var(--display-font); } .font-accent { --_font: var(--accent-font); } /* Heading Skins */ .h-default, .h-default :is(h1, h2, h3, h4, h5, h6, p, div, span) { --_font: var(--display-font); --_weight: var(--heading-weight); text-transform: var(--h-transform); } /* Apply to Theme Headings */ [class*="elementor-kit-"] h1, [class*="elementor-kit-"] h2, [class*="elementor-kit-"] h3, [class*="elementor-kit-"] h4, [class*="elementor-kit-"] h5, [class*="elementor-kit-"] h6, [class*="elementor-kit-"] .entry-content :where(h1, h2, h3, h4, h5, h6), [class*="elementor-kit-"] .site-title, .site-title a { /* --_weight: inherit, var(--heading-weight); */ font-weight: var(--_weight, var(--heading-weight)); } /* End Apply */ .h-accent, .h-accent :is(h1, h2, h3, h4, h5, h6, p, div, span) { --_font: var(--accent-font); --_weight: var(--heading-a-weight); text-transform: var(--h-transform); } /* h1-preset */ .h1-skin, h1 { font: var(--_weight, var(--heading-1--weight)) var(--heading-1--size) / var(--heading-1--leading) var(--_font, var(--heading-1--font)); text-transform: var(--heading-1--transform, var(--h-transform), none); } /* h2-preset */ .h2-skin, h2 { font: var(--_weight, var(--heading-2--weight)) var(--heading-2--size) / var(--heading-2--leading) var(--_font, var(--heading-2--font)); text-transform: var(--heading-2--transform, var(--h-transform), none); } /* h3-preset */ .h3-skin, h3 { font: var(--_weight, var(--heading-3--weight)) var(--heading-3--size) / var(--heading-3--leading) var(--_font, var(--heading-3--font)); text-transform: var(--heading-3--transform, var(--h-transform), none); } /* h4-preset */ .h4-skin, h4 { font: var(--_weight, var(--heading-4--weight)) var(--heading-4--size) / var(--heading-4--leading) var(--_font, var(--heading-4--font)); text-transform: var(--heading-4--transform, var(--h-transform), none); } /* h5-preset */ .h5-skin, h5 { font: var(--_weight, var(--heading-5--weight)) var(--heading-5--size) / var(--heading-5--leading) var(--_font, var(--heading-5--font)); text-transform: var(--heading-5--transform, var(--h-transform), none); } /* h6-preset */ .h6-skin, h6 { font: var(--_weight, var(--heading-6--weight)) var(--heading-6--size) / var(--heading-6--leading) var(--_font, var(--heading-6--font)); text-transform: var(--heading-6--transform, var(--h-transform), none); } /* pagetitle-preset */ .pagetitle-skin { font: var(--_weight, var(--title-p--weight)) var(--title-p--size) / var(--title-p--leading) var(--_font, var(--title-p--font)); text-transform: var(--title-p--transform, var(--h-transform), none); } /* subtitle-preset */ .subtitle-skin { font: var(--_weight, var(--title-sub--weight)) var(--title-sub--size) / var(--title-sub--leading) var(--_font, var(--title-sub--font)); text-transform: var(--title-sub--transform, var(--h-transform), none); } /* Text Presets */ .tp1 { font: var(--body-weight) var(--text-preset-1--size) / var(--text-preset-1--leading) var(--_font, --body-font); text-transform: var(--_transform, none); } .tp2 { font: var(--body-weight) var(--text-preset-2--size) / var(--text-preset-2--leading) var(--_font, --body-font); text-transform: var(--_transform, none); } .tp3 { font: var(--body-weight) var(--text-preset-3--size) / var(--text-preset-3--leading) var(--_font, --body-font); text-transform: var(--_transform, none); } .tp4 { font: var(--body-weight) var(--text-preset-4--size) / var(--text-preset-4--leading) var(--_font, --body-font); text-transform: var(--_transform, none); } .tp5 { font: var(--body-weight) var(--text-preset-5--size) / var(--text-preset-5--leading) var(--_font, --body-font); text-transform: var(--_transform, none); } .tp6 { font: var(--body-weight) var(--text-preset-6--size) / var(--text-preset-6--leading) var(--_font, --body-font); text-transform: var(--_transform, none); } .tp7 { font: var(--body-weight) var(--text-preset-7--size) / var(--text-preset-7--leading) var(--_font, --body-font); text-transform: var(--_transform, none); } /* Primitives & Static UI Tokens */ /* Primitives */ :root { --apple-50: #D1F5D7FF; --apple-100: #AFECB9FF; --apple-200: #8EE29BFF; --apple-300: #6ED77DFF; --apple-400: #4FCB60FF; --apple-500: #3AB54AFF; --apple-600: #31933EFF; --apple-700: #287131FF; --apple-800: #1E5024FF; --apple-900: #133016FF; --dove-gray-50: #FFFFFFFF; --dove-gray-100: #E3E3E3FF; --dove-gray-200: #C6C6C6FF; --dove-gray-300: #AAAAAAFF; --dove-gray-400: #8E8E8EFF; --dove-gray-500: #717171FF; --dove-gray-600: #555555FF; --dove-gray-700: #393939FF; --dove-gray-800: #1C1C1CFF; --dove-gray-900: #000000FF; --purple-iris-50: #7631D6FF; --purple-iris-100: #862BC9FF; --purple-iris-200: #912AB8FF; --purple-iris-300: #9729A7FF; --purple-iris-400: #962792FF; --purple-iris-500: #862574FF; --purple-iris-600: #78235BFF; --purple-iris-700: #6B2245FF; --purple-iris-800: #5D1F33FF; --purple-iris-900: #521C25FF; } /* Static UI Tokens */ :root { /* Text | Primary | Default */ --textColor-primary-default: var(--dove-gray-900); --textColor-primary-lighter: var(--textColor-primary-default); --textColor-primary-darker: var(--textColor-primary-default); /* Text | Primary | Invert */ --textColor-primary-invert-default: var(--dove-gray-50); --textColor-primary-invert-lighter: var(--textColor-primary-invert-default); --textColor-primary-invert-darker: var(--textColor-primary-invert-default); /* Text | Secondary | Default */ --textColor-secondary-default: var(--dove-gray-700); --textColor-secondary-lighter: var(--dove-gray-500); --textColor-secondary-darker: var(--textColor-secondary-default); /* Text | Secondary | Invert */ --textColor-secondary-invert-sec-default: var(--dove-gray-300); --textColor-secondary-invert-sec-lighter: var(--textColor-secondary-invert-sec-default); --textColor-secondary-invert-sec-darker: var(--textColor-secondary-invert-sec-default); /* Text | Accent */ --textColor-accent-default: var(--apple-300); --textColor-accent-lighter: var(--textColor-accent-default); --textColor-accent-darker: var(--apple-500); /* Text | Special */ --textColor-special-default: var(--purple-iris-500); --textColor-special-darker: var(--purple-iris-600); --textColor-special-lighter: var(--purple-iris-300); /* Background | Primary | Default */ --backgroundColor-primary-default: var(--dove-gray-50); --backgroundColor-primary-lighter: var(--backgroundColor-primary-default); --backgroundColor-primary-darker: var(--dove-gray-100); /* Background | Primary | Invert */ --backgroundColor-primary-invert-default: var(--dove-gray-900); --backgroundColor-primary-invert-lighter: var(--dove-gray-800); --backgroundColor-primary-invert-darker: var(--backgroundColor-primary-invert-default); /* Background | Secondary | Default */ --backgroundColor-secondary-default: var(--apple-50); --backgroundColor-secondary-lighter: var(--backgroundColor-secondary-default); --backgroundColor-secondary-darker: var(--apple-100); /* Background | Secondary | Invert */ --backgroundColor-secondary-invert-sec-default: var(--apple-500); --backgroundColor-secondary-invert-sec-lighter: var(--apple-400); --backgroundColor-secondary-invert-sec-darker: var(--apple-600); /* Background | Accent */ --backgroundColor-accent-default: var(--apple-500); --backgroundColor-accent-lighter: var(--apple-400); --backgroundColor-accent-darker: var(--apple-600); /* Background | Special */ --backgroundColor-special-default: var(--purple-iris-500); --backgroundColor-special-lighter: var(--purple-iris-300); --backgroundColor-special-darker: var(--purple-iris-700); /* Border | Primary | Default */ --borderColor-primary-default: var(--backgroundColor-primary-default); --borderColor-primary-lighter: var(--backgroundColor-primary-lighter); --borderColor-primary-darker: var(--backgroundColor-primary-darker); /* Border | Primary | Invert */ --borderColor-primary-invert-default: var(--backgroundColor-primary-invert-default); --borderColor-primary-invert-lighter: var(--backgroundColor-primary-invert-lighter); --borderColor-primary-invert-darker: var(--backgroundColor-primary-invert-darker); /* Border | Secondary | Default */ --borderColor-secondary-default: var(--dove-gray-200); --borderColor-secondary-lighter: var(--dove-gray-100); --borderColor-secondary-darker: var(--dove-gray-300); /* Border | Secondary | Invert */ --borderColor-secondary-invert-sec-default: var(--backgroundColor-secondary-invert-sec-default); --borderColor-secondary-invert-sec-lighter: var(--backgroundColor-secondary-invert-sec-lighter); --borderColor-secondary-invert-sec-darker: var(--backgroundColor-secondary-invert-sec-darker); /* Border | Accent */ --borderColor-accent-default: var(--backgroundColor-accent-default); --borderColor-accent-lighter: var(--backgroundColor-accent-lighter); --borderColor-accent-darker: var(--backgroundColor-accent-darker); /* Border | Special */ --borderColor-special-default: var(--backgroundColor-special-default); --borderColor-special-lighter: var(--backgroundColor-special-lighter); --borderColor-special-darker: var(--backgroundColor-special-darker); /* E-Commerce */ --pricebox-textColor-default: var(--textColor-primary-default); --pricebox-textColor-special: var(--textColor-special-default); --pricebox-textColor-old: var(--textColor-secondary-lighter); /* (Hyper)Links */ --hyperlink-color: var(--textColor-primary-default); --hyperlink-stroke: var(--textColor-primary-lighter); /* Button | Base | Appearance */ --btn-stroke: transparent; --btn-bg: var(--btn-secondary-bg); --btn-color: var(--btn-secondary-color); --btn-hover-stroke: var(--btn-secondary-hover-stroke); --btn-active-stroke: var(--btn-secondary-active-stroke); --btn-active-bg: var(--btn-secondary-active-bg); --btn-hover-bg: var(--btn-secondary-hover-bg); --btn-active-color: var(--btn-secondary-active-color); --btn-active-icon: var(--btn-secondary-active-icon); --btn-focus-stroke: var(--btn-secondary-hover-stroke); --btn-focus-bg: var(--btn-secondary-hover-bg); --btn-hover-color: var(--btn-secondary-hover-color); --btn-hover-icon: var(--btn-secondary-hover-icon); --btn-focus-color: var(--btn-secondary-hover-color); --btn-focus-icon: var(--btn-secondary-focus-icon); --btn-disabled-stroke: var(--btn-secondary-disabled-stroke); --btn-disabled-bg: var(--btn-secondary-disabled-bg); --btn-disabled-color: var(--btn-secondary-disabled-color); --btn-disabled-icon: var(--btn-secondary-disabled-icon); --btn-icon: var(--btn-secondary-icon); /* Button | Appearance | Styles */ --btn-primary-stroke: transparent; --btn-primary-bg: var(--purple-iris-100); --btn-primary-hover-stroke: transparent; --btn-primary-hover-bg: var(--purple-iris-200); --btn-primary-hover-color: var(--dove-gray-50); --btn-primary-hover-icon: var(--btn-primary-hover-color); --btn-primary-focus-stroke: transparent; --btn-primary-focus-bg: var(--purple-iris-50); --btn-primary-focus-color: var(--dove-gray-50); --btn-primary-focus-icon: var(--btn-primary-focus-color); --btn-primary-active-stroke: var(--purple-iris-100); --btn-primary-color: var(--dove-gray-50); --btn-primary-active-bg: var(--purple-iris-400); --btn-primary-active-color: var(--dove-gray-50); --btn-primary-active-icon: var(--btn-primary-active-color); --btn-primary-disabled-stroke: transparent; --btn-primary-disabled-bg: var(--btn-primary-bg); --btn-primary-disabled-color: var(--btn-primary-color); --btn-primary-disabled-icon: var(--btn-primary-color); --btn-primary-icon: var(--btn-primary-color); --btn-secondary-stroke: transparent; --btn-secondary-bg: var(--apple-500); --btn-secondary-hover-stroke: transparent; --btn-secondary-focus-stroke: transparent; --btn-secondary-focus-bg: var(--apple-600); --btn-secondary-focus-color: white; --btn-secondary-focus-icon: var(--btn-secondary-focus-color); --btn-secondary-hover-bg: var(--apple-400); --btn-secondary-hover-color: white; --btn-secondary-hover-icon: var(--btn-secondary-hover-color); --btn-secondary-active-stroke: var(--apple-300); --btn-secondary-color: var(--dove-gray-50); --btn-secondary-active-bg: var(--apple-500); --btn-secondary-active-color: white; --btn-secondary-active-icon: var(--btn-secondary-active-color); --btn-secondary-disabled-stroke: var(--btn-secondary-stroke); --btn-secondary-disabled-bg: var(--btn-secondary-bg); --btn-secondary-disabled-color: var(--btn-secondary-color); --btn-secondary-disabled-icon: var(--btn-secondary-icon); --btn-secondary-icon: var(--btn-secondary-color); --btn-tertiary-stroke: transparent; --btn-tertiary-bg: var(--backgroundColor-primary-invert-default); --btn-tertiary-hover-stroke: transparent; --btn-tertiary-hover-bg: var(--backgroundColor-primary-invert-lighter); --btn-tertiary-hover-color: var(--btn-tertiary-color); --btn-tertiary-hover-icon: var(--btn-tertiary-hover-color); --btn-tertiary-focus-stroke: transparent; --btn-tertiary-focus-bg: var(--backgroundColor-primary-invert-darker); --btn-tertiary-focus-color: var(--btn-tertiary-color); --btn-tertiary-focus-icon: var(--btn-tertiary-focus-color); --btn-tertiary-active-stroke: transparent; --btn-tertiary-color: var(--textColor-primary-invert-default); --btn-tertiary-active-bg: var(--backgroundColor-primary-invert-lighter); --btn-tertiary-active-color: var(--btn-tertiary-color); --btn-tertiary-active-icon: var(--btn-tertiary-active-color); --btn-tertiary-disabled-stroke: var(--btn-tertiary-stroke); --btn-tertiary-disabled-bg: var(--btn-tertiary-bg); --btn-tertiary-disabled-color: var(--btn-tertiary-color); --btn-tertiary-disabled-icon: var(--btn-tertiary-icon); --btn-tertiary-icon: var(--btn-tertiary-color); --btn-flat-stroke: transparent; --btn-flat-bg: transparent; --btn-flat-hover-stroke: transparent; --btn-flat-hover-bg: var(--apple-50); --btn-flat-hover-color: var(--textColor-primary-default); --btn-flat-hover-icon: var(--btn-flat-hover-color); --btn-flat-focus-stroke: transparent; --btn-flat-focus-bg: transparent; --btn-flat-focus-color: var(--textColor-primary-default); --btn-flat-focus-icon: var(--btn-flat-focus-color); --btn-flat-active-stroke: transparent; --btn-flat-color: var(--textColor-primary-default); --btn-flat-active-bg: transparent; --btn-flat-active-color: var(--textColor-primary-default); --btn-flat-active-icon: var(--btn-flat-active-color); --btn-flat-disabled-stroke: var(--btn-flat-stroke); --btn-flat-disabled-bg: var(--btn-flat-bg); --btn-flat-disabled-color: var(--btn-flat-color); --btn-flat-disabled-icon: var(--btn-flat-icon); --btn-flat-icon: var(--btn-flat-color); /* Button | Base | Size / Layout / Shape */ --btn-radius: var(--rounded-xl); --btn-gap: .625em; --btn-size-sm-px: 1rem; /* 16 / 16 */ --btn-size-sm-py: 0.375rem; /* 6 / 16 */ --btn-size-sm-font-size: var(--text-sm); --btn-size-sm-radius: var(--btn-radius); --btn-size-sm-gap: 0.375rem; /* 6 / 16 */ --btn-size-md-px: 1.25rem; /* 20 / 16 */ --btn-size-md-py: 0.53125rem; /* 8.5 / 16 */ --btn-size-md-font-size: var(--text-base); --btn-size-md-radius: var(--btn-radius); --btn-size-md-gap: 0.375rem; /* 6 / 16 */ --btn-size-lg-px: 1.5rem; /* 24 / 16 */ --btn-size-lg-py: 0.625rem; /* 10 / 16 */ --btn-size-lg-font-size: var(--text-base); --btn-size-lg-radius: var(--btn-radius); --btn-size-lg-gap: 0.46875rem; /* 7.5 / 16 */ --btn-size-xl-px: 1.75rem; /* 28 / 16 */ --btn-size-xl-py: 0.625rem; /* 10 / 16 */ --btn-size-xl-font-size: var(--text-lg); --btn-size-xl-radius: var(--btn-radius); --btn-size-xl-gap: 0.5625rem; /* 9 / 16 */ --btn-size-2xl-px: 2rem; /* 32 / 16 */ --btn-size-2xl-py: 0.75rem; /* 12 / 16 */ --btn-size-2xl-font-size: var(--text-lg); --btn-size-2xl-radius: var(--btn-radius); --btn-size-2xl-gap: 0.5625rem; /* 9 / 16 */ /* Input Styles and States */ --input-stroke-default: var(--dove-gray-100); --input-stroke-hover: var(--dove-gray-300); --input-stroke-focus: var(--apple-700); --input-stroke-active: var(--apple-100); --input-bg-default: white; --input-color: var(--dove-gray-900); --input-icon: var(--dove-gray-200); --input-tooltip: var(--apple-50); --input-hint-text: var(--dove-gray-300); --input-dropdown: var(--dove-gray-900); --input-label-color: var(--textColor-primary-default); --input-placeholder: var(--dove-gray-200); --input-bg-hover: white; --input-bg-focus: white; --input-bg-active: white; --input-disabled-stroke: var(--dove-gray-200); --input-disabled-bg: var(--dove-gray-100); --input-disabled-color: var(--dove-gray-200); --input-prefix-bg: var(--apple-50); --input-prefix-color: var(--apple-500); --input-prefix-stroke: var(--input-prefix-bg); --input-outline-default: transparent; --input-outline-hover: transparent; --input-outline-focus: var(--dove-gray-100); --input-outline-active: transparent; /* Validation | Primitives */ --validation-success: var(--apple-400); --validation-error: #EF4444; --validation-warning: #F59E0B; /* Validation | Outlines */ --outline-primary: var(--purple-iris-100); --outline-secondary: var(--apple-500); --outline-tertiary: var(--dove-gray-500); --outline-error: var(--validation-error); --outline-error-outline: #F7A1A1; --outline-success-outline: #AEE5B7; --outline-warning-outline: #F9C56C; } /* Buttons */ /* =================== Skins from tokens =================== */ /* ========================================================= BUTTON COMPONENT (NO-LAYER, WRAPPER-SAFE) ========================================================= */ /* Private aliases op de wrapper (erven door naar /