/* Storefront color architecture. Components consume the semantic tokens below,
   either directly or through the legacy --rd/--ui compatibility aliases. */
:root,
[data-theme="classic"] {
    color-scheme: light;
    --color-background: #faf7f2;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-soft: #f8f3ed;
    --color-surface-muted: #f5f3f1;
    --color-surface-hover: #fafaf8;
    --color-text-primary: #241a15;
    --color-text-secondary: #4d4038;
    --color-text-muted: #746a63;
    --color-primary: #5a3828;
    --color-primary-hover: #472b20;
    --color-primary-active: #43291e;
    --color-primary-contrast: #ffffff;
    --color-text-on-primary: #ffffff;
    --color-accent: #a94c25;
    --color-accent-hover: #8d3d1d;
    --color-accent-contrast: #ffffff;
    --color-text-on-accent: #ffffff;
    --color-accent-soft: #f8e7dc;
    --color-highlight: #c9995c;
    --color-border: #e8e0d8;
    --color-divider: #eee8e2;
    --color-border-subtle: #eee8e2;
    --color-success: #19713f;
    --color-success-bg: #edf6ef;
    --color-warning: #7a4600;
    --color-warning-bg: #fff7e8;
    --color-error: #b42318;
    --color-error-bg: #fff0ef;
    --color-info: #175b8f;
    --color-info-bg: #eef5f1;
    --color-focus: #a94c25;
    --color-focus-ring: rgba(169, 76, 37, .28);
    --color-overlay: rgba(25, 18, 14, .55);
    --color-shadow-sm: 0 6px 20px rgba(32, 48, 40, .05);
    --color-shadow-md: 0 16px 42px rgba(36, 26, 21, .16);
    --color-footer: #24150e;
    --color-footer-text: #faf7f2;
    --color-footer-text-muted: rgba(250, 247, 242, .76);
    --color-footer-border: rgba(250, 247, 242, .14);
    --color-shadow: rgba(43, 25, 14, .1);
    --color-chart-primary: #5a3828;
    --color-chart-accent: #c9995c;
    --color-chart-grid: #e8e0d8;
    --color-chart-label: #4d4038;
}

[data-theme="harvest"] {
    --color-background: #f7f4f1;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-soft: #f2ece8;
    --color-surface-muted: #f4efec;
    --color-surface-hover: #faf7f5;
    --color-text-primary: #241714;
    --color-text-secondary: #50372f;
    --color-text-muted: #796963;
    --color-primary: #3b211a;
    --color-primary-hover: #2d1813;
    --color-primary-active: #24120f;
    --color-primary-contrast: #ffffff;
    --color-text-on-primary: #ffffff;
    /* Darkened from the supplied starting value so white CTA text passes AA. */
    --color-accent: #c92f3d;
    --color-accent-hover: #a9212e;
    --color-accent-contrast: #ffffff;
    --color-text-on-accent: #ffffff;
    --color-accent-soft: #fbeaec;
    --color-highlight: #c92f3d;
    --color-border: #e5dbd6;
    --color-divider: #eee6e2;
    --color-border-subtle: #eee6e2;
    --color-success: #5f772f;
    --color-success-bg: #eef3e4;
    --color-warning: #9a4d18;
    --color-warning-bg: #fff1e5;
    --color-error: #ae2633;
    --color-error-bg: #fdebed;
    --color-info: #50372f;
    --color-info-bg: #f2ece8;
    --color-focus: #c92f3d;
    --color-focus-ring: rgba(201, 47, 61, .28);
    --color-overlay: rgba(36, 23, 20, .6);
    --color-shadow-sm: 0 6px 20px rgba(36, 23, 20, .07);
    --color-shadow-md: 0 16px 42px rgba(36, 23, 20, .18);
    --color-footer: #0c0c0c;
    --color-footer-text: #ffffff;
    --color-footer-text-muted: rgba(255, 255, 255, .78);
    --color-footer-border: rgba(255, 255, 255, .18);
    --color-shadow: rgba(36, 23, 20, .12);
    --color-chart-primary: #c92f3d;
    --color-chart-accent: #3b211a;
    --color-chart-grid: #e5dbd6;
    --color-chart-label: #50372f;
}

:root {
    /* Compatibility aliases keep every existing storefront component on the
       semantic palette while the historical public names can be retired safely. */
    --rd-canvas: var(--color-background);
    --rd-canvas-subtle: var(--color-surface-soft);
    --rd-surface: var(--color-surface);
    --rd-surface-subtle: var(--color-surface);
    --rd-surface-warm: var(--color-surface-soft);
    --rd-surface-muted: var(--color-surface-muted);
    --rd-surface-section: var(--color-surface-soft);
    --rd-text: var(--color-text-primary);
    --rd-text-warm: var(--color-text-primary);
    --rd-text-soft: var(--color-text-secondary);
    --rd-text-secondary: var(--color-text-muted);
    --rd-text-muted: var(--color-text-muted);
    --rd-border: var(--color-border);
    --rd-border-subtle: var(--color-divider);
    --rd-border-strong: var(--color-border);
    --rd-border-section: var(--color-border);
    --rd-sand: var(--color-surface-soft);
    --rd-brand: var(--color-primary);
    --rd-brand-soft: var(--color-primary);
    --rd-brand-hover: var(--color-primary-hover);
    --rd-brand-active: var(--color-primary-active);
    --rd-on-brand: var(--color-primary-contrast);
    --rd-accent: var(--color-accent);
    --rd-focus-ring: var(--color-focus-ring);
    --rd-surface-inverse: var(--color-footer);
    --rd-text-inverse: var(--color-footer-text);
    --rd-text-inverse-soft: var(--color-footer-text-muted);
    --rd-text-inverse-muted: var(--color-footer-text-muted);
    --rd-border-inverse: var(--color-footer-border);
    --rd-success: var(--color-success);
    --rd-success-strong: var(--color-success);
    --rd-success-text: var(--color-success);
    --rd-success-surface: var(--color-success-bg);
    --rd-success-surface-subtle: var(--color-success-bg);
    --rd-success-surface-highlight: var(--color-success-bg);
    --rd-success-border: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
    --rd-warning: var(--color-warning);
    --rd-warning-text: var(--color-warning);
    --rd-warning-text-soft: var(--color-warning);
    --rd-warning-surface: var(--color-warning-bg);
    --rd-warning-surface-highlight: var(--color-warning-bg);
    --rd-warning-border: color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
    --rd-danger: var(--color-error);
    --rd-danger-strong: var(--color-error);
    --rd-danger-text: var(--color-error);
    --rd-danger-status-text: var(--color-error);
    --rd-danger-surface: var(--color-error-bg);
    --rd-danger-border: color-mix(in srgb, var(--color-error) 28%, var(--color-border));
    --rd-info: var(--color-info);
    --rd-text-inverse-subtle: var(--color-footer-text-muted);
    --rd-action-disabled: var(--color-disabled);
    --ui-border: var(--color-border);
    --ui-surface: var(--color-surface);
    --ui-surface-muted: var(--color-surface-muted);
    --ui-text: var(--color-text-primary);
    --ui-text-muted: var(--color-text-muted);
    --ui-primary: var(--color-primary);
    --ui-primary-hover: var(--color-primary-hover);
    --ui-danger: var(--color-error);
    --ui-focus: var(--color-focus-ring);
    --color-primary-text: var(--color-primary-contrast);
    --color-secondary: var(--color-text-secondary);
    --color-secondary-hover: var(--color-text-primary);
    --color-secondary-active: var(--color-text-primary);
    --color-secondary-text: var(--color-surface);
    --color-success-hover: color-mix(in srgb, var(--color-success) 82%, black);
    --color-success-active: color-mix(in srgb, var(--color-success) 70%, black);
    --color-success-text: #ffffff;
    --color-danger: var(--color-error);
    --color-danger-hover: color-mix(in srgb, var(--color-error) 82%, black);
    --color-danger-active: color-mix(in srgb, var(--color-error) 70%, black);
    --color-danger-text: #ffffff;
    --color-warning-hover: color-mix(in srgb, var(--color-warning) 82%, black);
    --color-warning-active: color-mix(in srgb, var(--color-warning) 70%, black);
    --color-warning-text: #ffffff;
    --color-info-hover: var(--color-primary-hover);
    --color-info-active: var(--color-primary-active);
    --color-info-text: var(--color-primary-contrast);
    --color-text: var(--color-text-primary);
    --color-disabled: var(--color-surface-muted);
    --color-disabled-border: var(--color-border);
    --color-disabled-text: var(--color-text-muted);
    --c950: var(--color-footer);
    --c900: var(--color-text-primary);
    --c800: var(--color-primary-hover);
    --c700: var(--color-primary);
    --c600: var(--color-text-secondary);
    --gold: var(--color-highlight);
    --cream: var(--color-background);
    --line: var(--color-border);
    --text: var(--color-text-primary);
    --muted: var(--color-text-muted);
    --shadow: 0 14px 40px var(--color-shadow);
}

body { background-color: var(--color-background); color: var(--color-text-primary); }
a:hover { color: var(--color-primary); }
::placeholder { color: var(--color-text-muted); }
.theme-surface-elevated { background-color: var(--color-surface-elevated) !important; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.footer { background: var(--color-footer); color: var(--color-footer-text-muted); }
.footer :where(h1, h2, h3, h4, h5, h6, strong) { color: var(--color-footer-text); }
.footer a { color: var(--color-footer-text-muted); }
.footer a:hover { color: var(--color-footer-text); }
.footer hr { border-color: var(--color-footer-border); opacity: 1; }

/* Harvest keeps coffee-cherry for actions and selected states. Informational
   product typography and service icons stay bean-brown to avoid accent noise. */
[data-theme="harvest"] .product-card .product-price-range,
[data-theme="harvest"] .product-meta-line,
[data-theme="harvest"] .product-key-features i,
[data-theme="harvest"] .product-service-grid .service-tile i {
    color: var(--color-primary);
}

[data-theme="harvest"] .coffee-profile__fill,
[data-theme="harvest"] .engagement-rating-track i {
    background: var(--color-chart-primary);
}

[data-theme="harvest"] .engagement-rating-track {
    background: var(--color-surface-soft);
}

[data-theme="harvest"] :is(.engagement-review-summary, .engagement-comments, .engagement-saved-grid article),
[data-theme="harvest"] .engagement-distribution-card,
[data-theme="harvest"] .engagement-criterion,
[data-theme="harvest"] .engagement-comment {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="harvest"] .engagement-toggle[aria-pressed="true"],
[data-theme="harvest"] .engagement-comment-actions button[aria-pressed="true"],
[data-theme="harvest"] .engagement-notifications .is-unread {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
}

/* Customer area has intentionally scoped, high-specificity legacy rules.
   These overrides make its actions, selection, cards and status rail follow Harvest. */
[data-theme="harvest"] .customer-area .btn-primary {
    background: var(--color-accent-soft) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent-hover) !important;
}

[data-theme="harvest"] .customer-area .btn-primary:hover {
    background: color-mix(in srgb, var(--color-accent-soft) 72%, var(--color-accent)) !important;
    border-color: var(--color-accent-hover) !important;
    color: var(--color-accent-hover) !important;
}

[data-theme="harvest"] .customer-area .btn-primary:active {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-on-accent) !important;
}

[data-theme="harvest"] .customer-sidebar nav a.active {
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
}

[data-theme="harvest"] .customer-sidebar nav a.active::before,
[data-theme="harvest"] .order-card {
    border-inline-start-color: var(--color-accent);
}

/* Page-scoped storefront features predate the palette layer. Harvest overrides
   their visible theme colors while preserving their component layout. */
[data-theme="harvest"] :is(.coffee-quiz, .coffee-result-card, .coffee-quiz-empty, .survey-page > header, .survey-question) {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="harvest"] .coffee-quiz-intro {
    background: linear-gradient(145deg, var(--color-surface-soft), var(--color-surface));
    border-color: var(--color-border);
    box-shadow: var(--color-shadow-sm);
}

[data-theme="harvest"] :is(.coffee-quiz-hero > span, .coffee-results > header > span, .coffee-quiz-intro > i, .coffee-quiz-intro li i, .coffee-result-rank, .coffee-result-match strong) {
    color: var(--color-accent);
}

[data-theme="harvest"] :is(.coffee-quiz-hero p, .coffee-results > header p, .coffee-quiz-help, .coffee-quiz-intro p, .coffee-quiz-intro li, .coffee-answer-grid span small, .coffee-result-match span, .coffee-result-price span) {
    color: var(--color-text-muted);
}

[data-theme="harvest"] .coffee-quiz-progress { color: var(--color-text-secondary); }
[data-theme="harvest"] .coffee-quiz-progress > div,
[data-theme="harvest"] .engagement-rating-track { background: var(--color-surface-soft); }
[data-theme="harvest"] .coffee-quiz-progress i,
[data-theme="harvest"] .engagement-rating-track i { background: var(--color-chart-primary); }

[data-theme="harvest"] .coffee-answer-grid span {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="harvest"] .coffee-answer-grid input:checked + span {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
}

[data-theme="harvest"] .coffee-answer-grid input:focus-visible + span {
    outline-color: var(--color-focus);
}

[data-theme="harvest"] :is(.coffee-quiz-early, .coffee-result-tradeoff) {
    background: var(--color-warning-bg);
    border-color: color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
    color: var(--color-warning);
}

[data-theme="harvest"] .coffee-quiz-loading,
[data-theme="harvest"] .coffee-quiz-actions {
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    border-color: var(--color-border);
}

[data-theme="harvest"] :is(.engagement-toggle, .engagement-comment-actions button) {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="harvest"] :is(.engagement-summary, .engagement-section-heading p, .engagement-distribution-card p, .engagement-comment time, .engagement-empty) {
    color: var(--color-text-muted);
}

[data-theme="harvest"] :is(.engagement-status.is-error, .survey-error) { color: var(--color-error); }
[data-theme="harvest"] :is(.engagement-status.is-success, .survey-success) { color: var(--color-success); }

[data-theme="harvest"] .survey-page :is(input, textarea, select) {
    accent-color: var(--color-accent);
}

[data-theme="harvest"] .survey-matrix :is(th, td) { border-color: var(--color-border-subtle); }

[data-theme="harvest"] .product-action-rail button {
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    box-shadow: var(--color-shadow-sm);
}

[data-theme="harvest"] .product-action-rail button:hover,
[data-theme="harvest"] .product-action-rail button[aria-pressed="true"] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
}

/* Coffee Harvest distinguishes primary conversion actions from navigation:
   general UI remains bean-brown; high-value CTAs use coffee-cherry. */
[data-theme="harvest"] .btn:is(.btn-primary, .btn-main),
[data-theme="harvest"] .product-add-button,
[data-theme="harvest"] .product-card .add-btn {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-on-accent);
}

/* Cart/checkout legacy rules use !important and are loaded before this file.
   Keep conversion actions unambiguously coffee-cherry in Harvest. */
[data-theme="harvest"] .cart-page .btn-primary,
[data-theme="harvest"] .checkout-review-page .btn-primary,
[data-theme="harvest"] .checkout-review-page #submitOrderButton,
[data-theme="harvest"] .mobile-checkout-action__button {
    background: var(--color-accent-soft) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent-hover) !important;
}

[data-theme="harvest"] .cart-page .btn-primary:hover,
[data-theme="harvest"] .checkout-review-page .btn-primary:hover,
[data-theme="harvest"] .checkout-review-page #submitOrderButton:hover,
[data-theme="harvest"] .mobile-checkout-action__button:hover {
    background: color-mix(in srgb, var(--color-accent-soft) 72%, var(--color-accent)) !important;
    border-color: var(--color-accent-hover) !important;
    color: var(--color-accent-hover) !important;
}

[data-theme="harvest"] .cart-page .btn-primary:active,
[data-theme="harvest"] .checkout-review-page .btn-primary:active,
[data-theme="harvest"] .checkout-review-page #submitOrderButton:active,
[data-theme="harvest"] .mobile-checkout-action__button:active {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-on-accent) !important;
}

[data-theme="harvest"] .cart-page .checkout-step-nav button.active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
}

[data-theme="harvest"] .cart-page .checkout-step-nav button.active span {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

[data-theme="harvest"] .btn:is(.btn-primary, .btn-main):hover,
[data-theme="harvest"] .product-add-button:hover,
[data-theme="harvest"] .product-card .add-btn:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text-on-accent);
}

[data-theme="harvest"] .btn:is(.btn-primary, .btn-main):active,
[data-theme="harvest"] .product-add-button:active,
[data-theme="harvest"] .product-card .add-btn:active {
    background: color-mix(in srgb, var(--color-accent-hover) 82%, black);
    border-color: color-mix(in srgb, var(--color-accent-hover) 82%, black);
}