/* HoneyComb foundations. See docs/DESIGN_SYSTEM.md before adding a token. */
:root {
  color-scheme: dark;
  --hc-bg: #111416;
  --hc-surface: #1b2023;
  --hc-raised: #262d31;
  --hc-text: #f4f3ee;
  --hc-muted: #b7c0c5;
  --hc-border: #78868d;
  --hc-accent: #f2c94c;
  --hc-accent-hover: #ffdc73;
  --hc-ink: #111416;
  --hc-success: #91ddb3;
  --hc-danger: #ffb4ab;
  --hc-info: #a7d8f0;
  --hc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hc-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --hc-text-sm: .875rem;
  --hc-text-base: 1rem;
  --hc-text-lg: 1.25rem;
  --hc-space-1: .25rem;
  --hc-space-2: .5rem;
  --hc-space-3: .75rem;
  --hc-space-4: 1rem;
  --hc-space-6: 1.5rem;
  --hc-space-8: 2rem;
  --hc-space-12: 3rem;
  --hc-space-16: 4rem;
  --hc-radius: .375rem;
  --hc-width: 72rem;
}

.hc-ui, .hc-alert, .hc-empty {
  font-family: var(--hc-font);
  font-size: var(--hc-text-base);
  line-height: 1.6;
}
.hc-ui { margin: 0; background: var(--hc-bg); color: var(--hc-text); }
.hc-ui *, .hc-ui *::before, .hc-ui *::after { box-sizing: border-box; }
.hc-ui h1, .hc-ui h2, .hc-ui h3, .hc-ui h4 { font-family: var(--hc-font); line-height: 1.2; letter-spacing: -.02em; }
.hc-ui h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.hc-ui h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.hc-ui h3 { font-size: var(--hc-text-lg); }
.hc-ui p { line-height: 1.65; }
.hc-ui a { color: var(--hc-accent); text-underline-offset: .2em; }
.hc-ui img { max-width: 100%; }
.hc-ui :focus-visible, .hc-alert :focus-visible {
  outline: 3px solid var(--hc-accent);
  outline-offset: 4px;
}
.hc-ui [hidden] { display: none !important; }
.hc-page { width: min(calc(100% - 2rem), var(--hc-width)); margin: var(--hc-space-12) auto; }
.hc-prose { max-width: 46rem; }
.hc-stack > * + * { margin-top: var(--hc-space-6); }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--hc-space-6); }
.hc-panel { padding: var(--hc-space-6); background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); }
.hc-eyebrow { color: var(--hc-accent); font-family: var(--hc-mono); font-size: var(--hc-text-sm); letter-spacing: .08em; text-transform: uppercase; }
.hc-muted, .hc-hint { color: var(--hc-muted); }
.hc-hint { display: block; font-size: var(--hc-text-sm); margin-top: var(--hc-space-2); }
.hc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-space-3); }
.hc-button, .hc-ui :is(button, input[type="submit"], .option-btn, .btn, .button, .order-btn, .learn-btn, .wishlist-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hc-space-2);
  min-height: 44px; padding: .65rem 1.1rem; border: 1px solid var(--hc-accent);
  border-radius: var(--hc-radius); background: var(--hc-accent); color: var(--hc-ink);
  font: 600 1rem/1.25 var(--hc-font); text-decoration: none; cursor: pointer;
  box-shadow: none; white-space: normal; transition: background-color .15s;
}
.hc-button:hover, .hc-ui :is(button, input[type="submit"], .option-btn, .btn, .button, .order-btn, .learn-btn, .wishlist-link):hover { background: var(--hc-accent-hover); color: var(--hc-ink); transform: none; }
.hc-ui .hc-button--secondary, .hc-ui .wishlist-btn { background: transparent; color: var(--hc-accent); }
.hc-ui .hc-button--danger { background: transparent; border-color: var(--hc-danger); color: var(--hc-danger); }
.hc-ui :is(button, input):disabled, .hc-ui [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.hc-ui [aria-busy="true"] { cursor: progress; }
.hc-ui :is(input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px; max-width: 100%; padding: var(--hc-input-padding, .7rem .85rem); border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius); background: var(--hc-bg); color: var(--hc-text);
  font: 400 1rem/1.4 var(--hc-font); box-shadow: none;
}
.hc-ui ::placeholder { color: var(--hc-muted); opacity: 1; }
.hc-ui [aria-invalid="true"] { border-color: var(--hc-danger); }
.hc-field { display: grid; gap: var(--hc-space-2); }
.hc-field label { font-weight: 600; }
.hc-form-label { display: block; font-weight: 600; text-align: left; margin-bottom: var(--hc-space-2); }
.hc-field-error { color: var(--hc-danger); font-size: var(--hc-text-sm); }
.hc-alert, .hc-empty {
  display: block; margin: var(--hc-space-4) 0; padding: var(--hc-space-4) var(--hc-space-6);
  background: var(--hc-surface); border: 1px solid var(--hc-border); border-left: 4px solid var(--hc-info);
  border-radius: var(--hc-radius); color: var(--hc-text); animation: none; cursor: default;
}
.hc-alert--success { border-left-color: var(--hc-success); }
.hc-alert--error { border-left-color: var(--hc-danger); }
.hc-alert--warning { border-left-color: var(--hc-accent); }
.hc-empty { border-left-width: 1px; }
.hc-empty[hidden], .hc-alert:empty { display: none; }
.hc-badge { display: inline-block; padding: .15rem .6rem; border: 1px solid currentColor; border-radius: var(--hc-radius); font-size: var(--hc-text-sm); color: var(--hc-accent); }
.hc-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.hc-table th, .hc-table td { text-align: left; padding: var(--hc-space-3); border-bottom: 1px solid var(--hc-border); vertical-align: top; overflow-wrap: anywhere; }
.hc-ui summary { cursor: pointer; padding: var(--hc-space-4) 0; font-weight: 600; }
.hc-ui details { border-bottom: 1px solid var(--hc-border); }
.hc-ui details > p { margin: 0 0 var(--hc-space-4); }
.hc-swatch { min-height: 6rem; padding: var(--hc-space-4); background: var(--swatch); color: var(--swatch-text, var(--hc-text)); border-radius: var(--hc-radius); }
.hc-skip { position: absolute; left: 1rem; top: -10rem; z-index: 2000; background: var(--hc-accent); color: var(--hc-ink) !important; padding: var(--hc-space-3); }
.hc-skip:focus { top: 1rem; }

/* Compatibility bridge: existing commerce/account layouts keep their structure. */
.hc-ui .headerForHomePage { position: relative; inset: auto; transform: none; width: 100%; max-width: none; border-radius: 0; padding: 1rem max(1rem, calc((100% - 72rem) / 2)); background: var(--hc-bg); box-shadow: none; border-bottom: 1px solid var(--hc-border); backdrop-filter: none; }
.hc-ui .headerForHomePage a { font-family: var(--hc-font); letter-spacing: normal; }
.hc-ui .headerForHomePage .hornet-special-link { background: var(--hc-accent); color: var(--hc-ink); border-radius: var(--hc-radius); box-shadow: none; }
.hc-ui .headerForHomePage .content { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); }
.hc-ui .dropdown > a[href="#"][aria-expanded="false"] + .content { display: none; }
.hc-ui .dropdown > a[href="#"][aria-expanded="true"] + .content { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
.hc-ui .headerForHomePage .mobile-nav-wrapper .dropdown .content { width: min(20rem, calc(100vw - 3rem)); left: 50%; transform: translateX(-50%); }
.hc-ui footer { background: var(--hc-surface); color: var(--hc-text); font-family: var(--hc-font); }
.hc-ui .productsContainer { background: var(--hc-bg); padding-top: var(--hc-space-8); }
.hc-ui :is(.productBox, .filter-sort-container, .login-form-container, .profile-card) { background: var(--hc-surface); border-radius: var(--hc-radius); box-shadow: none; }
.hc-ui .productBox { transform: none; opacity: 1; }
.hc-ui .productDetails p { color: var(--hc-text); font-variant-numeric: tabular-nums; }
.hc-ui .productDetails h2 { font-size: 1.125rem; white-space: normal; overflow: visible; height: auto; text-overflow: clip; }
.hc-ui .search-container { margin-top: var(--hc-space-6); box-shadow: none; background: var(--hc-surface); border-radius: var(--hc-radius); }
.hc-ui .search-container button i, .hc-ui .wishlist-link i { color: inherit; }
.hc-ui .message-container { position: static; transform: none; max-width: var(--hc-width); margin: auto; }
.hc-ui .wishlist-row { background: var(--hc-surface); }
.hc-ui .wishlist-price { color: var(--hc-text); font-variant-numeric: tabular-nums; }
.hc-ui .wishlist-stock { color: var(--hc-muted); }
.hc-ui .wishlist-remove { min-width: 44px; }
.hc-ui .toggle-password { padding: .25rem; }
.hc-ui .login-form-section, .hc-ui .signup-side-panel { animation: none; opacity: 1; transform: none; background: var(--hc-bg); }
.hc-ui .login-wrapper { min-height: 0; max-width: var(--hc-width); margin: var(--hc-space-8) auto; }
.hc-ui .login-form-container { padding: var(--hc-space-6); }
.hc-ui .signup-side-panel .signup-btn { background: var(--hc-accent); color: var(--hc-ink); border-radius: var(--hc-radius); }
.hc-ui .signup-side-panel p, .hc-ui .login-subtitle { color: var(--hc-muted); }
.hc-ui .input-group { --hc-input-padding: .7rem 3rem .7rem 2.6rem; }
@media (max-width: 40rem) {
  .hc-page { margin-block: var(--hc-space-8); }
  .hc-panel { padding: var(--hc-space-4); }
  .hc-ui .productsContainer { padding-inline: var(--hc-space-4); }
  .hc-ui .productsList { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .hc-ui .filter-sort-container { padding: var(--hc-space-4); }
  .hc-ui .login-form-section, .hc-ui .signup-side-panel { padding: var(--hc-space-4); }
  .hc-ui .signup-side-panel { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-ui *, .hc-ui *::before, .hc-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}