:root {
    /*
        Klantcontract (RGB-only)
        Alles hieronder wordt hieruit afgeleid.

        Required (invullen per klant):
        - --client-primary-rgb       brand primary (bijv. groen)
        - --client-accent-rgb        brand accent  (bijv. oranje/koper)

        Optional (kan je overslaan; fallback staat al hieronder):
        - --client-page-bg-start
        - --client-page-bg-end
        - --client-surface-rgb
        - --client-ink-rgb
        - --client-hero-start-rgb    (default afgeleid van primary)
        - --client-hero-end-rgb      (default afgeleid van primary)
        - --client-footer-start-rgb  (default afgeleid van primary)
        - --client-footer-end-rgb    (default afgeleid van primary)
        - --client-success-rgb
        - --client-warning-rgb
        - --client-danger-rgb

        Dark mode gebruikt hetzelfde contract en wordt automatisch afgeleid.
        Alleen indien nodig kan je dark tokens apart overriden in :root[data-theme="dark"].

        Breakpoint contract (max-width):
        - xl-down: 1199.98px
        - lg-down: 991.98px
        - md-down: 767.98px
        - sm-down: 575.98px
    */
    /* Brand base */
    --db-primary-rgb: 41, 70, 59;
    --db-accent-rgb: 194, 122, 69;
    --client-primary-rgb: var(--db-primary-rgb);
    --client-accent-rgb: var(--db-accent-rgb);
    --db-primary: rgb(var(--db-primary-rgb));
    --db-accent: rgb(var(--db-accent-rgb));
    /*  Page canvas */
    --client-page-bg-start: #fbfcfb;
    --client-page-bg-end: #eef4f1;
    --client-surface-rgb: 255, 255, 255;
    --client-ink-rgb: 17, 28, 24;
    /*  Hero / footer gradients (default = primary)  */
    --client-hero-start-rgb: var(--client-primary-rgb);
    --client-hero-end-rgb: var(--client-primary-rgb);
    --client-footer-start-rgb: var(--client-primary-rgb);
    --client-footer-end-rgb: var(--client-primary-rgb);
    /*  Semantic status  */
    --client-success-rgb: 47, 122, 83;
    --client-warning-rgb: 210, 157, 60;
    --client-danger-rgb: 220, 53, 69;
    /* 
       THEME PRIMITIVES — single source of truth for every component
        */
    /* Primary */
    --primary-rgb: var(--client-primary-rgb);
    --primary: rgb(var(--primary-rgb));
    /* Accent — kept as fallback; enhanced via @supports color-mix below */
    --accent-rgb: var(--client-accent-rgb);
    --accent: rgb(var(--accent-rgb));
    /* Derived brand tones — fallbacks (no color-mix) */
    --primary-strong: #1d342c; /* darkened primary        */
    --primary-soft: #e9f0ec; /* very light tint         */
    --highlight: #35584a; /* mid-bright primary      */
    --highlight-rgb: var(--primary-rgb);
    /* Accent tones — fallbacks */
    --accent-strong: #a05a28; /* darkened accent         */
    --accent-soft: #f8ede3; /* very light accent tint  */
    --accent-muted: #d49060; /* softened accent         */
    /*  Neutral base  */
    --gray: #dce3df;
    --darkgray: #8d9a94;
    --whitegray: #f2f5f3;
    --surface-rgb: var(--client-surface-rgb);
    --white: rgb(var(--surface-rgb));
    --white-rgb: var(--surface-rgb);
    --bglight: var(--client-page-bg-start);
    --black: rgb(var(--client-ink-rgb));
    --black-rgb: 0, 0, 0;
    /*  Primary alpha helpers  */
    --primary-alpha-04: rgba(var(--primary-rgb), 0.04);
    --primary-alpha-05: rgba(var(--primary-rgb), 0.05);
    --primary-alpha-06: rgba(var(--primary-rgb), 0.06);
    --primary-alpha-08: rgba(var(--primary-rgb), 0.08);
    --primary-alpha-10: rgba(var(--primary-rgb), 0.1);
    --primary-alpha-12: rgba(var(--primary-rgb), 0.12);
    --primary-alpha-14: rgba(var(--primary-rgb), 0.14);
    --primary-alpha-16: rgba(var(--primary-rgb), 0.16);
    --primary-alpha-18: rgba(var(--primary-rgb), 0.18);
    --primary-alpha-20: rgba(var(--primary-rgb), 0.2);
    --primary-alpha-22: rgba(var(--primary-rgb), 0.22);
    --primary-alpha-24: rgba(var(--primary-rgb), 0.24);
    --primary-alpha-32: rgba(var(--primary-rgb), 0.32);
    --primary-alpha-35: rgba(var(--primary-rgb), 0.35);
    --primary-alpha-40: rgba(var(--primary-rgb), 0.4);
    --primary-alpha-90: rgba(var(--primary-rgb), 0.9);
    --primary-alpha-03: rgba(var(--primary-rgb), 0.03);
    /*  Highlight alpha helpers  */
    --highlight-alpha-04: rgba(var(--highlight-rgb), 0.04);
    --highlight-alpha-06: rgba(var(--highlight-rgb), 0.06);
    --highlight-alpha-08: rgba(var(--highlight-rgb), 0.08);
    --highlight-alpha-09: rgba(var(--highlight-rgb), 0.09);
    --highlight-alpha-12: rgba(var(--highlight-rgb), 0.12);
    --highlight-alpha-16: rgba(var(--highlight-rgb), 0.16);
    --highlight-alpha-18: rgba(var(--highlight-rgb), 0.18);
    --highlight-alpha-22: rgba(var(--highlight-rgb), 0.22);
    --highlight-alpha-90: rgba(var(--highlight-rgb), 0.9);
    /*  Accent alpha helpers  */
    --accent-alpha-08: rgba(var(--accent-rgb), 0.08);
    --accent-alpha-10: rgba(var(--accent-rgb), 0.1);
    --accent-alpha-12: rgba(var(--accent-rgb), 0.12);
    --accent-alpha-16: rgba(var(--accent-rgb), 0.16);
    --accent-alpha-18: rgba(var(--accent-rgb), 0.18);
    --accent-alpha-20: rgba(var(--accent-rgb), 0.2);
    --accent-alpha-24: rgba(var(--accent-rgb), 0.24);
    --accent-alpha-45: rgba(var(--accent-rgb), 0.45);
    --accent-alpha-00: rgba(var(--accent-rgb), 0);
    /*  Canvas / page tokens  */
    --canvas-bg-start: var(--client-page-bg-start);
    --canvas-bg-end: var(--client-page-bg-end);
    --page-bg: linear-gradient(180deg, var(--canvas-bg-start) 0%, var(--canvas-bg-end) 100%);
    --page-grid: radial-gradient(circle at top, var(--primary-alpha-04), transparent 38%);
    --page-overlay: linear-gradient(180deg, var(--color-white-a-55), var(--color-white-a-00));
    /*  Surface tokens  */
    --surface-base: rgba(var(--surface-rgb), 0.99);
    --surface-subtle: rgba(var(--surface-rgb), 0.94);
    --surface-muted: var(--primary-alpha-04);
    --surface-muted-strong: var(--primary-alpha-08);
    --surface-strong: rgba(var(--surface-rgb), 1);
    --surface-soft: rgba(var(--surface-rgb), 0.88);
    --surface-raised: rgba(var(--surface-rgb), 0.96);
    --surface-elevated: rgba(var(--surface-rgb), 0.94);
    --surface-overlay: rgba(var(--surface-rgb), 0.88);
    --surface-field: rgba(var(--surface-rgb), 0.92);
    --surface-field-strong: rgba(var(--surface-rgb), 0.98);
    --surface-glass: rgba(var(--surface-rgb), 0.84);
    /*  Liquid glass tokens: all derived from client/theme surfaces */
    --glass-opacity: 0.9;
    --glass-opacity-strong: 0.96;
    --glass-surface: rgba(var(--surface-rgb), var(--glass-opacity));
    --glass-surface-strong: var(--surface-field-strong);
    --glass-bg: linear-gradient(145deg, var(--glass-surface-strong), var(--glass-surface) 58%, var(--surface-soft));
    --glass-bg-strong: linear-gradient(145deg, var(--surface-field-strong), var(--surface-raised) 54%, var(--glass-surface));
    --glass-border: var(--border-muted);
    --glass-border-strong: var(--border-strong);
    --glass-shadow: var(--shadow-medium);
    --glass-shadow-strong: var(--shadow-dropdown), 0 1px 0 var(--glass-highlight-soft);
    --glass-blur: 22px;
    --glass-blur-strong: 32px;
    --glass-saturate: 175%;
    --glass-saturation: var(--glass-saturate);
    --glass-radius: var(--radius-panel);
    --glass-radius-strong: var(--radius-card);
    --glass-highlight: var(--surface-border-translucent);
    --glass-highlight-soft: var(--primary-alpha-10);
    --glass-noise: var(--primary-alpha-04);
    --glass-inner-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-highlight-soft);
    --glass-inner-glow: var(--glass-inner-shadow);
    --header-shell-bg: var(--header-bg);
    --header-shell-border: var(--border-soft);
    --header-shell-shadow: var(--shadow-header);
    --header-shell-compact-bg: var(--header-bg-scrolled);
    --header-shell-compact-border: var(--border-muted);
    --header-shell-compact-shadow: var(--shadow-soft);
    --glass-header-bg: var(--header-bg);
    --glass-header-compact-bg: var(--header-bg-scrolled);
    --glass-panel-bg: var(--glass-bg-strong);
    --glass-card-bg: var(--glass-bg);
    /*  Text tokens  */
    --ink-rgb: var(--client-ink-rgb);
    --ink-alt-rgb: var(--client-ink-rgb);
    --ink-soft-rgb: var(--client-ink-rgb);
    --text-strong: rgb(var(--ink-rgb));
    --text-default: rgba(var(--ink-rgb), 0.86);
    --text-muted: rgba(var(--ink-rgb), 0.66);
    --text-soft: rgba(var(--ink-rgb), 0.52);
    --text-accent: var(--primary);
    /* Accent-coloured text — use where you want the accent brand colour visible */
    --text-accent-brand: var(--accent);
    --text-on-primary: rgb(var(--surface-rgb));
    --text-on-dark: rgb(var(--surface-rgb));
    --text-on-dark-muted: rgba(var(--surface-rgb), 0.88);
    --text-on-dark-soft: rgba(var(--surface-rgb), 0.76);
    --text-on-dark-subtle: rgba(var(--surface-rgb), 0.64);
    /*  Border tokens  */
    --border-soft: rgba(var(--ink-rgb), 0.075);
    --border-muted: rgba(var(--ink-rgb), 0.14);
    --border-accent-soft: var(--primary-alpha-14);
    --color-border: var(--border-muted);
    /* Accent-coloured borders */
    --border-accent-brand: rgba(var(--accent-rgb), 0.22);
    --border-accent-brand-soft: rgba(var(--accent-rgb), 0.12);
    --border-hero: var(--primary-alpha-10);
    --border-strong: rgba(var(--ink-rgb), 0.2);
    /*  Shadow tokens  */
    --shadow-soft: 0 2px 8px rgba(var(--ink-soft-rgb), 0.045), 0 10px 24px rgba(var(--ink-soft-rgb), 0.04);
    --shadow-medium: 0 8px 18px rgba(var(--ink-soft-rgb), 0.07), 0 18px 40px rgba(var(--ink-soft-rgb), 0.06);
    --shadow-dropdown: 0 10px 26px rgba(var(--ink-soft-rgb), 0.1), 0 22px 50px rgba(var(--ink-soft-rgb), 0.08);
    --shadow-hero: 0 8px 32px rgba(var(--ink-alt-rgb), 0.06);
    --shadow-page: 0 4px 20px rgba(var(--ink-rgb), 0.04);
    --shadow-header: 0 2px 12px rgba(var(--ink-rgb), 0.04);
    --shadow-accent-soft: 0 8px 18px rgba(var(--accent-rgb), 0.18);
    --shadow-accent-medium: 0 10px 24px rgba(var(--accent-rgb), 0.24);
    --shadow-accent-strong: 0 12px 30px rgba(var(--accent-rgb), 0.32);
    --shadow-success-soft: 0 4px 20px rgba(var(--client-success-rgb), 0.2);
    --shadow-focus: 0 0 0 3px var(--focus-outline-color);
    --shadow-focus-soft: 0 0 0 3px var(--focus-ring-soft);
    /*  Radius tokens  */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-compact: 8px;
    --radius-card: 16px;
    --radius-card-lg: 18px;
    --radius-display: 24px;
    --radius-panel: 14px;
    --radius-panel-sm: 12px;
    --radius-thumb: 10px;
    --radius-input: 10px;
    --radius-pill: 999px;
    /*  Shape / component contracts  */
    --shape-pill: 999px;
    --surface-card-border: 1px solid var(--border-soft);
    --surface-card-radius: var(--radius-card);
    --surface-card-shadow: var(--shadow-soft);
    --surface-panel-border: 1px solid var(--border-soft);
    --surface-panel-radius: var(--radius-panel);
    --surface-panel-radius-sm: var(--radius-panel-sm);
    --surface-panel-bg: var(--surface-base);
    --surface-panel-shadow: var(--shadow-soft);
    --surface-card-bg: var(--surface-base);
    --surface-card-bg-hover: var(--surface-strong);
    --surface-section-bg: var(--surface-panel-bg);
    --surface-footer-bg: var(--surface-panel-bg);
    --surface-elevated-bg: var(--surface-elevated);
    /*  Spacing tokens  */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 3rem;
    /*  Layout tokens  */
    --content-max-width: 1280px;
    --container-max-width: var(--content-max-width);
    --layout-open-surface: rgba(var(--surface-rgb), 0.72);
    --layout-open-surface-strong: rgba(var(--surface-rgb), 0.9);
    --layout-open-border: rgba(var(--ink-rgb), 0.055);
    --layout-subtle-separator: rgba(var(--ink-rgb), 0.09);
    --layout-soft-shadow: 0 1px 2px rgba(var(--ink-soft-rgb), 0.035), 0 8px 18px rgba(var(--ink-soft-rgb), 0.035);
    --layout-product-tile-shadow: 0 1px 2px rgba(var(--ink-soft-rgb), 0.04), 0 10px 22px rgba(var(--ink-soft-rgb), 0.045);
    --layout-action-panel-bg: linear-gradient(180deg, var(--layout-open-surface-strong), var(--surface-subtle));
    --layout-sidebar-bg: linear-gradient(180deg, var(--layout-open-surface), var(--surface-subtle));
    --layout-section-spacing: clamp(1.25rem, 2vw, 2rem);
    --storefront-section-gap: clamp(1.35rem, 2.1vw, 2.35rem);
    --storefront-content-gap: clamp(1rem, 1.65vw, 1.65rem);
    --storefront-desktop-gap: clamp(1.4rem, 2.35vw, 2.75rem);
    /* Header layout: --logo-height sizes the logo; controls keep their own fixed heights. */
    --logo-height: 44px;
    --logo-compact-scale: 0.75;
    --logo-height-compact-fallback: 33px;
    --logo-height-compact: var(--logo-height-compact-fallback);
    --header-fixed-top-gap: 0.75rem;
    --topbar-height: 40px;
    --header-top-max-width: calc(var(--content-max-width) + 2rem);
    --header-scrolled-max-width: 960px;
    --header-top-inline-gap: 0.5rem;
    --header-scrolled-inline-gap: 2.5rem;
    --header-logo-top-height: var(--logo-height);
    --header-logo-scrolled-height: var(--logo-height-compact);
    --header-logo-top-max-width: 220px;
    --header-logo-scrolled-max-width: 150px;
    --header-top-padding-y: 0.82rem;
    --header-top-padding-x: 0.85rem;
    --header-scrolled-padding-y: 0.35rem;
    --header-scrolled-padding-x: 0.65rem;
    --header-search-top-height: 48px;
    --header-search-scrolled-height: 38px;
    --header-control-top-height: 48px;
    --header-control-scrolled-height: 36px;
    --header-main-top-height: max(var(--header-logo-top-height), var(--header-search-top-height), var(--header-control-top-height));
    --header-main-scrolled-height: max(var(--header-logo-scrolled-height), var(--header-search-scrolled-height), var(--header-control-scrolled-height));
    --header-height: calc(var(--header-fixed-top-gap) + var(--topbar-height) + var(--header-top-padding-y) + var(--header-top-padding-y) + var(--header-main-top-height));
    --header-compact-height: calc(var(--header-fixed-top-gap) + var(--header-scrolled-padding-y) + var(--header-scrolled-padding-y) + var(--header-main-scrolled-height));
    --header-offset: var(--header-height);
    --header-measured-offset: var(--header-offset);
    --header-reserved-offset: max(var(--header-offset), var(--header-measured-offset));
    --page-shell-gap: 2rem;
    --header-bg: var(--surface-base);
    --header-bg-scrolled: var(--surface-elevated-bg);
    --header-topbar-bg: var(--surface-subtle);
    --header-menu-bg: var(--header-bg);
    --header-mobile-menu-bg: var(--surface-panel-bg);
    /*  Button tokens  */
    --submit-button-background-color: var(--primary);
    --submit-button-background-color-hover: var(--primary-strong);
    --primary-hover: var(--primary-strong);
    --button-background-color: var(--surface-base);
    --button-background-color-hover: var(--surface-strong);
    --button-bg: var(--button-background-color);
    --button-bg-hover: var(--button-background-color-hover);
    --button-border: var(--border-soft);
    --active-button-background-color: var(--primary-soft);
    --active-button-border-color: var(--primary);
    /* Accent button (use for secondary CTA where accent colour should show) */
    --accent-button-background-color: var(--accent);
    --accent-button-background-color-hover: var(--accent-strong);
    --accent-button-text-color: rgb(var(--surface-rgb));
    /* Disabled */
    --disabled-button-background-color: var(--whitegray);
    --disabled-button-text-color: rgba(var(--ink-rgb), 0.58);
    --disabled-button-border-color: rgba(var(--ink-rgb), 0.18);
    /*  Focus tokens  */
    --focus-outline-color: var(--primary-alpha-35);
    --focus-ring-soft: rgba(var(--highlight-rgb), 0.1);
    --focus-ring-medium: rgba(var(--highlight-rgb), 0.12);
    /*  Checkbox tokens  */
    --checkbox-background-color: var(--surface-field-strong);
    --checkbox-border-color: var(--gray);
    /*  Typography scale  */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.9375rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-2xs: 0.72rem;
    --font-size-caption: var(--font-size-xs);
    --font-size-control: var(--font-size-base);
    /*  Transitions  */
    --transition-speed: 180ms;
    --transition-ease: cubic-bezier(0.2, 0, 0.2, 1);
    /*  Smart search tokens  */
    --smartsearch-link-color: var(--text-default);
    --smartsearch-link-hover-color: var(--text-accent);
    --smartsearch-box-bg: var(--surface-field-strong);
    --smartsearch-box-border: var(--border-accent-soft);
    --smartsearch-box-radius: var(--radius-panel);
    --smartsearch-box-shadow: var(--shadow-soft);
    --smartsearch-input-focus-bg: var(--highlight-alpha-04);
    --smartsearch-submit-bg: var(--submit-button-background-color);
    --smartsearch-submit-hover-bg: var(--submit-button-background-color-hover);
    --smartsearch-submit-text-color: var(--text-on-primary);
    --smartsearch-dropdown-bg: var(--glass-panel-bg);
    --smartsearch-dropdown-border: var(--glass-border-strong);
    --smartsearch-dropdown-radius: var(--radius-panel-sm);
    --smartsearch-dropdown-shadow: var(--shadow-dropdown);
    --smartsearch-item-hover-bg: var(--surface-muted);
    --smartsearch-results-link-bg: var(--surface-muted);
    --smartsearch-results-link-hover-bg: var(--surface-muted-strong);
    --smartsearch-thumb-bg: var(--surface-subtle);
    --product-card-bg: var(--surface-card-bg);
    --product-card-bg-hover: var(--surface-card-bg-hover);
    --product-card-border: var(--border-muted);
    --product-card-thumb-bg: var(--surface-strong);
    --product-card-thumb-border: var(--border-soft);
    --hero-title-color: var(--text-on-dark);
    --service-band-text-color: var(--text-on-dark);
    --service-band-muted-color: var(--text-on-dark-muted);
    --service-band-soft-color: var(--text-on-dark-soft);
    --footer-text-color: var(--text-default);
    --footer-link-color: var(--text-default);
    --footer-muted-color: var(--text-muted);
    --footer-hero-text-color: var(--text-on-dark);
    --footer-hero-muted-color: var(--text-on-dark-soft);
    --checkout-panel-bg: var(--surface-panel-bg);
    --checkout-summary-bg: var(--surface-card-bg);
    /*  Products page tokens  */
    --products-hero-bg: linear-gradient(135deg, rgba(var(--client-surface-rgb), 0.99), rgba(var(--accent-rgb), 0.08));
    --products-hero-border: var(--border-hero);
    --products-hero-shadow: var(--shadow-hero);
    --products-sidebar-bg: var(--surface-panel-bg);
    --products-sidebar-mobile-bg: var(--glass-surface-strong);
    --products-sidebar-border: var(--glass-border);
    --products-sidebar-shadow: var(--glass-shadow);
    /*  Component colour tokens  */
    --surface-topbar-bg: var(--header-topbar-bg);
    /* Backwards-compatible aliases for older descriptive surface names. */
    --surface-mint-88: var(--surface-overlay);
    --surface-mint-90: var(--surface-field);
    --surface-mint-92: var(--surface-field);
    --surface-mint-94: var(--surface-elevated);
    --surface-mint-96: var(--surface-raised);
    --surface-layer-94: var(--surface-elevated);
    --surface-layer-96: var(--surface-raised);
    --surface-sage-92: var(--surface-field);
    --surface-sage-96: var(--surface-raised);
    --surface-cloud-92: var(--surface-field);
    --surface-cloud-84: var(--surface-glass);
    --surface-filter-92: var(--surface-field);
    --surface-pane-95: var(--surface-elevated);
    --surface-pane-95-alt: var(--surface-field);
    --surface-warm-96: var(--surface-card-bg);
    --surface-cool-96: var(--surface-card-bg);
    --surface-footer-top: var(--surface-footer-bg);
    --surface-footer-bottom: var(--surface-panel-bg);
    /* Accent-tinted surface — gebruik voor highlight-secties, badges, CTAs */
    --surface-accent-soft: rgba(var(--accent-rgb), 0.06);
    --surface-accent-muted: rgba(var(--accent-rgb), 0.1);
    --surface-border-translucent: rgba(var(--surface-rgb), 0.72);
    --surface-danger-soft: rgba(var(--client-danger-rgb), 0.08);
    --surface-success-soft: rgba(var(--client-success-rgb), 0.07);
    --surface-warning-soft: rgba(var(--client-warning-rgb), 0.1);
    --surface-shimmer-gradient: linear-gradient(
        90deg,
        rgba(var(--surface-rgb), 0) 0%,
        rgba(var(--surface-rgb), 0.95) 50%,
        rgba(var(--surface-rgb), 0) 100%
    );
    /*  Overlay / scrim tokens  */
    --overlay-scrim-strong: rgba(var(--black-rgb), 0.18);
    --overlay-scrim-soft: rgba(var(--black-rgb), 0.1);
    --overlay-scrim-modal: rgba(var(--black-rgb), 0.45);
    --media-viewer-bg: rgb(var(--black-rgb));
    --media-viewer-chrome: rgba(var(--black-rgb), 0.75);
    --media-viewer-gradient: linear-gradient(to bottom, rgba(var(--black-rgb), 0.62) 0%, transparent 100%);
    --media-viewer-shadow: 0 24px 80px rgba(var(--black-rgb), 0.7);
    --media-viewer-text-shadow: 0 1px 4px rgba(var(--black-rgb), 0.5);
    /*  Interaction tokens  */
    --interaction-quiet-bg: var(--primary-alpha-06);
    --interaction-quiet-bg-hover: var(--primary-alpha-10);
    /* Accent interaction — use on accent-coloured elements */
    --interaction-accent-bg: var(--accent-alpha-08);
    --interaction-accent-bg-hover: var(--accent-alpha-16);
    /*  Brand-derived border/shadow helpers  */
    --border-cool-soft: rgba(var(--ink-alt-rgb), 0.06);
    --border-brand-soft: rgba(var(--primary-rgb), 0.08);
    --shadow-green-soft: rgba(var(--ink-alt-rgb), 0.04);
    /*  Hero tokens  */
    --hero-radial-glow: rgba(var(--primary-rgb), 0.22);
    --hero-highlight-soft: rgba(var(--primary-rgb), 0.88);
    --hero-deep-start: rgba(var(--client-hero-start-rgb), 0.96);
    --hero-deep-end: rgba(var(--client-hero-end-rgb), 0.82);
    --hero-gradient-start-strong: rgba(var(--client-hero-start-rgb), 0.94);
    --hero-gradient-end-soft: rgba(var(--client-hero-end-rgb), 0.82);
    --service-band-end: rgba(var(--client-hero-end-rgb), 0.9);
    /*  Accent hero / badge tokens  */
    /* Use these to sprinkle the accent colour into sections / badges  */
    --accent-badge-bg: rgba(var(--accent-rgb), 0.1);
    --accent-badge-color: var(--accent-strong);
    --accent-badge-border: rgba(var(--accent-rgb), 0.2);
    /* Accent stripe (top-border decorators on cards, section dividers) */
    --accent-stripe-color: var(--accent);
    --accent-stripe-gradient: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.5));
    /*  Footer tokens  */
    --footer-dark-start: rgba(var(--client-footer-start-rgb), 0.98);
    --footer-dark-end: rgba(var(--client-footer-end-rgb), 0.96);
    /*  Semantic colour layer  */
    --color-transparent: transparent;
    /* White alphas */
    --color-white-a-55: rgba(var(--white-rgb), 0.55);
    --color-white-a-00: rgba(var(--white-rgb), 0);
    --color-white-a-01: rgba(var(--white-rgb), 0.1);
    --color-white-a-02: rgba(var(--white-rgb), 0.2);
    --color-white-a-03: rgba(var(--white-rgb), 0.03);
    --color-white-a-04: rgba(var(--white-rgb), 0.4);
    --color-white-a-05: rgba(var(--white-rgb), 0.05);
    --color-white-a-06: rgba(var(--white-rgb), 0.06);
    --color-white-a-07: rgba(var(--white-rgb), 0.7);
    --color-white-a-08: rgba(var(--white-rgb), 0.8);
    --color-white-a-09: rgba(var(--white-rgb), 0.9);
    --color-white-a-10: rgba(var(--white-rgb), 0.1);
    --color-white-a-12: rgba(var(--white-rgb), 0.12);
    --color-white-a-13: rgba(var(--white-rgb), 0.13);
    --color-white-a-14: rgba(var(--white-rgb), 0.14);
    --color-white-a-18: rgba(var(--white-rgb), 0.18);
    --color-white-a-22: rgba(var(--white-rgb), 0.22);
    --color-white-a-24: rgba(var(--white-rgb), 0.24);
    --color-white-a-26: rgba(var(--white-rgb), 0.26);
    --color-white-a-28: rgba(var(--white-rgb), 0.28);
    --color-white-a-30: rgba(var(--white-rgb), 0.3);
    --color-white-a-32: rgba(var(--white-rgb), 0.32);
    --color-white-a-42: rgba(var(--white-rgb), 0.42);
    --color-white-a-44: rgba(var(--white-rgb), 0.44);
    --color-white-a-48: rgba(var(--white-rgb), 0.48);
    --color-white-a-50: rgba(var(--white-rgb), 0.5);
    --color-white-a-52: rgba(var(--white-rgb), 0.52);
    --color-white-a-54: rgba(var(--white-rgb), 0.54);
    --color-white-a-56: rgba(var(--white-rgb), 0.56);
    --color-white-a-58: rgba(var(--white-rgb), 0.58);
    --color-white-a-62: rgba(var(--white-rgb), 0.62);
    --color-white-a-64: rgba(var(--white-rgb), 0.64);
    --color-white-a-66: rgba(var(--white-rgb), 0.66);
    --color-white-a-72: rgba(var(--white-rgb), 0.72);
    --color-white-a-74: rgba(var(--white-rgb), 0.74);
    --color-white-a-75: rgba(var(--white-rgb), 0.75);
    --color-white-a-76: rgba(var(--white-rgb), 0.76);
    --color-white-a-78: rgba(var(--white-rgb), 0.78);
    --color-white-a-84: rgba(var(--white-rgb), 0.84);
    --color-white-a-86: rgba(var(--white-rgb), 0.86);
    --color-white-a-88: rgba(var(--white-rgb), 0.88);
    --color-white-a-92: rgba(var(--white-rgb), 0.92);
    --color-white-a-94: rgba(var(--white-rgb), 0.94);
    --color-white-a-95: rgba(var(--white-rgb), 0.95);
    --color-white-a-96: rgba(var(--white-rgb), 0.96);
    --color-white-a-98: rgba(var(--white-rgb), 0.98);
    --color-white: var(--white);
    /* Ink alphas */
    --color-ink-a-04: rgba(var(--ink-rgb), 0.04);
    --color-ink-a-05: rgba(var(--ink-rgb), 0.05);
    --color-ink-a-06: rgba(var(--ink-rgb), 0.06);
    --color-ink-a-08: rgba(var(--ink-rgb), 0.08);
    --color-ink-a-10: rgba(var(--ink-rgb), 0.1);
    --color-ink-a-12: rgba(var(--ink-rgb), 0.12);
    --color-ink-a-14: rgba(var(--ink-rgb), 0.14);
    --color-ink-a-16: rgba(var(--ink-rgb), 0.16);
    --color-ink-alt-a-05: rgba(var(--ink-alt-rgb), 0.05);
    --color-ink-alt-a-08: rgba(var(--ink-alt-rgb), 0.08);
    --color-ink-soft-a-12: rgba(var(--ink-soft-rgb), 0.12);
    /* Neutrals */
    --color-neutral-900: var(--primary);
    --color-black-a-02: rgba(var(--black-rgb), 0.2);
    --color-black-a-06: rgba(var(--black-rgb), 0.6);
    --color-black-a-08: rgba(var(--black-rgb), 0.8);
    --color-black-a-15: rgba(var(--black-rgb), 0.15);
    --color-black-a-22: rgba(var(--black-rgb), 0.22);
    /* Accent semantic */
    --color-accent: var(--accent);
    --color-accent-a-09: rgba(var(--accent-rgb), 0.9);
    --color-accent-a-16: rgba(var(--accent-rgb), 0.16);
    /* Status */
    --color-danger-500: rgb(var(--client-danger-rgb));
    --color-danger-600: rgb(var(--client-danger-rgb));
    --color-danger-700: rgb(var(--client-danger-rgb));
    --color-danger-300: rgba(var(--client-danger-rgb), 0.36);
    --color-danger-200: rgba(var(--client-danger-rgb), 0.22);
    --color-danger-050: var(--surface-danger-soft);
    --color-danger-a-08: rgba(var(--client-danger-rgb), 0.08);
    --color-danger-a-12: rgba(var(--client-danger-rgb), 0.12);
    --color-danger-a-18: rgba(var(--client-danger-rgb), 0.18);
    --color-danger-a-22: rgba(var(--client-danger-rgb), 0.22);
    --color-danger-a-28: rgba(var(--client-danger-rgb), 0.28);
    --color-warning-500: rgb(var(--client-warning-rgb));
    --color-warning-700: rgb(var(--client-warning-rgb));
    --color-warning-a-14: rgba(var(--client-warning-rgb), 0.14);
    --color-success: rgb(var(--client-success-rgb));
    --color-success-500: rgb(var(--client-success-rgb));
    --color-success-600: rgb(var(--client-success-rgb));
    --color-success-700: rgb(var(--client-success-rgb));
    --color-success-010: var(--surface-success-soft);
    --color-success-a-06: rgba(var(--client-success-rgb), 0.06);
    --color-success-a-07: rgba(var(--client-success-rgb), 0.07);
    --color-success-a-10: rgba(var(--client-success-rgb), 0.1);
    --color-success-a-12: rgba(var(--client-success-rgb), 0.12);
    --color-success-a-14: rgba(var(--client-success-rgb), 0.14);
    --color-success-a-20: rgba(var(--client-success-rgb), 0.2);
    --color-success-a-22: rgba(var(--client-success-rgb), 0.22);
    --color-success-a-28: rgba(var(--client-success-rgb), 0.28);
    --color-success-a-32: rgba(var(--client-success-rgb), 0.32);
}

@supports (height: calc(1px * 1)) {
    :root {
        --logo-height-compact: max(26px, calc(var(--logo-height) * var(--logo-compact-scale)));
    }
}

/* 
   LIQUID GLASS UTILITIES
   Use these classes or the --glass-* tokens on component selectors.
*/
.glass,
.glass-soft,
.glass-strong,
.glass-header,
.glass-panel,
.glass-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    background:
        linear-gradient(135deg, var(--glass-highlight), var(--color-transparent) 38%),
        var(--glass-bg);
    box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
    color: var(--text-default);
}

.glass-soft {
    background: var(--glass-header-bg);
    box-shadow: var(--shadow-soft), var(--glass-inner-shadow);
}

.glass-strong,
.glass-panel {
    border-color: var(--glass-border-strong);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-strong), var(--glass-inner-shadow);
}

.glass-header {
    border-radius: var(--surface-card-radius);
    background: var(--glass-header-bg);
    box-shadow: var(--shadow-header), var(--glass-inner-shadow);
}

.glass-card {
    background: var(--glass-card-bg);
}

.glass::before,
.glass-soft::before,
.glass-strong::before,
.glass-header::before,
.glass-panel::before,
.glass-card::before,
.glass::after,
.glass-soft::after,
.glass-strong::after,
.glass-header::after,
.glass-panel::after,
.glass-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.glass::before,
.glass-soft::before,
.glass-strong::before,
.glass-header::before,
.glass-panel::before,
.glass-card::before {
    background:
        radial-gradient(circle at 18% 0%, var(--glass-highlight), var(--color-transparent) 32%),
        linear-gradient(135deg, var(--glass-highlight), var(--color-transparent) 42%);
    opacity: 0.68;
    mix-blend-mode: screen;
}

.glass::after,
.glass-soft::after,
.glass-strong::after,
.glass-header::after,
.glass-panel::after,
.glass-card::after {
    background:
        linear-gradient(160deg, var(--color-transparent) 0 38%, var(--glass-highlight-soft) 49%, var(--color-transparent) 62%),
        repeating-linear-gradient(135deg, var(--glass-noise) 0 1px, var(--color-transparent) 1px 7px);
    opacity: 0.22;
    box-shadow: var(--glass-inner-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .glass-soft,
    .glass-card {
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    }

    .glass-strong,
    .glass-header,
    .glass-panel {
        backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturation));
        -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturation));
    }
}

/* 
   DARK MODE — only tokens that need to change are listed here
    */
:root[data-theme="dark"] {
    /* Canvas */
    --canvas-bg-start: rgb(var(--primary-rgb));
    --canvas-bg-end:   rgba(var(--primary-rgb), 0.94);
    --page-bg: linear-gradient(180deg, var(--canvas-bg-start) 0%, var(--canvas-bg-end) 100%);
    --surface-rgb: var(--primary-rgb);
    --white-rgb: var(--surface-rgb);
    --ink-rgb: var(--client-surface-rgb);
    --ink-alt-rgb: var(--client-surface-rgb);
    --ink-soft-rgb: var(--client-surface-rgb);

    /* Neutrals */
    --gray:      rgba(var(--ink-rgb), 0.22);
    --darkgray:  rgba(var(--ink-rgb), 0.56);
    --whitegray: rgba(var(--surface-rgb), 0.78);

    /* Surface */
    --surface-base:          rgba(var(--surface-rgb), 0.98);
    --surface-subtle:        rgba(var(--surface-rgb), 0.9);
    --surface-muted:         rgba(var(--surface-rgb), 0.78);
    --surface-muted-strong:  rgba(var(--highlight-rgb), 0.18);
    --surface-strong:        rgba(var(--surface-rgb), 1);
    --surface-soft:          rgba(var(--surface-rgb), 0.86);
    --surface-raised:        rgba(var(--surface-rgb), 0.96);
    --surface-elevated:      rgba(var(--surface-rgb), 0.98);
    --surface-overlay:       rgba(var(--surface-rgb), 0.84);
    --surface-field:         rgba(var(--surface-rgb), 0.92);
    --surface-field-strong:  rgba(var(--surface-rgb), 0.98);
    --surface-glass:         rgba(var(--surface-rgb), 0.82);
    --glass-opacity: 0.94;
    --glass-opacity-strong: 0.99;
    --glass-surface:         rgba(var(--surface-rgb), var(--glass-opacity));
    --glass-surface-strong:  rgba(var(--surface-rgb), var(--glass-opacity-strong));
    --glass-bg: linear-gradient(145deg, var(--glass-surface-strong), var(--glass-surface) 58%, var(--surface-field));
    --glass-bg-strong: linear-gradient(145deg, var(--surface-field-strong), var(--surface-raised) 54%, var(--glass-surface));
    --glass-border: rgba(var(--ink-rgb), 0.3);
    --glass-border-strong: rgba(var(--ink-rgb), 0.44);
    --glass-shadow: var(--shadow-medium);
    --glass-shadow-strong: var(--shadow-dropdown);
    --glass-highlight: rgba(var(--ink-rgb), 0.24);
    --glass-highlight-soft: rgba(var(--highlight-rgb), 0.24);
    --glass-noise: rgba(var(--ink-rgb), 0.08);
    --glass-inner-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-highlight-soft);
    --glass-inner-glow: var(--glass-inner-shadow);
    --header-shell-bg: var(--header-bg);
    --header-shell-border: var(--border-soft);
    --header-shell-shadow: var(--shadow-header);
    --header-shell-compact-bg: var(--header-bg-scrolled);
    --header-shell-compact-border: var(--border-muted);
    --header-shell-compact-shadow: var(--shadow-soft);
    --glass-header-bg: var(--header-bg);
    --glass-header-compact-bg: var(--header-bg-scrolled);
    --glass-panel-bg: var(--glass-bg-strong);
    --glass-card-bg: var(--glass-bg);
    --surface-border-translucent: rgba(var(--ink-rgb), 0.22);
    --surface-card-bg: var(--surface-raised);
    --surface-card-bg-hover: var(--surface-elevated);
    --surface-section-bg: var(--surface-panel-bg);
    --surface-footer-bg: var(--surface-raised);
    --surface-elevated-bg: var(--surface-elevated);
    --header-bg: var(--surface-raised);
    --header-bg-scrolled: var(--surface-elevated-bg);
    --header-topbar-bg: var(--surface-subtle);
    --header-menu-bg: var(--header-bg);
    --header-mobile-menu-bg: var(--surface-panel-bg);

    /* Accent soft surfaces */
    --surface-accent-soft:  rgba(var(--accent-rgb), 0.1);
    --surface-accent-muted: rgba(var(--accent-rgb), 0.16);

    /* Text */
    --text-strong:       rgb(var(--ink-rgb));
    --text-default:      rgba(var(--ink-rgb), 0.96);
    --text-muted:        rgba(var(--ink-rgb), 0.86);
    --text-soft:         rgba(var(--ink-rgb), 0.76);
    --text-accent:       var(--highlight);
    --text-accent-brand: var(--accent-muted);
    --text-on-primary:   rgb(var(--ink-rgb));
    --text-on-dark:      rgba(var(--ink-rgb), 0.98);
    --text-on-dark-muted: rgba(var(--ink-rgb), 0.9);
    --text-on-dark-soft: rgba(var(--ink-rgb), 0.82);
    --text-on-dark-subtle: rgba(var(--ink-rgb), 0.74);
    --accent-button-text-color: rgb(var(--ink-rgb));
    --hero-title-color: rgb(var(--ink-rgb));

    /* Border */
    --border-soft:             rgba(var(--ink-rgb), 0.18);
    --border-muted:            rgba(var(--ink-rgb), 0.3);
    --border-strong:           rgba(var(--ink-rgb), 0.4);
    --border-accent-soft:      rgba(var(--ink-rgb), 0.24);
    --border-accent-brand:     rgba(var(--accent-rgb), 0.32);
    --border-accent-brand-soft: rgba(var(--accent-rgb), 0.18);
    --border-hero:             rgba(var(--ink-rgb), 0.24);

    /* Shadow */
    --shadow-soft:     0 2px 8px rgba(var(--black-rgb), 0.24), 0 4px 16px rgba(var(--black-rgb), 0.18);
    --shadow-medium:   0 4px 12px rgba(var(--black-rgb), 0.28), 0 8px 24px rgba(var(--black-rgb), 0.22);
    --shadow-dropdown: 0 8px 24px rgba(var(--black-rgb), 0.36), 0 16px 40px rgba(var(--black-rgb), 0.28);
    --shadow-hero:     0 8px 32px rgba(var(--black-rgb), 0.3);
    --shadow-page:     0 4px 20px rgba(var(--black-rgb), 0.28);
    --shadow-header:   0 2px 12px rgba(var(--black-rgb), 0.32);
    --layout-open-surface: rgba(var(--surface-rgb), 0.56);
    --layout-open-surface-strong: rgba(var(--surface-rgb), 0.84);
    --layout-open-border: rgba(var(--ink-rgb), 0.16);
    --layout-subtle-separator: rgba(var(--ink-rgb), 0.22);
    --layout-soft-shadow: 0 1px 2px rgba(var(--black-rgb), 0.18), 0 8px 18px rgba(var(--black-rgb), 0.16);
    --layout-product-tile-shadow: 0 1px 2px rgba(var(--black-rgb), 0.18), 0 10px 22px rgba(var(--black-rgb), 0.18);
    --layout-action-panel-bg: linear-gradient(180deg, var(--surface-raised), var(--surface-overlay));
    --layout-sidebar-bg: linear-gradient(180deg, var(--surface-glass), var(--surface-overlay));

    /* Checkbox / disabled */
    --checkbox-background-color:        var(--surface-field);
    --disabled-button-background-color: var(--surface-field);
    --disabled-button-text-color:       rgba(var(--ink-rgb), 0.58);
    --disabled-button-border-color:     rgba(var(--ink-rgb), 0.22);

    /* Focus */
    --focus-outline-color: rgba(var(--highlight-rgb), 0.45);

    /* Smart search */
    --smartsearch-thumb-bg: var(--surface-field);
    --smartsearch-submit-text-color: var(--text-on-primary);
    --smartsearch-link-color: var(--text-default);

    /* Products */
    --products-sidebar-mobile-bg: var(--surface-raised);
    --product-card-bg: var(--surface-card-bg);
    --product-card-bg-hover: var(--surface-card-bg-hover);
    --product-card-border: var(--border-muted);
    --product-card-thumb-bg: var(--surface-field-strong);
    --product-card-thumb-border: var(--border-muted);
    --service-band-text-color: var(--text-on-dark);
    --service-band-muted-color: var(--text-on-dark-muted);
    --service-band-soft-color: var(--text-on-dark-soft);
    --footer-text-color: var(--text-default);
    --footer-link-color: var(--text-default);
    --footer-muted-color: var(--text-muted);
    --footer-hero-text-color: var(--text-on-dark);
    --footer-hero-muted-color: var(--text-on-dark-soft);

    /* Component surfaces */
    --surface-topbar-bg:   var(--header-topbar-bg);
    --surface-footer-top:  var(--surface-footer-bg);
    --surface-footer-bottom: var(--surface-overlay);

    /* Overlay */
    --overlay-scrim-strong: rgba(var(--black-rgb), 0.6);
    --overlay-scrim-soft:   rgba(var(--black-rgb), 0.45);

    /* Interaction */
    --interaction-quiet-bg:       rgba(var(--highlight-rgb), 0.18);
    --interaction-quiet-bg-hover: rgba(var(--highlight-rgb), 0.26);
    --interaction-accent-bg:      rgba(var(--accent-rgb), 0.14);
    --interaction-accent-bg-hover: rgba(var(--accent-rgb), 0.22);

    /* Brand-derived border/shadow */
    --border-cool-soft:  rgba(var(--ink-rgb), 0.14);
    --border-brand-soft: rgba(var(--highlight-rgb), 0.24);
    --shadow-green-soft: rgba(var(--black-rgb), 0.28);

    /* Hero */
    --hero-radial-glow:    rgba(var(--highlight-rgb), 0.2);
    --hero-highlight-soft: rgba(var(--highlight-rgb), 0.72);

    /* Accent badge */
    --accent-badge-bg:     rgba(var(--accent-rgb), 0.16);
    --accent-badge-color:  var(--accent-muted);
    --accent-badge-border: rgba(var(--accent-rgb), 0.28);

    /* Misc */
    --color-neutral-900: rgb(var(--ink-rgb));
    --color-success-010: rgba(var(--client-success-rgb), 0.12);

    /* Page overlay */
    --page-overlay: linear-gradient(180deg, rgba(var(--black-rgb), 0.2), rgba(var(--black-rgb), 0));
}

/* 
   COLOR-MIX ENHANCEMENTS (progressive — only where supported)
    */
@supports (color: color-mix(in srgb, black, white)) {
    :root {
        /* Primary tones — fully derived from --primary */
        --primary-strong: color-mix(in srgb, var(--primary) 78%, black);
        --primary-soft:   color-mix(in srgb, var(--primary) 8%, white);
        --highlight:      color-mix(in srgb, var(--primary) 88%, white);

        /* Accent tones - fully derived from --client-accent-rgb */
        --accent-strong:  color-mix(in srgb, var(--accent) 78%, black);
        --accent-soft:    color-mix(in srgb, var(--accent) 10%, white);
        --accent-muted:   color-mix(in srgb, var(--accent) 72%, white);

        /* Surfaces and text derived from the customer canvas */
        --surface-subtle:      color-mix(in srgb, rgb(var(--surface-rgb)) 94%, rgb(var(--primary-rgb)));
        --surface-muted:       color-mix(in srgb, rgb(var(--primary-rgb)) 4%, rgb(var(--surface-rgb)));
        --surface-muted-strong: color-mix(in srgb, rgb(var(--primary-rgb)) 8%, rgb(var(--surface-rgb)));
        --surface-strong:      color-mix(in srgb, rgb(var(--surface-rgb)) 96%, rgb(var(--primary-rgb)));
        --surface-soft:        color-mix(in srgb, rgb(var(--surface-rgb)) 88%, rgb(var(--primary-rgb)));
        --surface-warm-96:     var(--surface-card-bg);
        --surface-cool-96:     var(--surface-card-bg);
        --glass-surface: color-mix(in srgb, rgb(var(--surface-rgb)) 88%, var(--primary-alpha-12));
        --glass-surface-strong: color-mix(in srgb, rgb(var(--surface-rgb)) 96%, var(--primary-alpha-06));
        --glass-bg: linear-gradient(
            145deg,
            var(--glass-surface-strong),
            color-mix(in srgb, rgb(var(--surface-rgb)) 82%, var(--primary-alpha-14)) 56%,
            color-mix(in srgb, rgb(var(--surface-rgb)) 76%, var(--accent-alpha-08))
        );
        --glass-bg-strong: linear-gradient(
            145deg,
            color-mix(in srgb, rgb(var(--surface-rgb)) 98%, var(--primary-alpha-12)),
            color-mix(in srgb, rgb(var(--surface-rgb)) 88%, var(--highlight-alpha-16)) 58%,
            color-mix(in srgb, rgb(var(--surface-rgb)) 80%, var(--accent-alpha-10))
        );
        --glass-border: color-mix(in srgb, var(--border-muted) 72%, var(--primary-alpha-24));
        --glass-border-strong: color-mix(in srgb, var(--border-strong) 72%, var(--primary-alpha-32));
        --glass-highlight: color-mix(in srgb, rgb(var(--surface-rgb)) 64%, transparent);
        --glass-highlight-soft: color-mix(in srgb, var(--highlight) 16%, transparent);
        --glass-noise: color-mix(in srgb, var(--primary) 8%, transparent);
        --header-shell-bg: var(--header-bg);
        --header-shell-border: color-mix(in srgb, var(--border-soft) 78%, var(--primary-alpha-10));
        --header-shell-compact-bg: var(--header-bg-scrolled);
        --header-shell-compact-border: color-mix(in srgb, var(--border-muted) 76%, var(--primary-alpha-18));
        --header-shell-compact-shadow: var(--shadow-soft);
        --glass-header-bg: var(--header-bg);
        --glass-header-compact-bg: var(--header-bg-scrolled);
        --glass-panel-bg: var(--glass-bg-strong);
        --glass-card-bg: var(--glass-bg);

        /* Accent badge — derived */
        --accent-badge-color: color-mix(in srgb, var(--accent) 80%, black);

        /* Neutral from primary */
        --color-neutral-900: color-mix(in srgb, var(--primary) 40%, black);

        /* Products hero */
        --products-hero-bg: linear-gradient(
            135deg,
            color-mix(in srgb, var(--client-page-bg-end) 70%, rgb(var(--client-surface-rgb))),
            rgba(var(--client-surface-rgb), 0.98)
        );

        /* Hero gradients */
        --hero-deep-start:            color-mix(in srgb, rgb(var(--client-hero-start-rgb)) 80%, black);
        --hero-deep-end:              color-mix(in srgb, rgb(var(--client-hero-end-rgb)) 68%, white);
        --hero-gradient-start-strong: color-mix(in srgb, rgb(var(--client-hero-start-rgb)) 86%, black);
        --hero-gradient-end-soft:     color-mix(in srgb, rgb(var(--client-hero-end-rgb)) 76%, white);
        --service-band-end:           color-mix(in srgb, rgb(var(--client-hero-end-rgb)) 74%, white);

        /* Footer gradients */
        --footer-dark-start: color-mix(in srgb, rgb(var(--client-footer-start-rgb)) 88%, black);
        --footer-dark-end:   color-mix(in srgb, rgb(var(--client-footer-end-rgb)) 82%, black);

        /* Status */
        --color-success-700: color-mix(in srgb, var(--color-success-500) 80%, black);
        --color-success-600: color-mix(in srgb, var(--color-success-500) 88%, black);
        --color-success-010: color-mix(in srgb, var(--color-success-500) 4%, rgb(var(--surface-rgb)));
        --color-warning-700: color-mix(in srgb, var(--color-warning-500) 74%, black);
        --color-danger-050:  color-mix(in srgb, var(--color-danger-500) 6%, white);
        --color-danger-200:  color-mix(in srgb, var(--color-danger-500) 22%, white);
        --color-danger-300:  color-mix(in srgb, var(--color-danger-500) 36%, white);
        --color-danger-600:  color-mix(in srgb, var(--color-danger-500) 88%, black);
        --color-danger-700:  color-mix(in srgb, var(--color-danger-500) 78%, black);

        /* Accent stripe — enhanced */
        --accent-stripe-gradient: linear-gradient(
            90deg,
            var(--accent),
            color-mix(in srgb, var(--accent) 55%, white)
        );
}

:root[data-theme="dark"] {
        /* Canvas */
        --canvas-bg-start: color-mix(in srgb, var(--primary) 22%, black);
        --canvas-bg-end:   color-mix(in srgb, var(--primary) 30%, black);
        --page-bg: linear-gradient(180deg, var(--canvas-bg-start) 0%, var(--canvas-bg-end) 100%);

        /* Primary tones */
        --primary-soft:  color-mix(in srgb, var(--primary) 22%, black);
        --highlight:     color-mix(in srgb, var(--primary) 60%, white);
        --text-accent:   color-mix(in srgb, var(--primary) 64%, white);

        /* Accent tones */
        --accent-strong: color-mix(in srgb, var(--accent) 68%, black);
        --accent-soft:   color-mix(in srgb, var(--accent) 18%, black);
        --accent-muted:  color-mix(in srgb, var(--accent) 60%, white);
        --text-accent-brand: color-mix(in srgb, var(--accent) 72%, white);
        --accent-badge-color: color-mix(in srgb, var(--accent) 68%, white);

        /* Surface */
        --surface-base: color-mix(in srgb, var(--primary) 46%, black);
        --surface-subtle: color-mix(in srgb, var(--primary) 52%, black);
        --surface-muted: color-mix(in srgb, var(--primary) 38%, black);
        --surface-strong: color-mix(in srgb, var(--primary) 68%, black);
        --surface-soft: color-mix(in srgb, var(--primary) 44%, black);
        --surface-raised: color-mix(in srgb, var(--primary) 58%, black);
        --surface-elevated: color-mix(in srgb, var(--primary) 64%, black);
        --surface-overlay: color-mix(in srgb, var(--primary) 34%, black);
        --surface-field: color-mix(in srgb, var(--primary) 50%, black);
        --surface-field-strong: color-mix(in srgb, var(--primary) 62%, black);
        --surface-glass: color-mix(in srgb, var(--primary) 42%, black);
        --surface-card-bg: color-mix(in srgb, var(--primary) 58%, black);
        --surface-card-bg-hover: color-mix(in srgb, var(--primary) 66%, black);
        --surface-elevated-bg: var(--surface-elevated);
        --header-bg: color-mix(in srgb, var(--primary) 58%, black);
        --header-bg-scrolled: color-mix(in srgb, var(--primary) 66%, black);
        --header-topbar-bg: color-mix(in srgb, var(--primary) 50%, black);
        --header-menu-bg: var(--header-bg);
        --header-mobile-menu-bg: var(--surface-panel-bg);
        --glass-opacity: 0.96;
        --glass-opacity-strong: 1;
        --glass-surface: color-mix(in srgb, var(--primary) 68%, var(--canvas-bg-end));
        --glass-surface-strong: color-mix(in srgb, var(--primary) 78%, var(--canvas-bg-end));
        --glass-bg: linear-gradient(
            145deg,
            color-mix(in srgb, var(--primary) 76%, var(--canvas-bg-end)),
            color-mix(in srgb, var(--primary) 64%, var(--canvas-bg-end)) 56%,
            color-mix(in srgb, var(--primary) 58%, var(--highlight-alpha-18))
        );
        --glass-bg-strong: linear-gradient(
            145deg,
            color-mix(in srgb, var(--primary) 84%, var(--canvas-bg-end)),
            color-mix(in srgb, var(--primary) 70%, var(--canvas-bg-end)) 58%,
            color-mix(in srgb, var(--primary) 62%, var(--highlight-alpha-22))
        );
        --glass-border: color-mix(in srgb, var(--primary) 52%, rgb(var(--ink-rgb)));
        --glass-border-strong: color-mix(in srgb, var(--primary) 36%, rgb(var(--ink-rgb)));
        --glass-highlight: color-mix(in srgb, rgb(var(--ink-rgb)) 24%, transparent);
        --glass-highlight-soft: color-mix(in srgb, var(--highlight) 30%, transparent);
        --glass-noise: color-mix(in srgb, rgb(var(--ink-rgb)) 10%, transparent);
        --header-shell-bg: var(--header-bg);
        --header-shell-border: var(--border-soft);
        --header-shell-compact-bg: var(--header-bg-scrolled);
        --header-shell-compact-border: var(--border-muted);
        --header-shell-compact-shadow: var(--shadow-soft);
        --glass-header-bg: var(--header-bg);
        --glass-header-compact-bg: var(--header-bg-scrolled);
        --glass-panel-bg: var(--glass-bg-strong);
        --glass-card-bg: var(--glass-bg);

        /* Text uses the dark ink basis; surfaces keep the customer's primary hue. */
        --text-strong: rgba(var(--ink-rgb), 0.99);
        --text-default: rgba(var(--ink-rgb), 0.96);
        --text-muted: rgba(var(--ink-rgb), 0.86);
        --text-soft: rgba(var(--ink-rgb), 0.76);
        --text-on-dark: rgba(var(--ink-rgb), 0.99);
        --text-on-dark-muted: rgba(var(--ink-rgb), 0.91);
        --text-on-dark-soft: rgba(var(--ink-rgb), 0.84);
        --text-on-dark-subtle: rgba(var(--ink-rgb), 0.76);
        --text-on-primary: color-mix(in srgb, var(--primary) 4%, white);
        --accent-button-text-color: color-mix(in srgb, var(--accent) 5%, white);
        --border-soft: color-mix(in srgb, var(--primary) 70%, white);
        --border-muted: color-mix(in srgb, var(--primary) 58%, white);
        --border-strong: color-mix(in srgb, var(--primary) 45%, white);
        --border-accent-soft: color-mix(in srgb, var(--primary) 64%, white);
        --product-card-bg: var(--surface-card-bg);
        --product-card-bg-hover: var(--surface-card-bg-hover);
        --product-card-border: var(--border-muted);
        --product-card-thumb-bg: color-mix(in srgb, var(--primary) 64%, black);
        --product-card-thumb-border: color-mix(in srgb, var(--primary) 56%, white);
        --smartsearch-submit-text-color: var(--text-on-primary);
        --smartsearch-link-color: var(--text-default);
        --service-band-text-color: var(--text-on-dark);
        --service-band-muted-color: var(--text-on-dark-muted);
        --service-band-soft-color: var(--text-on-dark-soft);
        --footer-text-color: var(--text-default);
        --footer-link-color: var(--text-default);
        --footer-muted-color: var(--text-muted);
        --footer-hero-text-color: var(--text-on-dark);
        --footer-hero-muted-color: var(--text-on-dark-soft);

        /* Hero */
        --hero-title-color: color-mix(in srgb, var(--primary) 2%, white);
        --hero-deep-start:            color-mix(in srgb, rgb(var(--client-hero-start-rgb)) 36%, black);
        --hero-deep-end:              color-mix(in srgb, rgb(var(--client-hero-end-rgb)) 44%, black);
        --hero-gradient-start-strong: color-mix(in srgb, rgb(var(--client-hero-start-rgb)) 40%, black);
        --hero-gradient-end-soft:     color-mix(in srgb, rgb(var(--client-hero-end-rgb)) 50%, black);
        --service-band-end:           color-mix(in srgb, rgb(var(--client-hero-end-rgb)) 52%, black);

        /* Footer */
        --footer-dark-start: color-mix(in srgb, rgb(var(--client-footer-start-rgb)) 36%, black);
        --footer-dark-end:   color-mix(in srgb, rgb(var(--client-footer-end-rgb)) 44%, black);
    }
}