/* PeptideAxiom: cool neutrals and the approved logo's teal.
   Load after the shared theme, brand and typography stylesheets.
   Colour-only overrides: no layout, typography, images or behaviour changes. */
:root {
  --ink: #17242e;
  --ink-2: #354957;
  --muted: #566674;
  --paper: #f5f8fa;
  --paper-2: #edf2f5;
  --white: #ffffff;
  --line: rgba(23, 36, 46, .16);
  --deep: #0b1016;
  --deep-2: #18222c;
  --teal: #007a78;
  --teal-light: #69dbd3;
  --action: #00c4bf;
  --action-hover: #35d4ce;
  --action-ink: #071b1c;
  --acid: var(--action);
  --orange: #bc6848;
  --danger: #a33d34;
  --warning: #94542f;
  --theme-foreground: #f3f6f8;
  --theme-accent-wash: rgba(0, 122, 120, .065);
  --focus-wash: rgba(0, 122, 120, .16);
  --field-line: rgba(23, 36, 46, .25);
  --shadow: 0 24px 70px rgba(11, 16, 22, .12);
}

html[data-theme="dark"] {
  --ink: #f3f6f8;
  --ink-2: #cfdae3;
  --muted: #b0bec9;
  --paper: #10151c;
  --paper-2: #18222c;
  --white: #151e27;
  --line: rgba(207, 218, 227, .17);
  --deep: #0b1016;
  --deep-2: #18222c;
  --teal: #00c4bf;
  --teal-light: #69dbd3;
  --acid: var(--action);
  --orange: #e7a184;
  --danger: #ffa79a;
  --warning: #efb28d;
  --theme-foreground: #f3f6f8;
  --theme-accent-wash: rgba(0, 196, 191, .075);
  --focus-wash: rgba(0, 196, 191, .18);
  --field-line: rgba(207, 218, 227, .27);
  --shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

/* Navigation and purchase actions. Bright teal always carries dark text. */
html:root .announcement { background: var(--action); color: var(--action-ink); }
html:root .announcement-dot { background: var(--action-ink); box-shadow: 0 0 0 4px rgba(7, 27, 28, .12); }
html:root .announcement-divider { background: rgba(7, 27, 28, .3); }
html:root .site-header { background: rgba(245, 248, 250, .95); }
html[data-theme="dark"] .site-header { background: rgba(16, 21, 28, .95); }
html:root .brand-mark { border-color: rgba(0, 196, 191, .25); }
html:root .basket-button { background: var(--deep-2); border-color: var(--deep-2); color: var(--theme-foreground); }
html:root :is(.basket-count, .mobile-nav b) { background: var(--action); color: var(--action-ink); }
html:root .account-button.authenticated .account-dot { box-shadow: 0 0 0 4px var(--focus-wash); }
html:root :is(.button-accent, .button-dark),
html:root .admin-page .primary-button { background: var(--action); color: var(--action-ink); }
html:root :is(.button-accent, .button-dark):hover,
html:root .admin-page .primary-button:hover { background: var(--action-hover); color: var(--action-ink); }
html:root :is(.filter-chip.active, .filter-chip:hover, .tracker-tab.active, .small-button.complete, .success-mark, .account-avatar) {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-ink);
}
html:root .mobile-nav { background: rgba(245, 248, 250, .97); }
html[data-theme="dark"] .mobile-nav { background: rgba(16, 21, 28, .97); }

/* Permanently dark sections retain a readable foreground in either theme. */
html:root :is(.hero, .standards-section, .tracker-preview-card, .site-footer, .admin-header, .toast, .button-ghost-light, .hero-card-copy strong) {
  color: var(--theme-foreground);
}
html:root .hero { background: radial-gradient(ellipse at 85% 25%, rgba(0, 196, 191, .045), transparent 55%), var(--deep); }
html:root .hero::before { border-color: rgba(0, 196, 191, .13); box-shadow: 0 0 0 100px rgba(0, 196, 191, .02), 0 0 0 200px rgba(0, 196, 191, .012); }
html:root .hero-visual::before { border-color: rgba(105, 219, 211, .24); box-shadow: inset 0 0 100px rgba(0, 196, 191, .1); }
html:root .hero-visual::after { border-color: rgba(0, 196, 191, .2); }
html:root .hero-card { background: rgba(24, 34, 44, .96); }
html:root :is(.hero-lede, .hero-meta span, .specimen-kicker, .hero-card-copy, .preview-entry div span, .standard-list p, .standards-copy > p:not(.eyebrow), .footer-brand p, .orbit-label) { color: #b0bec9; }
html:root .account-cta { background: var(--deep-2); color: var(--theme-foreground); }
html:root .account-cta h2 em { color: var(--teal-light); }
html:root :is(.footer-grid a, .footer-link) { color: #b0bec9; }
html:root :is(.footer-grid a:hover, .footer-link:hover) { color: var(--action); }
html:root .footer-bottom { color: #a2b2c0; }
html:root .admin-header .theme-toggle { color: var(--theme-foreground); }
html:root .admin-brand > small { color: #a2b2c0; }

/* Featured product: selected options, stock and secondary copy. */
html:root :is(.feature-intro, .feature-variant span, .feature-price > span, .feature-stock, .feature-presentation, .feature-note, .feature-browse) { color: #b0bec9; }
html:root .feature-variant { background: rgba(207, 218, 227, .035); border-color: rgba(207, 218, 227, .3); color: var(--theme-foreground); }
html:root .feature-variant[aria-pressed="true"] { border-color: var(--action); background: rgba(0, 196, 191, .075); box-shadow: inset 0 0 0 1px var(--action); }
html:root .feature-variant[aria-pressed="true"] strong { color: var(--action); }
html:root .feature-variant:hover:not(:disabled) { border-color: var(--theme-foreground); }
html:root .feature-stock.is-available::before { background: var(--action); }
html:root .feature-delivery { color: #cfdae3; }
html:root .feature-details { color: var(--theme-foreground); }
html:root .feature-browse:hover { color: var(--action); }

/* Category markers remain distinct; the former lime marker becomes blue. */
html:root .orb-glp { background: radial-gradient(circle at 33% 28%, #bdece8, #30a7a3 66%, #006d6a); }
html:root .orb-growth { background: conic-gradient(from 120deg, #c3ddeb, #608da9, #c3ddeb); }
html:root .product-art.cat-glp::before { background: radial-gradient(circle at 30% 25%, #bdece8, #30a7a3 66%, #006d6a); }
html:root .product-art.cat-growth::before { background: radial-gradient(circle at 30% 25%, #deecf4, #8aaac0 67%, #526f85); }

/* Product photos and their neutral stages deliberately retain their source colours. */
html:root .product-card { background: var(--white); border-color: var(--line); }
html:root .product-status:not(.stock-unavailable) { color: var(--teal); }
html:root .stock-unavailable { color: var(--muted); }
html:root .quick-add { background: rgba(255, 255, 255, .94); border-color: rgba(23, 36, 46, .25); color: #17242e; }
html:root .quick-add:hover { background: var(--action); border-color: var(--action); color: var(--action-ink); }
html:root .quick-add:disabled:hover { background: rgba(255, 255, 255, .94); border-color: rgba(23, 36, 46, .25); color: #17242e; }
html:root .skeleton-card { background-image: linear-gradient(100deg, #e8eef2 20%, #f5f8fa 45%, #e8eef2 70%); }
html[data-theme="dark"] .skeleton-card { background-image: linear-gradient(100deg, #18222c 20%, #263542 45%, #18222c 70%); }

/* Forms, reviews and checkout share the same neutral surfaces and focus state. */
html:root :is(button, a, input, select, textarea):focus-visible { outline-color: var(--teal); }
html:root :is(.hero, .account-cta, .site-footer, .standards-section, .admin-header) :is(button, a, input, select, textarea):focus-visible { outline-color: var(--action); }
html:root :is(.stack-form input, .stack-form select, .stack-form textarea, .inventory-form input, .admin-login-form input, .search-form input, .search-form select),
html:root .review-form :is(input, textarea) { border-color: var(--field-line); }
html:root :is(.stack-form input, .stack-form select, .stack-form textarea):focus,
html:root :is(.search-field, .sort-field):focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-wash); }
html:root :is(.admin-login-form input, .search-form input, .search-form select):focus,
html:root .inventory-form input:focus-visible,
html:root .review-form :is(input, textarea):focus { border-color: var(--teal); outline-color: var(--teal); }
html:root :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html:root :is(.checkout-account-note, .consent-check) { background: var(--theme-accent-wash); border-color: var(--line); }
html:root .privacy-pill { border-color: var(--field-line); }
html:root :is(.status-badge, .payment-method-badge) { background: var(--theme-accent-wash); }
html:root .status-badge.skipped { background: rgba(188, 104, 72, .1); color: var(--warning); }
html:root .social-login-button { background: var(--white); }
html:root .social-login-button[aria-disabled="true"] { background: var(--paper); }
html:root .social-login-button:not([aria-disabled="true"]):hover { box-shadow: 0 8px 24px rgba(11, 16, 22, .08); }
html:root .provider-google { background: #fff; border-color: #d2dce3; color: #007a78; }
html:root .provider-apple { background: var(--ink); color: var(--paper); }
html:root .stack-form .payment-option { background: var(--white); }
html:root .stack-form .payment-option-disabled { background: var(--paper); }
html:root .stack-form .payment-option-selected { border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-wash); }
html:root .payment-method-icon { background: var(--deep); color: var(--action); }
html:root :is(.payment-option-disabled .payment-method-icon, .payment-method-badge.unavailable) { background: var(--paper-2); color: var(--muted); }
html:root .crypto-connection-status { background: var(--paper); border-color: var(--field-line); }
html:root .connection-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(188, 104, 72, .12); }
html:root .drawer-backdrop { background: rgba(5, 10, 16, .62); }
html:root .modal::backdrop,
html:root .order-dialog::backdrop { background: rgba(5, 10, 16, .76); }
html:root :is(.form-error, .text-button.danger) { color: var(--danger); }

/* Administration: matching surfaces, readable status colours, unchanged data. */
html:root .admin-page .summary-grid small { color: var(--warning); }
html:root .admin-page td { border-bottom-color: var(--line); }
html:root .admin-page .inventory-summary article:nth-child(3) { background: var(--theme-accent-wash); }
html:root .admin-page .inventory-summary article:last-child { background: var(--paper); }
html:root .admin-review-status.is-hidden { background: var(--paper); color: var(--muted); }