:root {
    /* ═══════════════════════════════════════════════════════════════════ */
    /* PLANVIGO DESIGN SYSTEM - COLOR PALETTE */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-color-accent: #FF785F;
    --pv-color-accent-hover: #D95D39;
    --pv-color-text-primary: #1C1C1E;
    --pv-color-text-secondary: #FF785F;
    --pv-color-text-light: #f1f1f1;
    --pv-color-text-disabled: #D1D1D1;
    --pv-color-bg: #f8f8f8;
    --pv-color-bg-secondary: #F4F4F4;
    --pv-color-border: #D1D1D1;
    --pv-color-border-hover: #FF785F;
    --pv-color-lightbox-bg: #1C1C1E;
    --pv-color-lightbox-ui: #D1D1D1;
    
    --pv-color-success: #00c42a;
    --pv-color-warning: #FBBF24;
    --pv-color-error: #EF4444;
    --pv-color-info: #FF785F;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - FONT FAMILIES */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-family-primary: "Poppins", sans-serif;
    --pv-font-family-secondary: "Inter", sans-serif;
    --pv-font-family-accent: "Mulish", sans-serif;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - H1 HEADLINES */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-h1-size: 48px;
    --pv-font-h1-weight: 700;
    --pv-font-h1-family: var(--pv-font-family-primary);
    --pv-font-h1-line-height: 1.3;
    --pv-font-h1-color: var(--pv-color-text-primary);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - H2 SUB-HEADLINES */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-h2-size: 36px;
    --pv-font-h2-weight: 600;
    --pv-font-h2-family: var(--pv-font-family-primary);
    --pv-font-h2-line-height: 1.4;
    --pv-font-h2-color: var(--pv-color-text-primary);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - H3 SECTION TITLES */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-h3-size: 28px;
    --pv-font-h3-weight: 600;
    --pv-font-h3-family: var(--pv-font-family-secondary);
    --pv-font-h3-line-height: 1.4;
    --pv-font-h3-color: var(--pv-color-text-primary);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - H4 SMALLER HEADINGS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-h4-size: 24px;
    --pv-font-h4-weight: 600;
    --pv-font-h4-family: var(--pv-font-family-secondary);
    --pv-font-h4-line-height: 1.4;
    --pv-font-h4-color: var(--pv-color-text-primary);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - H5 MINI HEADINGS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-h5-size: 20px;
    --pv-font-h5-weight: 500;
    --pv-font-h5-family: var(--pv-font-family-secondary);
    --pv-font-h5-line-height: 1.5;
    --pv-font-h5-color: var(--pv-color-text-primary);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - BODY TEXT */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-body-size: 16px;
    --pv-font-body-weight: 400;
    --pv-font-body-family: var(--pv-font-family-secondary);
    --pv-font-body-line-height: 1.6;
    --pv-font-body-color: var(--pv-color-text-primary);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - SMALL TEXT */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-small-size: 14px;
    --pv-font-small-weight: 400;
    --pv-font-small-family: var(--pv-font-family-secondary);
    --pv-font-small-line-height: 1.5;
    --pv-font-small-color: var(--pv-color-text-primary);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - HINT TEXT */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-hint-size: 12px;
    --pv-font-hint-weight: 300;
    --pv-font-hint-family: var(--pv-font-family-secondary);
    --pv-font-hint-line-height: 1.4;
    --pv-font-hint-color: var(--pv-color-text-disabled);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - BUTTON TEXT */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-button-size: 16px;
    --pv-font-button-weight: 600;
    --pv-font-button-family: var(--pv-font-family-primary);
    --pv-font-button-color: #FFFFFF;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TYPOGRAPHY - LABEL TEXT */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-font-label-size: 14px;
    --pv-font-label-weight: 500;
    --pv-font-label-family: var(--pv-font-family-secondary);
    --pv-font-label-color: var(--pv-color-text-primary);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* BUTTON - STYLING */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-button-padding-vertical: 12px;
    --pv-button-padding-horizontal: 24px;
    --pv-button-border-radius: 10px;
    --pv-button-border-width-normal: 0px;
    --pv-button-border-width-hover: 1px;
    --pv-button-font-size: var(--pv-font-button-size);
    --pv-button-font-weight: var(--pv-font-button-weight);
    --pv-button-text-color: var(--pv-font-button-color);
    --pv-button-bg-color: var(--pv-color-accent);
    --pv-button-border-color-normal: transparent;
    --pv-button-border-color-hover: var(--pv-color-accent-hover);
    --pv-button-shadow-normal: rgba(255, 120, 95, 0.3) 0px 2px 4px 0px;
    --pv-button-shadow-hover: rgba(217, 93, 57, 0.4) 0px 4px 8px 0px;
    --pv-button-bg-color-hover: var(--pv-color-accent-hover);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* IMAGE - STYLING */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-image-border-radius: 8px;
    --pv-image-border-width-normal: 0px;
    --pv-image-border-width-hover: 1px;
    --pv-image-border-color-normal: transparent;
    --pv-image-border-color-hover: var(--pv-color-accent);
    --pv-image-shadow-normal: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
    --pv-image-shadow-hover: rgba(255, 120, 95, 0.2) 0px 4px 12px 0px;
    --pv-image-opacity-normal: 1;
    --pv-image-opacity-hover: 0.95;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* INPUT FIELD - STYLING */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-input-padding-vertical: 12px;
    --pv-input-padding-horizontal: 16px;
    --pv-input-border-radius: 6px;
    --pv-input-border-width: 1px;
    --pv-input-border-color-normal: var(--pv-color-border);
    --pv-input-border-color-focus: var(--pv-color-accent);
    --pv-input-bg-color: #FFFFFF;
    --pv-input-text-color: var(--pv-color-text-primary);
    --pv-input-placeholder-color: var(--pv-color-text-light);
    --pv-input-shadow-normal: none;
    --pv-input-shadow-focus: rgba(255, 120, 95, 0.2) 0px 2px 6px 0px;
    --pv-input-font-size: var(--pv-font-body-size);
    --pv-input-font-family: var(--pv-font-family-secondary);
    --pv-input-font-weight: var(--pv-font-body-weight);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* TABLE - STYLING */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-table-font-size: 14px;
    --pv-table-font-family: var(--pv-font-family-secondary);
    --pv-table-font-weight: 400;
    
    --pv-table-header-bg: var(--pv-color-bg-secondary);
    --pv-table-header-text-color: var(--pv-color-text-primary);
    --pv-table-header-font-weight: 600;
    --pv-table-header-padding-vertical: 12px;
    --pv-table-header-padding-horizontal: 16px;
    
    --pv-table-body-border: 1px solid var(--pv-color-border);
    --pv-table-body-padding-vertical: 12px;
    --pv-table-body-padding-horizontal: 16px;
    --pv-table-body-min-height: 48px;
    --pv-table-body-text-color: var(--pv-color-text-primary);
    
    --pv-table-zebra-bg: #F8FAFC;
    --pv-table-hover-bg: #FFF1ED;
    
    --pv-table-sort-icon-color: var(--pv-color-text-light);
    --pv-table-sort-icon-active-color: var(--pv-color-accent);
    --pv-table-sort-icon-size: 12px;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* PAGE TRANSITION - STYLING */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-transition-bg-color: var(--pv-color-accent);
    --pv-transition-animation: fade-in;
    --pv-transition-duration: 400ms;
    --pv-transition-timing: ease-in-out;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* LIGHTBOX - STYLING */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-lightbox-bg-color: var(--pv-color-lightbox-bg);
    --pv-lightbox-text-color: #FFFFFF;
    --pv-lightbox-title-size: 16px;
    --pv-lightbox-title-weight: 600;
    --pv-lightbox-description-size: 14px;
    --pv-lightbox-description-weight: 400;
    
    --pv-lightbox-ui-color: var(--pv-color-lightbox-ui);
    --pv-lightbox-ui-hover-color: var(--pv-color-accent);
    --pv-lightbox-icon-size: 20px;
    --pv-lightbox-toolbar-icon-size: 18px;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* SPACING - DIMENSIONS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-spacing-xs: 4px;
    --pv-spacing-sm: 8px;
    --pv-spacing-md: 16px;
    --pv-spacing-lg: 24px;
    --pv-spacing-xl: 32px;
    --pv-spacing-2xl: 48px;
    --pv-spacing-3xl: 64px;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* BORDER RADIUS - DEFINITIONS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-border-radius-small: 4px;
    --pv-border-radius-medium: 6px;
    --pv-border-radius-large: 8px;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* SHADOWS - DEFINITIONS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-shadow-subtle: 0px 1px 2px rgba(0, 0, 0, 0.04);
    --pv-shadow-small: 0px 2px 4px rgba(0, 0, 0, 0.06);
    --pv-shadow-medium: 0px 4px 8px rgba(0, 0, 0, 0.1);
    --pv-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.15);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* GRADIENTS - EXTENDED COLORS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-color-black: #000000;
    --pv-color-white: #FFFFFF;
    --pv-color-cyan-bluish-gray: #abb8c3;
    --pv-color-pale-pink: #f78da7;
    --pv-color-vivid-red: #cf2e2e;
    --pv-color-luminous-orange: #ff6900;
    --pv-color-luminous-amber: #fcb900;
    --pv-color-light-green-cyan: #7bdcb5;
    --pv-color-vivid-green-cyan: #00d084;
    --pv-color-pale-cyan-blue: #8ed1fc;
    --pv-color-vivid-cyan-blue: #0693e3;
    --pv-color-vivid-purple: #9b51e0;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* GRADIENTS - PRESETS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-gradient-cyan-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --pv-gradient-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --pv-gradient-amber-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --pv-gradient-orange-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --pv-gradient-gray-cyan: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --pv-gradient-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --pv-gradient-blush-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --pv-gradient-blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --pv-gradient-luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --pv-gradient-pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --pv-gradient-electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --pv-gradient-midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);

    /* ═══════════════════════════════════════════════════════════════════ */
    /* FONT AWESOME - ICON FONTS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-fa-classic: "Font Awesome 6 Free";
    --pv-fa-solid: normal 900 1em / 1 "Font Awesome 6 Free";
    --pv-fa-regular: normal 400 1em / 1 "Font Awesome 6 Free";
    --pv-fa-brands-family: "Font Awesome 6 Brands";
    --pv-fa-brands: normal 400 1em / 1 "Font Awesome 6 Brands";

    /* ═══════════════════════════════════════════════════════════════════ */
    /* ASPECT RATIOS - PRESETS */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-aspect-square: 1;
    --pv-aspect-4-3: 4 / 3;
    --pv-aspect-3-4: 3 / 4;
    --pv-aspect-3-2: 3 / 2;
    --pv-aspect-2-3: 2 / 3;
    --pv-aspect-16-9: 16 / 9;
    --pv-aspect-9-16: 9 / 16;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* CONTAINER / LAYOUT - ELEMENTOR COMPAT */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    --pv-container-border-radius: 8px;
    --pv-container-border-width-top: 0px;
    --pv-container-border-width-right: 0px;
    --pv-container-border-width-bottom: 0px;
    --pv-container-border-width-left: 0px;
    --pv-container-border-style: solid;
    --pv-container-border-color: var(--pv-color-border);
    
    --pv-container-widget-width: 100%;
    --pv-container-widget-height: auto;
    --pv-container-widget-flex-grow: 1;
    --pv-container-widget-align-self: auto;
    
    --pv-container-content-width: min(100%, 1140px);
    --pv-container-width: 100%;
    --pv-container-min-height: auto;
    --pv-container-height: auto;
    --pv-container-text-align: left;
    
    --pv-container-margin-top: 0px;
    --pv-container-margin-right: 0px;
    --pv-container-margin-bottom: 0px;
    --pv-container-margin-left: 0px;
    
    --pv-container-padding-top: 16px;
    --pv-container-padding-right: 16px;
    --pv-container-padding-bottom: 16px;
    --pv-container-padding-left: 16px;
    
    --pv-container-position: relative;
    --pv-container-z-index: 0;
    --pv-container-overflow: visible;
    
    --pv-container-gap: 16px;
    --pv-container-row-gap: 16px;
    --pv-container-column-gap: 16px;
    
    --pv-container-overlay-mix-blend-mode: initial;
    --pv-container-overlay-opacity: 1;
    --pv-container-overlay-transition: 0.3s;
    
    --pv-container-grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    --pv-container-grid-template-rows: auto;
    --pv-container-flex-wrap-mobile: wrap;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* LEGACY VARIABLES - BACKWARD COMPATIBILITY */
    /* ═══════════════════════════════════════════════════════════════════ */

    --pv-primary: #FF785F;
    --pv-accent: #FF785F;
    --pv-text-primary: #1C1C1E;
    --pv-text-secondary: #FF785F;
    --pv-background: #FFFFFF;
    --pv-secondary-background: #D1D1D1;
    --pv-border: #D1D1D1;
    --pv-success: #34D399;
    --pv-warning: #FBBF24;
    --pv-error: #EF4444;
    --pv-info: #FF785F;
    --pv-hover: #e56b55;
    --pv-focus: rgba(255, 120, 95, 0.5);
    --pv-primary-font-family: "Poppins", sans-serif;
    --pv-primary-font-size: 48px;
    --pv-primary-font-weight: 700;
    --pv-primary-line-height: 1.3;
    --pv-secondary-font-family: "Inter", sans-serif;
    --pv-secondary-font-size: 20px;
    --pv-secondary-font-weight: 600;
    --pv-secondary-line-height: 1.5;
    --pv-text-font-family: "Inter", sans-serif;
    --pv-text-font-size: 16px;
    --pv-text-font-weight: 400;
    --pv-text-line-height: 1.6;
    --pv-accent-font-family: "Mulish", sans-serif;
    --pv-accent-font-size: 24px;
    --pv-accent-font-weight: 600;
    --pv-page-transition-animation: fade-in;
    --pv-page-transition-duration: 400ms;
    --pv-page-title-display: block;
    --pv-font-small: 14px;
    --pv-font-medium: 20px;
    --pv-font-large: 36px;
    --pv-font-x-large: 42px;
    --pv-spacing-xs: 4px;
    --pv-spacing-sm: 8px;
    --pv-spacing-md: 16px;
    --pv-spacing-lg: 24px;
    --pv-spacing-xl: 32px;
    --pv-spacing-2xl: 48px;
    --pv-spacing-3xl: 64px;
    --pv-shadow-natural: 0px 4px 8px rgba(0, 0, 0, 0.1);
    --pv-shadow-deep: 0px 8px 16px rgba(0, 0, 0, 0.15);
    --pv-shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --pv-shadow-outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --pv-shadow-crisp: 6px 6px 0px rgba(0, 0, 0, 1);
    --pv-black: #000000;
    --pv-white: #FFFFFF;
    --pv-cyan-bluish-gray: #abb8c3;
    --pv-pale-pink: #f78da7;
    --pv-vivid-red: #cf2e2e;
    --pv-luminous-orange: #ff6900;
    --pv-luminous-amber: #fcb900;
    --pv-light-green-cyan: #7bdcb5;
    --pv-vivid-green-cyan: #00d084;
    --pv-pale-cyan-blue: #8ed1fc;
    --pv-vivid-cyan-blue: #0693e3;
    --pv-vivid-purple: #9b51e0;
    --pv-gradient-cyan-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --pv-gradient-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --pv-gradient-amber-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --pv-gradient-orange-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --pv-gradient-gray-cyan: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --pv-gradient-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --pv-gradient-blush-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --pv-gradient-blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --pv-gradient-luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --pv-gradient-pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --pv-gradient-electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --pv-gradient-midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);

    /* Elementor Container Defaults */
    --border-radius: 8px;
    --border-top-width: 0px;
    --border-right-width: 0px;
    --border-bottom-width: 0px;
    --border-left-width: 0px;
    --border-style: solid;
    --border-color: #D1D1D1;
    --container-widget-width: 100%;
    --container-widget-height: auto;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: auto;
    --content-width: min(100%, 1140px);
    --width: 100%;
    --min-height: auto;
    --height: auto;
    --text-align: left;
    --margin-top: 0px;
    --margin-right: 0px;
    --margin-bottom: 0px;
    --margin-left: 0px;
    --padding-top: 16px;
    --padding-right: 16px;
    --padding-bottom: 16px;
    --padding-left: 16px;
    --position: relative;
    --z-index: 0;
    --overflow: visible;
    --gap: 16px;
    --row-gap: 16px;
    --column-gap: 16px;
    --overlay-mix-blend-mode: initial;
    --overlay-opacity: 1;
    --overlay-transition: 0.3s;
    --e-con-grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    --e-con-grid-template-rows: auto;
    --flex-wrap-mobile: wrap;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* DESIGN SYSTEM ADDITIONS - APP COMPONENT TOKENS */
    /* ═══════════════════════════════════════════════════════════════════ */

    /* Missing legacy aliases */
    --pv-text-color: var(--pv-color-text-primary);
    --pv-shadow: rgba(255, 120, 95, 0.3);
    --pv-surface: var(--pv-color-bg);
    --pv-font-family: var(--pv-font-family-secondary);
    --pv-button-font-family: var(--pv-font-family-primary);

    /* App card system */
    --pv-color-dark: #1C1C1E;
    --pv-color-border-subtle: #F3F4F6;
    --pv-color-border-light: #E5E7EB;
    --pv-color-muted: #F4F4F4;
    --pv-color-text-muted: #4B5563;
    --pv-shadow-card: 0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
    --pv-shadow-card-hover: 0 4px 12px 0 rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --pv-shadow-primary: 0 10px 30px rgba(255, 120, 95, 0.25);
    --pv-shadow-primary-sm: 0 4px 12px rgba(255, 120, 95, 0.3);
    --pv-border-radius-card: 16px;
    --pv-border-radius-card-lg: 24px;
    --pv-color-coral-5: rgba(255, 120, 95, 0.05);
    --pv-color-coral-10: rgba(255, 120, 95, 0.1);
    --pv-color-coral-20: rgba(255, 120, 95, 0.2);

    margin-block-end: 0;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-inline-start: 0;
    padding-inline-end: 0;
    padding-inline-start: 0;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* PLANVION DESIGN SYSTEM v2 — Fundament                               */
    /* ───────────────────────────────────────────────────────────────────  */
    /* Diese Ebene steht bewusst am Ende des :root-Blocks: spätere          */
    /* Deklarationen gewinnen, dadurch werden die Altwerte oben überschrieben */
    /* ohne dass ein einziger Selektor angefasst werden muss.               */
    /* Quelle: Styleguide (Artifact), nicht __NOT_PLUGIN_CODE.              */
    /* ═══════════════════════════════════════════════════════════════════ */

    /* ── Neutrale: Slate ───────────────────────────────────────────────── */
    --pv-s-50:  #F8FAFC;
    --pv-s-100: #F1F5F9;
    --pv-s-200: #E2E8F0;
    --pv-s-300: #CBD5E1;
    --pv-s-400: #94A3B8;
    --pv-s-500: #64748B;
    --pv-s-600: #475569;
    --pv-s-700: #334155;
    --pv-s-800: #1E293B;
    --pv-s-900: #0F172A;

    /* ── Akzent-Verlauf (aus page_payments/mvp übernommen) ─────────────── */
    --pv-accent-grad:       linear-gradient(135deg, #FF785F 0%, #FF6B45 100%);
    --pv-accent-grad-hover: linear-gradient(135deg, #F06A4F 0%, #E85A32 100%);

    /* ── Status: Fläche vs. Text ───────────────────────────────────────── */
    /* Die Textvarianten sind tiefer, damit Zahlen auf Weiß lesbar bleiben. */
    --pv-ok:   #10B981;  --pv-ok-text:   #16A34A;
    --pv-warn: #F59E0B;  --pv-warn-text: #EA580C;
    --pv-err:  #EF4444;  --pv-err-text:  #DC2626;
    --pv-info-color: #3B82F6; --pv-info-text: #2563EB;

    /* Badge-Tints: Fläche + Text als Paar */
    --pv-tint-ok-bg:   #D1FAE5;  --pv-tint-ok-fg:   #065F46;
    --pv-tint-warn-bg: #FEF3C7;  --pv-tint-warn-fg: #92400E;
    --pv-tint-err-bg:  #FEE2E2;  --pv-tint-err-fg:  #991B1B;
    --pv-err-press:    #D32F2F;
    --pv-progress-grad: linear-gradient(90deg, #16A34A 0%, #22C55E 100%);

    /* ── Radius: fünf Stufen statt vierzehn ────────────────────────────── */
    --pv-r-xs:   6px;    /* Badges, Chips */
    --pv-r-sm:   10px;   /* Buttons, Inputs */
    --pv-r-md:   14px;   /* Modals, Tabellen */
    --pv-r-lg:   20px;   /* Seitenkarten, Leerzustände */
    --pv-r-pill: 999px;

    /* ── Rahmenstärken ─────────────────────────────────────────────────── */
    --pv-bw-1: 1px;      /* Trennlinien, Kartenrahmen */
    --pv-bw-2: 1.5px;    /* interaktive Elemente */

    /* ── Schatten: weit gestreut, in Slate getönt, nie reines Schwarz ──── */
    --pv-sh-sm:    0 1px 2px rgba(15,23,42,.06);
    --pv-sh-card:  0 10px 30px rgba(15,23,42,.05);
    --pv-sh-pop:   0 12px 30px rgba(15,23,42,.10);
    --pv-sh-modal: 0 24px 60px rgba(15,23,42,.18);

    /* ── Schriftskala (2026-08-30) ─────────────────────────────────────────
       Sechs Stufen, mehr nicht. Auf dem Spieler-Dashboard waren vorher elf
       verschiedene Groessen gemessen (11 · 11,5 · 12 · 12,5 · 13 · 13,5 · 14 ·
       15 · 19 · 26 · 30) und fuenf Stroken — zwei Etiketten mit derselben
       Bedeutung waren unterschiedlich gross. Wer eine neue Groesse braucht,
       nimmt die naechstliegende Stufe statt eine sechste zu erfinden.

       display  die EINE Zahl je Karte (Datum, Betrag, Kennzahl)  Poppins
       section  eigenstaendige Abschnittsueberschrift (--lg)       Poppins
       title    Karten- und Modaltitel                            Poppins
       body     Fliesstext und Werte                              Inter
       meta     Sekundaerzeile, Datumsangaben                     Inter
       label    Etikett ueber einem Wert, Versalien               Inter        */
    --pv-fs-display: 24px;   --pv-fw-display: 700;
    --pv-fs-section: 18px;   --pv-fw-section: 700;
    --pv-fs-title:   15px;   --pv-fw-title:   700;
    --pv-fs-body:    14px;   --pv-fw-body:    400;
    --pv-fs-meta:    12.5px; --pv-fw-meta:    500;
    --pv-fs-label:   11px;   --pv-fw-label:   700;
    /* Einheitliche Hoehe fuer Bedienelemente einer Werkzeugleiste. */
    --pv-control-h:  40px;

    /* ── Abstände: 4er-Raster ──────────────────────────────────────────── */
    --pv-sp-1: 4px;  --pv-sp-2: 8px;  --pv-sp-3: 12px; --pv-sp-4: 16px;
    --pv-sp-5: 20px; --pv-sp-6: 24px; --pv-sp-8: 32px; --pv-sp-10: 40px;

    /* ── Typo: App-Skala ───────────────────────────────────────────────── */
    /* Neue Namen nach Zweck. Die alten --pv-font-h*-size bleiben vorerst   */
    /* unverändert: --pv-font-h5-size dient heute gleichzeitig Tabellen-    */
    /* zellen und Buttons, das wird bei der Seiten-Migration entflochten.   */
    --pv-text-h1: var(--pv-fs-display);   /* auf die Skala gezogen, war 26px */
    --pv-text-h2:      20px;
    --pv-text-h3:      16px;
    --pv-text-body:    14px;
    --pv-text-sm:      12.5px;
    --pv-text-eyebrow: 11px;
    --pv-display-1:    48px;   /* öffentliche Seiten, nicht in der App */
    --pv-display-2:    36px;

    /* ═══════════════════════════════════════════════════════════════════ */
    /* ALTBESTAND UMGEHÄNGT — bestehende Namen, neue Werte                 */
    /* ═══════════════════════════════════════════════════════════════════ */

    /* Neutrale: warm → kühl */
    --pv-color-border:        var(--pv-s-200);   /* war #D1D1D1 */
    --pv-color-border-light:  var(--pv-s-200);   /* war #E5E7EB */
    --pv-color-border-subtle: var(--pv-s-100);   /* war #F3F4F6 */
    --pv-color-bg:            var(--pv-s-50);    /* war #f8f8f8 */
    --pv-color-bg-secondary:  var(--pv-s-100);   /* war #F4F4F4 */
    --pv-color-muted:         var(--pv-s-100);   /* war #F4F4F4 */
    --pv-color-text-muted:    var(--pv-s-500);   /* war #4B5563 */
    --pv-color-text-disabled: var(--pv-s-400);   /* war #D1D1D1 */

    /* Status: Neon-Grün raus, Info von Korall auf Blau */
    --pv-color-success: var(--pv-ok);          /* war #00c42a */
    --pv-color-warning: var(--pv-warn);        /* war #FBBF24 */
    --pv-color-error:   var(--pv-err);         /* war #EF4444 */
    --pv-color-info:    var(--pv-info-color);  /* war Korall — kollidierte mit dem Akzent */
    --pv-success: var(--pv-ok);
    --pv-warning: var(--pv-warn);
    --pv-error:   var(--pv-err);
    --pv-info:    var(--pv-info-color);

    /* Radius: alles auf die fünf Stufen */
    --pv-border-radius-small:   var(--pv-r-xs);
    --pv-border-radius-medium:  var(--pv-r-sm);
    --pv-border-radius-large:   var(--pv-r-md);
    --pv-border-radius-card:    var(--pv-r-lg);   /* war 16px */
    --pv-border-radius-card-lg: var(--pv-r-lg);   /* war 24px */
    --pv-button-border-radius:  var(--pv-r-sm);
    --pv-input-border-radius:   var(--pv-r-sm);   /* war 6px */
    --pv-image-border-radius:   var(--pv-r-md);

    /* Schatten */
    --pv-shadow-card:       var(--pv-sh-card);
    --pv-shadow-card-hover: var(--pv-sh-pop);
    --pv-shadow-small:      var(--pv-sh-sm);
    --pv-shadow-medium:     var(--pv-sh-card);
    --pv-shadow-large:      var(--pv-sh-modal);

    /* Tabelle: Zebra entfällt, Hover neutral statt Korall */
    --pv-table-zebra-bg: transparent;
    --pv-table-hover-bg: var(--pv-s-50);
    --pv-table-header-bg: var(--pv-s-50);
    --pv-table-header-text-color: var(--pv-s-500);

}