/* Fieldnote brand palette. Loaded last; no layout or commerce logic changes. */
:root {
  --brand-primary: #1749cb;
  --brand-primary-hover: #123aa3;
  --brand-on-primary: #ffffff;
  --brand-surface: #f0edfa;
  --brand-on-surface: #1d2640;
  --brand-highlight: #f6ce56;
  --brand-on-highlight: #1d2640;
  --brand-footer: #1d2640;
  --brand-on-footer: #f6f7fc;
  --brand-footer-muted: #c6ccde;
  --brand-border: #d7d3e5;
  --brand-outline: #7c7892;
  --brand-focus: #1749cb;
  --brand-disabled: #e6e8ef;
  --brand-on-disabled: #626878;
  --brand-error: #b42318;
  --brand-error-surface: #fff1f0;
  --brand-success: #286444;
  --brand-success-surface: #eef7f0;
  --accent: var(--brand-primary);
}
/* Actions share a stable color on every page and breakpoint. */
.primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.primary:hover:not(:disabled) {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}
.primary:disabled {
  opacity: 1;
  background: var(--brand-disabled);
  border-color: var(--brand-disabled);
  color: var(--brand-on-disabled);
}
.secondary { border-color: var(--brand-border); color: var(--brand-primary); }
.secondary:hover { border-color: var(--brand-primary); background: var(--brand-surface); }
.text-link, .read-link, .inline-button, .quick-add, .back-link,
.cart-bottom>a, .product-delivery>a { color: var(--brand-primary); border-color: currentColor; }
.text-link:hover, .read-link:hover, .inline-button:hover, .quick-add:hover,
.back-link:hover, .cart-bottom>a:hover { color: var(--brand-primary-hover); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 4px;
}
input[type=checkbox], input[type=radio] { accent-color: var(--brand-primary); }
.quantity button { color: var(--brand-primary); }
.quantity button:hover:not(:disabled) { background: var(--brand-surface); }
.quantity button:disabled { color: var(--brand-on-disabled); opacity: .6; }
/* Navigation keeps its white canvas, with blue state and a small yellow counter. */
.brand>svg { color: var(--brand-primary); }
.nav a:hover, .nav [aria-current=page], .icon-button:hover, .menu:hover { color: var(--brand-primary); }
.nav [aria-current=page] { border-color: var(--brand-primary); }
.bag-link { color: var(--brand-primary); }
.bag-link>span {
  background: var(--brand-highlight);
  color: var(--brand-on-highlight);
  border-radius: 50%;
  min-width: 20px;
  line-height: 20px;
}
/* Editorial color is localized so the books keep their own visual identity. */
.feature-copy {
  background: var(--brand-surface);
  padding-right: 28px;
  color: var(--brand-on-surface);
}
.feature-copy .status { color: var(--brand-primary); }
.feature-copy .status span { background: var(--brand-primary); }
.feature-copy>p, .feature-foot { color: #555d70; }
.feature-foot { border-color: var(--brand-border); }
.round-link { color: var(--brand-primary); }
.round-link .arrow {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.round-link:hover .arrow { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.approach, .about-values { background: var(--brand-surface); color: var(--brand-on-surface); }
.approach-top, .imprint-symbol { color: var(--brand-primary); }
.approach .principles, .about-values .principles { border-color: var(--brand-border); }
.approach .principles p, .about-values .principles p { color: #555d70; }
.contact { border-top-color: var(--brand-border); }
.contact h2, .contact-page .page-heading h1 { color: var(--brand-on-surface); }
.contact-list button span, .contact-topics button span { color: var(--brand-primary); }
.contact-list button:hover, .contact-topics button:hover { color: var(--brand-primary); }
.paper-art { background: #f4f0e6; }
.p2 { background: var(--brand-highlight); }
.type-art { background: var(--brand-surface); }
.type-art>span { color: var(--brand-primary); }
/* Catalog and product state use one primary/surface pair. */
.book-card h3 a:hover { color: var(--brand-primary); }
.save-book[aria-pressed=true], .inline-save[aria-pressed=true] { color: var(--brand-primary); }
.save-book:hover { background: var(--brand-surface); color: var(--brand-primary); }
.tabs button.active { color: var(--brand-primary); }
.tabs button.active:after { background: var(--brand-primary); }
.catalog-sidebar input:checked+span { color: var(--brand-primary); }
.format-options input:checked+span {
  background: var(--brand-surface);
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
  color: var(--brand-primary);
}
.format-options input:checked+span small { color: var(--brand-primary-hover); }
.format-options label:hover>span { border-color: var(--brand-primary); }
.gallery-thumbs button.selected { border-color: var(--brand-primary); }
.detail-tabs [aria-selected=true] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.product-price strong { color: var(--brand-primary); }
.product-disclaimer { background: var(--brand-surface); color: #555d70; }
/* The purchase flow stays calm; actions and progress remain easy to spot. */
.order-summary, .confirmation-summary { background: var(--brand-surface); }
.order-summary>h2, .grand-total, .confirmation-summary>h2 { color: var(--brand-on-surface); }
.order-summary .totals dt, .order-summary .currency-note,
.order-summary .demo-text { color: #555d70; }
.order-summary .grand-total dt { color: var(--brand-on-surface); }
.order-summary .grand-total dd, .confirmation-summary .grand-total dd { color: var(--brand-primary); }
.order-summary .promo, .order-summary .mini-order,
.order-summary .grand-total, .confirmation-summary .grand-total { border-color: var(--brand-border); }
.delivery-note, .payment-preview { background: var(--brand-surface); }
.promo button { border-color: var(--brand-primary); color: var(--brand-primary); }
.promo button:hover { background: var(--brand-primary); color: var(--brand-on-primary); }
.checkout-steps .current { color: var(--brand-primary); }
.checkout-steps .done { color: var(--brand-primary-hover); }
.shipping-options label:has(input:checked) {
  background: var(--brand-surface);
  border-color: var(--brand-primary);
}
.mock-card { background: var(--brand-highlight); color: var(--brand-on-highlight); border-color: var(--brand-highlight); }
.confirmation-mark { background: var(--brand-surface); border-color: var(--brand-primary); color: var(--brand-primary); }
/* Proposed memberships use lilac for emphasis, yellow only for a short label. */
.plan.highlighted { background: var(--brand-surface); border-color: var(--brand-primary); }
.plan.highlighted>span:first-child {
  background: var(--brand-highlight);
  color: var(--brand-on-highlight);
  align-self: flex-start;
  padding: 4px 8px;
}
.plan.highlighted h2, .plan.highlighted .plan-price strong { color: var(--brand-primary); }
.billing-toggle label:has(input:checked) { background: var(--brand-surface); color: var(--brand-primary); }
/* Status colors communicate meaning, rather than decorating the page. */
.success-message { background: var(--brand-success-surface); border-color: #b8d3c2; color: var(--brand-success); }
#checkout-form input:user-invalid, #checkout-form select:user-invalid,
.panel-form input:user-invalid, .panel-form textarea:user-invalid,
.newsletter-form input:user-invalid {
  border-color: var(--brand-error);
  outline-color: var(--brand-error);
  background: var(--brand-error-surface);
}
.toast { background: var(--brand-footer); color: var(--brand-on-footer); }
/* Inverse footer: every label, link, and input is paired to its dark surface. */
.site-footer {
  background: var(--brand-footer);
  color: var(--brand-on-footer);
  border-top-color: var(--brand-footer);
  padding: 45px 32px 24px !important;
}
.site-footer .footer-wordmark, .site-footer .footer-grid h3 { color: var(--brand-on-footer); }
.site-footer .footer-grid p,
.site-footer .footer-grid a:not(.footer-wordmark),
.site-footer .footer-bottom, .site-footer .newsletter-form .form-note,
.site-footer .form-feedback { color: var(--brand-footer-muted); }
.site-footer .footer-grid a:hover { color: var(--brand-highlight); }
.site-footer .reading-list h3 { color: var(--brand-highlight); }
.site-footer .newsletter-form>div, .site-footer .footer-bottom { border-color: #59647f; }
.site-footer .newsletter-form input { color: var(--brand-on-footer); }
.site-footer .newsletter-form input::placeholder { color: var(--brand-footer-muted); opacity: 1; }
.site-footer .newsletter-form button { color: var(--brand-highlight); }
.site-footer :is(a,button,input):focus-visible { outline-color: var(--brand-highlight); }
.site-footer .newsletter-form input:user-invalid { color: var(--brand-error); }
@media(max-width:760px) { .feature-copy { padding-right: 22px; } }
@media(max-width:540px) {
  .feature-copy { padding: 23px 18px 0; }
  .site-footer { padding: 30px 22px 24px !important; }
}
@media(forced-colors:active) {
  .primary, .primary:disabled, .bag-link>span, .mock-card { border: 1px solid ButtonText; }
  .format-options input:checked+span, .shipping-options label:has(input:checked) { outline: 2px solid Highlight; }
}
.order-summary .demo-text { background: transparent; }
.checkout-steps li:not(.current):not(.done) { color: #737581; }