/* Cloudflare-inspired orange and white, with dark text for readable contrast. */
:root {
  --ink: #242424;
  --muted: #65605c;
  --line: #e9e3de;
  --line-dark: #c7b7aa;
  --paper: #ffffff;
  --white: #fff;
  --surface-tint: #fff3e8;
  --accent: #f38020;
  --accent-dark: #a64000;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --gutter: clamp(24px, 5vw, 80px);
}
::selection { background: #ffd7b3; color: var(--ink); }
:focus-visible { outline-color: var(--accent-dark); }
.brand img { filter: brightness(0) saturate(100%) invert(55%) sepia(93%) saturate(1528%) hue-rotate(350deg) brightness(101%) contrast(91%); }
.utility-bar { background: var(--accent); color: var(--ink); }
.header-cta, .button-solid, .product-filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.header-cta:hover, .button-solid:hover { background: #ffad63; border-color: #ffad63; color: var(--ink); }
h1 span { color: #c65308; }
.process-grid span { color: var(--accent-dark); }
.bag-thumbnails button[aria-pressed="true"] { border-color: var(--accent-dark); background: transparent; box-shadow: inset 0 -2px var(--accent-dark); }
.bag-quote:hover { color: var(--accent-dark); }
.inquire { background: var(--accent); color: var(--ink); }
.inquire .section-label, .inquire-copy > p:not(.section-label), .inquire dd, .inquire label, .form-note, .form-message { color: #3e291b; }
.inquire dl > div { border-color: #b9570a; }
.inquire input, .inquire textarea, .inquire select, .inquire select option { background: white; color: var(--ink); border-color: #d56910; }
.inquire input::placeholder, .inquire textarea::placeholder { color: var(--muted); }
.inquire input:focus, .inquire textarea:focus, .inquire select:focus { outline-color: var(--ink); }
.button-light { background: white; color: var(--ink); }
.button-light:hover { background: #fff0e2; }
.whatsapp-float { background: var(--accent); color: var(--ink); border-color: #cf650c; box-shadow: 0 4px 18px #9b450b22; }
.whatsapp-float > span { border-color: #91400c; }
@media (max-width: 640px) { :root { --gutter: 20px; } }