/* Account & compare pages — follow published Diamond theme tokens.
   Dark surface overrides live in diamond-theme-dark-surface.css (html.diamond-theme-surface-dark). */

html.html-compare-products-page {
    --compare-page-bg: var(--color-page-bg-alt, #f4f5f7);
    --compare-page-bg-accent: color-mix(in srgb, var(--color-primary, #ef4056) 6%, transparent);
    --compare-surface: var(--color-neutral-000, #ffffff);
    --compare-surface-muted: var(--color-neutral-100, #f8f9fb);
    --compare-surface-elevated: var(--color-neutral-000, #ffffff);
    --compare-border: color-mix(in srgb, var(--color-neutral-black, #23254e) 10%, transparent);
    --compare-border-strong: color-mix(in srgb, var(--color-neutral-black, #23254e) 16%, transparent);
    --compare-text: var(--color-neutral-700, #23254e);
    --compare-text-muted: var(--color-neutral-500, #767790);
    --compare-heading: var(--color-on-surface, var(--color-neutral-black, #080a38));
    --compare-link: var(--color-primary, #ef4056);
    --compare-shadow: 0 10px 30px color-mix(in srgb, var(--color-neutral-black, #23254e) 8%, transparent);
    --compare-shadow-soft: 0 2px 12px color-mix(in srgb, var(--color-neutral-black, #23254e) 6%, transparent);
    --compare-input-bg: var(--color-neutral-000, #ffffff);
    --compare-input-border: var(--color-border, #c3c3ce);
    --compare-input-text: var(--color-on-surface, var(--color-neutral-800, #23254e));
    --compare-modal-overlay: color-mix(in srgb, var(--color-neutral-black, #080a38) 45%, transparent);
    --compare-modal-bg: var(--color-neutral-000, #ffffff);
    --compare-modal-text: var(--color-on-surface, var(--color-neutral-800, #23254e));
    --compare-add-bg: color-mix(in srgb, var(--color-primary, #ef4056) 6%, transparent);
    --compare-sticky-bg: var(--color-neutral-000, #ffffff);
    --compare-focus-ring: color-mix(in srgb, var(--color-primary, #ef4056) 18%, transparent);
    --compare-skeleton-base: var(--color-neutral-200, #ececf1);
    --compare-skeleton-shine: color-mix(in srgb, var(--color-neutral-000, #ffffff) 55%, transparent);
    --compare-success-bg: color-mix(in srgb, var(--color-success, #22a050) 6%, transparent);
    --compare-success-border: color-mix(in srgb, var(--color-success, #22a050) 35%, transparent);
    --compare-success-text: var(--color-success, #1f8a4c);
    --compare-remove-bg: var(--compare-surface-muted);
    --compare-remove-border: var(--compare-border);
    --compare-remove-icon: var(--compare-text-muted);
    --compare-remove-hover-bg: color-mix(in srgb, var(--color-primary, #ef4056) 10%, transparent);
    --compare-remove-hover-border: color-mix(in srgb, var(--color-primary, #ef4056) 35%, transparent);
    --compare-remove-hover-icon: var(--compare-link);
    --compare-empty-icon-bg: color-mix(in srgb, var(--color-primary, #ef4056) 10%, transparent);
    --compare-empty-icon-hover-bg: color-mix(in srgb, var(--color-primary, #ef4056) 16%, transparent);
}

html.html-account-page {
    --account-page-bg: var(--color-page-bg-alt, #f4f5f7);
    --account-page-bg-accent: color-mix(in srgb, var(--color-primary, #ef4056) 6%, transparent);
    --account-surface: var(--color-neutral-000, #ffffff);
    --account-surface-muted: var(--color-neutral-100, #f8f9fb);
    --account-surface-elevated: var(--color-neutral-000, #ffffff);
    --account-border: color-mix(in srgb, var(--color-neutral-black, #23254e) 10%, transparent);
    --account-border-strong: color-mix(in srgb, var(--color-neutral-black, #23254e) 16%, transparent);
    --account-text: var(--color-neutral-700, #23254e);
    --account-text-muted: var(--color-neutral-500, #767790);
    --account-heading: var(--color-on-surface, var(--color-neutral-black, #080a38));
    --account-link: var(--color-primary, #ef4056);
    --account-nav-bg: var(--color-neutral-000, #ffffff);
    --account-nav-profile-bg: linear-gradient(
        135deg,
        var(--color-neutral-800, #23254e) 0%,
        var(--color-neutral-700, #3f4064) 55%,
        color-mix(in srgb, var(--color-primary, #ef4056) 40%, var(--color-neutral-700, #3f4064)) 140%
    );
    --account-nav-profile-text: var(--color-neutral-000, #ffffff);
    --account-nav-profile-text-muted: color-mix(in srgb, var(--account-nav-profile-text) 82%, transparent);
    --account-nav-profile-close: color-mix(in srgb, var(--account-nav-profile-text) 92%, transparent);
    --account-nav-active-bg: color-mix(in srgb, var(--color-primary, #ef4056) 10%, transparent);
    --account-nav-active-border: color-mix(in srgb, var(--color-primary, #ef4056) 35%, transparent);
    --account-shadow: 0 10px 30px color-mix(in srgb, var(--color-neutral-black, #23254e) 8%, transparent);
    --account-shadow-soft: 0 2px 12px color-mix(in srgb, var(--color-neutral-black, #23254e) 6%, transparent);
    --account-input-bg: var(--color-neutral-000, #ffffff);
    --account-input-border: var(--color-border, #c3c3ce);
    --account-input-text: var(--color-on-surface, var(--color-neutral-800, #23254e));
    --account-badge-bg: var(--color-neutral-100, #f1f2f4);
    --account-badge-text: var(--color-neutral-600, #3f4064);
    --account-overlay: color-mix(in srgb, var(--color-neutral-black, #080a38) 45%, transparent);
    --account-action-bg: var(--account-surface-muted);
    --account-action-border: var(--account-border);
    --account-action-icon: var(--account-text-muted);
    --account-action-edit-hover-bg: color-mix(in srgb, var(--color-neutral-black, #23254e) 8%, transparent);
    --account-action-edit-hover-border: var(--account-border-strong);
    --account-action-edit-hover-icon: var(--account-heading);
    --account-action-delete-hover-bg: color-mix(in srgb, var(--color-primary, #ef4056) 10%, transparent);
    --account-action-delete-hover-border: color-mix(in srgb, var(--color-primary, #ef4056) 35%, transparent);
    --account-action-delete-hover-icon: var(--account-link);
}