@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/**
 * Dino Competition — child theme token bridge.
 * Source: https://dino-site-stage.pages.dev/dino-home (:root --dino-tx-* + volt CTA).
 * Loaded after the parent Vite bundle. Not enqueued on the prelaunch waitlist.
 */
:root {
  /* Brand — lime CTA, gold accent */
  --color-primary: #A6FF3D;
  --color-primary-dark: #8FE02B;
  --color-primary-gradient-end: #8FE02B;
  --color-primary-gradient-end-light: #DEFFB0;
  --color-accent: #C9A24A;
  --color-accent-dark: #E8C46A;
  --color-on-primary: #050A08;

  /* Canvas + surface (dark shell; parent body uses background-light as canvas) */
  --color-background-light: #050A08;
  --color-background-dark: #06231B;
  --color-surface: #0A1512;
  --color-secondary: #132520;

  /* Text */
  --color-text-primary: #F2F7F4;
  --color-text-secondary: #A9BDB4;
  --heading-accent: #E8C46A;

  /* Status — dark-theme triplets */
  --color-success: #A6FF3D;
  --color-success-bg: #0B3B2E;
  --color-success-border: #1A2E27;
  --color-success-text: #A6FF3D;
  --color-danger: #FF8A7A;
  --color-danger-bg: #2A1210;
  --color-danger-border: #5C2A24;
  --color-danger-text: #FFB4AB;
  --color-warning: #E8C46A;
  --color-warning-bg: #2A2110;
  --color-warning-border: #5C4B24;
  --color-warning-text: #E8C46A;
  --color-info: #A9BDB4;
  --color-info-bg: #0B3B2E;
  --color-info-border: #1A2E27;
  --color-info-text: #A9BDB4;

  /* Forest-tinted neutrals so gray-* utilities stay on-palette */
  --color-gray-50: #06231B;
  --color-gray-100: #0A1512;
  --color-gray-200: #132520;
  --color-gray-300: #1A2E27;
  --color-gray-400: #6F8479;
  --color-gray-500: #A9BDB4;
  --color-gray-600: #C4D0C8;
  --color-gray-700: #D8D2C7;
  --color-gray-800: #E8F0EB;
  --color-gray-900: #F2F7F4;

  /* Remap leftover parent palette utilities (indigo/blue/purple) */
  --color-blue-500: #0B3B2E;
  --color-blue-600: #06231B;
  --color-blue-700: #050A08;
  --color-indigo-500: #0B3B2E;
  --color-indigo-600: #06231B;
  --color-indigo-700: #050A08;
  --color-purple-500: #0B3B2E;
  --color-purple-600: #06231B;

  --shadow-primary: 0 10px 20px -10px color-mix(in srgb, var(--color-primary) 35%, transparent);

  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --nera-primary: var(--color-primary);
  --nera-text: var(--color-text-primary);
  --nera-text-secondary: var(--color-text-secondary);
  --nera-bg: var(--color-background-light);
  --nera-surface: var(--color-surface);
  --nera-border: var(--color-gray-200);
}

.text-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-on-primary);
}

/* Parent forces text-white on primary fills; volt lime needs ink. */
.bg-primary,
[class*='bg-gradient-primary'] {
  color: var(--color-on-primary);
}

body a.bg-primary,
body a.bg-gradient-primary,
body a.from-primary,
body button.from-primary,
body .button.from-primary,
body a.btn-checkout,
body button.btn-checkout,
body a.text-white.bg-primary,
body a.text-white.bg-gradient-primary,
body a.text-white.from-primary,
body a.text-white.btn-checkout,
body .text-text-primary a.text-white.from-primary,
body .text-text-primary a.text-white.bg-primary,
body .text-text-primary a.text-white.btn-checkout,
body a.from-primary .material-symbols-outlined,
body a.from-primary > span,
body a.btn-checkout .material-symbols-outlined,
body a.btn-checkout > span,
body button.from-primary .material-symbols-outlined,
body button.btn-checkout .material-symbols-outlined,
body .button.from-primary .material-symbols-outlined {
  color: var(--color-on-primary) !important;
  -webkit-text-fill-color: var(--color-on-primary);
}

.btn-checkout {
  color: var(--color-on-primary);
}

/* Lime wells (stepper complete/active, badges). Skip danger — keep light-on-red. */
.bg-success.text-white,
.bg-primary.text-white,
.bg-success.text-white .material-symbols-outlined,
.bg-primary.text-white .material-symbols-outlined {
  color: var(--color-on-primary) !important;
  -webkit-text-fill-color: var(--color-on-primary);
}

.nera-cart-empty-state a.from-primary .material-symbols-outlined,
.btn-checkout .material-symbols-outlined,
button[name='apply_coupon'] .material-symbols-outlined,
.bg-success.text-white .material-symbols-outlined,
.bg-primary.text-white .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

/* Parent coupon CTA is bg-gray-900 text-white; Dino gray-900 is near-white. */
button[name='apply_coupon'],
button.bg-gray-900.text-white {
  background-color: var(--color-primary);
  color: var(--color-on-primary) !important;
  -webkit-text-fill-color: var(--color-on-primary);
}

button[name='apply_coupon'] span,
button[name='apply_coupon'] .material-symbols-outlined,
button.bg-gray-900.text-white .material-symbols-outlined {
  color: var(--color-on-primary) !important;
  -webkit-text-fill-color: var(--color-on-primary);
}

button[name='apply_coupon']:hover,
button.bg-gray-900.text-white:hover {
  background-color: var(--color-primary-dark);
}

.shadow-primary {
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

#site-header {
  color: var(--color-text-primary);
}

#site-header .bg-gradient-primary,
#site-header a.bg-primary {
  color: var(--color-on-primary);
}

.ncs-site-footer {
  --ncs-footer-bg: var(--color-surface);
  position: relative;
  overflow: hidden;
}

.ncs-site-footer::before {
  content: "";
  position: absolute;
  top: -48px;
  right: -40px;
  width: 300px;
  height: 300px;
  z-index: 0;
  pointer-events: none;
  background: var(--color-accent);
  opacity: 0.05;
  transform: rotate(18deg);
  -webkit-mask: url("assets/dino-footprint.webp") center / contain no-repeat;
  mask: url("assets/dino-footprint.webp") center / contain no-repeat;
}

.ncs-site-footer > *:not(#nera-scroll-top) {
  position: relative;
  z-index: 1;
}

#nera-scroll-top {
  position: fixed;
  right: 2rem;
  left: auto;
  bottom: 2rem;
}

/* Footer social icons — override WP network colors with Dino chrome */
.ncs-site-footer .wp-block-social-links {
  gap: 10px;
  padding: 0;
  margin: 0;
}

.ncs-site-footer .wp-block-social-links .wp-social-link,
.ncs-site-footer .wp-block-social-links:not(.is-style-logos-only) .wp-social-link,
.ncs-site-footer .wp-block-social-links:not(.is-style-logos-only) [class*="wp-social-link-"] {
  background-color: var(--color-secondary);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-gray-300);
  border-radius: 9999px;
}

.ncs-site-footer .wp-block-social-links.is-style-logos-only .wp-social-link,
.ncs-site-footer .wp-block-social-links.is-style-logos-only [class*="wp-social-link-"] {
  background: none;
  border-color: transparent;
  color: var(--color-accent-dark);
}

.ncs-site-footer .wp-block-social-link {
  margin: 0;
  transform: none;
  transition: border-color 160ms ease, color 160ms ease;
}

.ncs-site-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,
.ncs-site-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,
.ncs-site-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active,
.ncs-site-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited,
.ncs-site-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg {
  color: currentColor;
  fill: currentColor;
  text-decoration: none;
}

.ncs-site-footer .wp-block-social-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 0;
  text-decoration: none;
}

.ncs-site-footer .wp-block-social-links.is-style-logos-only .wp-block-social-link a {
  width: auto;
  height: auto;
}

.ncs-site-footer .wp-block-social-link svg {
  width: 18px;
  height: 18px;
}

.ncs-site-footer .wp-block-social-link .wp-block-social-link-label:not(.screen-reader-text) {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 0 0.5em;
}

.ncs-site-footer .wp-block-social-links:not(.is-style-logos-only) .wp-social-link:hover,
.ncs-site-footer .wp-block-social-links:not(.is-style-logos-only) .wp-social-link:focus-within {
  border-color: var(--color-accent-dark);
}

.ncs-site-footer .wp-block-social-links.is-style-logos-only .wp-social-link:hover,
.ncs-site-footer .wp-block-social-links.is-style-logos-only .wp-social-link:focus-within {
  color: var(--color-accent);
}

.ncs-site-footer .wp-block-social-link-anchor:focus {
  outline: none;
}

.ncs-site-footer .wp-block-social-link-anchor:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Alpine toast in the parent footer. dark:bg-gray-900 follows the OS and
   lands on the inverted light gray token, so the lime icon sits on cream. */
.fixed.top-20.right-6 .bg-surface {
  background: var(--color-surface);
  border-color: var(--color-gray-300);
  color: var(--color-text-primary);
}

.fixed.top-20.right-6 .text-gray-800 {
  color: var(--color-text-primary);
}

.fixed.top-20.right-6 .group > button {
  color: var(--color-text-secondary);
  opacity: 1;
}

/* Spin page cream controls inherit lime --color-primary as their label.
   The chip is a light gold wash, so the label needs the dark on-primary ink. */
#nera-spin-root button[class*="turboBtn"],
#nera-spin-root #nera-stw-modal button[class*="btnSecondary"],
#nera-spin-root button[class*="viewBtn"],
#nera-spin-root button[class*="viewBtn"]:hover,
#nera-spin-root button[class*="viewBtn"]:focus-visible,
#nera-spin-root aside [class*="headerLeft"] > span[class*="icon"] {
  color: var(--color-on-primary);
}